Pass parameter to Bootgrid dynamically

Question

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

Answer 1

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);

}