jqueryjquery-bootgrid

Pass parameter to Bootgrid dynamically


I have a bootgrid like this,

 var grid = $("#grid-data").bootgrid({
        ajax: true,
        post: function () {
            /* To accumulate custom parameter with the request object */
            return {
                id: "b0df282a-0d67-40e5-8558-c9e93b7befed"
            };
        },

        url: "Home/GetFacilities",
        ...........

I have a button and its associated event and would like that when I click the button some parameters are passed to bootgrid, which is then reloaded with its new values.

I looked at the documentation and found the reload event but I did not see how to pass a parameter to it. thank you


Solution

  • You have to make changes to the requestHandler, I reload my data using JSON and POST

     var dt = $(this).bootgrid({
         selection: true,
         rowSelect: true,
         requestHandler: function (request) {
             var model = {
                 param1: 1,
                 param2: 2
    
             }
             model.Current = request.current;
             model.RowCount = request.rowCount;
             model.Search = request.searchPhrase;
    
             for (var key in request.sort) {
                 model.SortBy = key;
                 model.SortDirection = request.sort[key];
             }
    
             return JSON.stringify(model);
         },
         ajaxSettings: {
             method: "POST",
             contentType: "application/json"
         },
         ajax: true,
         url: '/Test/Parameters'
     });
    

    I have a model like this on server:

        public class PaginationFilterDTO
        {
            public int RowCount { get; set; }
            public int Current { get; set; }
            public string Search { get; set; }
            public string SortBy { get; set; }
            public string SortDirection { get; set; }
            public int TotalItems { get; set; }
        }
    
    
    public class MyFilter : PaginationFilterDTO
    {
        public int param1 {get;set;}
        public int param2 {get;set;}
    }
    

    Controller:

    [HttpPost]
    public ActionResult Parameters(MyFilter model)
    {
        var response = new ResponseDTO<myDTO>
        {
            current = model.Current,
            rowCount = model.RowCount,
            total = model.TotalItems,
            rows = new List<MyDTO>()
        };
    
        var items = new List<myDTO>(); // Load Data here
        response.rows = siteUsers;
        response.total = model.TotalItems;
    
        return Json(response);
    }
    

    Just in case: ResponseDTO

    public class ResponseDTO<T>
    {
        public int current { get; set; }
    
        public int rowCount { get; set; }
    
        public List<T> rows { get; set; }
    
        public int total { get; set; }
    }
    

    You will then have to bind your button to the reload of the grid, I suggest you use data attributes:

    <button id="myBtn" data-param1="1" data-param2="2">Click Me</button>
    
    
    $('#myBtn').click(function (e) {
    
        $('#mygrid').bootgrid('reload');
    
    });
    

    And change requestHandler to:

    requestHandler: function (request) {
        var model = {
    
            param1: $('#myBtn').data('param1'),
            param2: $('#myBtn').data('param2'),
        };
        model.Current = request.current;
        model.RowCount = request.rowCount;
        model.Search = request.searchPhrase;
    
        for (var key in request.sort) {
            model.SortBy = key;
            model.SortDirection = request.sort[key];
        }
    
        return JSON.stringify(model);
    
    }