Question

When I click the FilterButton it hits the alert everytime, after every click. However, the action method GridData is only getting hit the first time through. Do you know why?

$(document).ready(function () {

            $('#FilterButton').click(function () {

                alert('button clicked');

                var myGrid = jQuery("#list").jqGrid({
                    url: '/Data/GridData/',
                    datatype: 'json',
                    mtype: 'POST',
                   ......

Here is the requested Action Method

 [HttpPost]
    public JsonResult GridData(string sidx, string sord, int page, int rows, string species, string methodOfTake, string outputType, string seasons, string years)
    {          

        var results = (from a in db.t_harvest_statistics_elk
                        where a.year == "2008" && a.unit_number == 1
                        orderby a.id
                        select new { a.id, a.year, a.unit_number, a.total_hunters, a.bulls, a.cows }).ToList(); 

        int pageIndex = Convert.ToInt32(page) - 1;
        int pageSize = rows;
        int totalRecords = results.Count();   
        int totalPages = (int)Math.Ceiling((float)totalRecords / (float)pageSize);

        var pageResults = results.Skip(pageIndex * pageSize).Take(pageSize);           

        var jsonData = new
        {
            total = totalPages,
            page,
            records = totalRecords,
            rows = (
                from pageResult in pageResults
                select new
                {
                    id = pageResult.id,
                    cell = new[] { 
                                    pageResult.year.ToString(),
                                    "Add",
                                    pageResult.unit_number.ToString(),                                         
                                    pageResult.total_hunters.ToString(),
                                    pageResult.bulls.ToString(),
                                    "add",
                                    pageResult.cows.ToString(),
                                    "add",
                                    "add",
                                    "add"

            }
                }).ToArray()
        };


        return Json(jsonData, JsonRequestBehavior.AllowGet); 
    }

Answer 1

The jqGrid control is an interesting beast.

What is happening here is that you’re first call is initialising the grid, and therefore setting up the grid for the first time will initialise the data needed for the grid. This initialisation is calling the controller action and is the reason it’s hitting the breakpoint the first time.

For each subsequent click, what’s happening is that you’re calling the jqGrid() method, but because it’s already initialised, it’s ignoring the call and therefore not setting the parameters you specify.

What you need to do instead is call the “setGridParam” method which will allow you to update the jqGrid parameters like so:

jQuery('#list').setGridParam({
                    url: '/Data/GridData/',
                    datatype: 'json',
                    mtype: 'POST',
                    ...
); 

after you’ve changed the grid parameters, you need to trigger a refresh like so:

jQuery('#list').trigger("reloadGrid");  

It’s not the most intuitive setup, but this is how jqGrid works.