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

score 4 · Answer 1 · answered Feb 01 '16 at 16:53

You need to change your request handler but no need to recreate it from scratch, just add the properties you need and return it.

var grid = $("#grid-data").bootgrid({
    ajax: true,
    requestHandler: function (request) {
                   //Add your id property or anything else
                   request.id = "b0df282a-0d67-40e5-8558-c9e93b7befed";
                   return request;
    },
    url: "Home/GetFacilities",
    ........

Dawood Awan · Accepted Answer · 2015-08-10T09:46:34.070

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

}

score 0 · Answer 3 · answered Jul 09 '20 at 09:05

Another way for solution: 1- Bind your BootGrid to @Html.EditorFor with any html

            @Html.EditorFor(model => model.Status,
            new { htmlAttributes = new { @id = "e1", @style = "display:none;" } })
            <div id="f1" class="col-sm-3"><a class="active select-airport">XC/CAI Corendon Airlines</a></div>

2- Hide your binded element

$(document).ready(function () {
    $("[name='Status']").css("display", "none");
    $("label[for='Status']").css("display", "none");
});

3- Last step, change your binded element value and trigger it (on div click in my case)

$("#f1").bind("click", (function () {
    $(".select-airport").removeClass("active");
    $(this).children('a').addClass('active');
    $('#Status').val(1);
    $("#Status").trigger("change");

}));

Pass parameter to Bootgrid dynamically

3 Answers3