Gijgo grid not refreshing on change event

Question

I am working on MVC 5 application. I am stuck on a view in which there is a dropdown and a grid(Gijgo-grid). Grid is getting populated based on selected value of the dropdown. When I select an option from the dropdown for the first time, grid gets populated. But when I change my selection in dropdown, grid data does not change.

On change event of the dropdown, I am using ajax to call function in controller to get data for the grid.

cshtml page

<div>
      <table id="gridmvc"></table>
</div>

<script>
$(document).ready(function(){
  $("#DropDownID").change(function(){
      $.ajax({
         type: 'POST',
         url : '/Test/GetGrid',
         data: {selectedID: this.value},
         success: function(data){
            grid = $('#gridmvc').grid({
                 primaryKey: 'DeliveryID',
                 dataSource: data,
                 columns: [
                      {field: 'DeliveryID'},
                      {field: 'ProductName', sortable: true},
                      {field: 'Amount', sortable: true}
                 ],
                 pager:{limit: 5}
            });
         },
         error: function(){alert('error');}
      });
  });
});
</script>

Test controller function

public JsonResult GetGrid(int? page, int? limit, string sortBy, string direction, int selectedID)
        {
            List<ViewModel> records;
            int total;

                var query = Lync query to fetch data from Database using selectedID;

                if (!string.IsNullOrEmpty(sortBy) && !string.IsNullOrEmpty(direction))
                {
                    //code for sorting
                }
                else
                {
                    query = query.OrderBy(q => q.DeliveryID);
                }

                if (page.HasValue && limit.HasValue)
                {
                    //code for paging
                }
                else
                {
                    records = query.ToList();
                }

            return this.Json(records, JsonRequestBehavior.AllowGet);
        }

Grid data should refresh based on the new selection of dropdown.

Answer 1

According to documentation found here you have reload function.

https://gijgo.com/grid/methods

Here Reload does this: Reload the data in the grid from a data source. This means that you can change the datasource and do the reload according to the parameters like this:

<script>
    //RAZOR view    
    function reloadGrid(){  
            grid.clear();
            grid.reload();
    }

    $(document).ready(function(){
      $("#DropDownID").change(function(){
                grid = $('#gridmvc').grid({
                     dataSource: '/Test/GetGrid'
                     params: { selectedID: this.value },
                     primaryKey: 'DeliveryID',
                     columns: [
                          {field: 'DeliveryID'},
                          {field: 'ProductName', sortable: true},
                          {field: 'Amount', sortable: true}
                     ],
                     pager:{limit: 5}
                });
                reloadGrid();      
      });
    });
</script>

But if you are changing the data in your Ajax call you can use render.

https://gijgo.com/grid/methods/render

Here Render does this: Render data in the grid (From your response).

So in your success you could do this:

<script>
$(document).ready(function(){
  $("#DropDownID").change(function(){
      $.ajax({
         type: 'POST',
         url : '/Test/GetGrid',
         data: {selectedID: this.value},
         success: function(data){
            grid = $('#gridmvc').grid({
                 primaryKey: 'DeliveryID',
                 columns: [
                      {field: 'DeliveryID'},
                      {field: 'ProductName', sortable: true},
                      {field: 'Amount', sortable: true}
                 ],
                 pager:{limit: 5}
            });

            grid.render(data);
         },
         error: function(){alert('error');}
      });
  });
});
</script>

Also if you read the gijgo.js you can find this:

https://cdn.jsdelivr.net/npm/gijgo@1.9.13/js/gijgo.js

Line 4554:

@param {object} params - An object that contains a list with parameters that are going to be send to the server.