changing JQGRID URL dynamically

While developing web applications, there will be need sometimes to render the data in JQGRID, based on what customer wants to see it. But in JQGRID, the URL will be provided for the first time when you created the JQGRID like below:

jQuery("#customerGrid").jqGrid({
          
    url: "/Customer/GetByType/3"
    datatype: 'json'
});

With the hardcoded the URL, cannot render different data based on what user wants to see it. If you need to display different data by changing URL, with the above-hardcoded URL approach, you end up recreating the JQGRID every time. I think that is expensive, considering that, need is to change just the URL form which data will be fetched.

One option is to consider changing just the URL, depending on what user what to see it. When you want to display data from a different URL, you need to do two things:

1. First, change the jqgrid URL
2. Second, reload the grid

Code to change the jqgrid URL

$("#customerGrid").jqGrid(
'setGridParam',{ url: "/Customer/GetByType/" + $('#customerType').val() 
}).trigger("reloadGrid");
});

Making JQGrid not to load data, just upon constructing it

Sometimes when you want to show data in jqgrid, you might not know the URL up front to get the JSON data until the user selects something. In such scenario, if you mention the URL while constructing the jqGRID, the JQGRID will try to load the data from the URL mentioned, that may not be desirable in some scenarios.

In such scenario, you can stop JQGRID making the URL request for the data. To do this you can do two things:

1. First mention 'datatype' param as 'local' while building the jqgrid instead on 'json'. Then the 'URL' param mentioned doesn't have any impact.

   jQuery("#customerGrid").jqGrid({
               datatype: 'json'
   });

2. Second, when user changes the selection to view specific data, change the 'datatype' param to 'json', set the URL to fetch the data and reload the grid.

   $("#customerGrid").jqGrid('setGridParam', { datatype: 'json' }); 
   
   $("#customerGrid").jqGrid(
       'setGridParam',{ url: "/Customer/GetByType/" +
        $('#customerType').val() 
   }).trigger("reloadGrid");
   });

displaying custom message and preventing the delete action in jqgrid

Sometimes you will have business requirements not to delete some rows in jqgrid, while allowing others to be deleted. So while making some rows not to be deleted, it will not make sense to show default confirmation message, instead, you want to show your own alert message, saying "You cannot delete the record because of XYZ reason".

It's pretty easy to achieve the above requirement and one of the approach is below:

1. Handle the beforeShowForm event for the DELETE button and display your custom message based on the selected row.
   beforeShowForm: function ($form) {
     
     // Identity whether you want to display the below 
     // message or not based on selected row.
     // var selRowId = myGrid.jqGrid('getGridParam', 'selrow');
     alert('You cannot delete the record because of XYZ reason');
    }
2. Handle the afterShowForm event for the DELETE button and don't show the delete confirmation box. One way to do this is automatically clicking the Cancel button in the confirmation box so that it gets closed.
   try {
   // do this based on the selected row
   $("#eData", $form.parent()).click();
   }
   catch (ex) {}
   • Catch any exception and eat it by clicking the Cancel button.
   • To know the ID of the buttons on the confirmation box, you can launch the Developer Tools in your browsers and inspect the window. In IE browser you can launch the Developer Tools by clicking F12 key.