I'm currently working on an MVC 5 application and I've hit a roadblock with a particular view. This view contains a dropdown menu and a grid (Gijgo-grid). The grid's content is supposed to change based on the selected value from the dropdown. However, when I select a different option from the dropdown after the initial selection, the grid fails to update.
For the onchange event of the dropdown, I have implemented an ajax call to trigger a function in the controller that fetches data for the grid.
The cshtml page structure is as follows:
<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>
Here is the relevant functionality in the Test controller:
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);
}
The goal is to ensure that the grid data refreshes accurately based on the new dropdown selection.