how to delete selected records of jqgrid in asp.net c#

Question

can anyone help in deleting selected records of jqgrid in asp.net c# for the following code

<script type="text/javascript">
        var x = screen.width;

        $(document).ready(function() {

            jQuery("#table1").jqGrid({
                url: 'griddata.aspx/DepartmentData?id=1',
                datatype: 'json',
                mtype: 'GET',

                colNames: ['Department', 'Dept Code', 'Contact Person', 'Contact Phone','Contact Email'],
                colModel: [
                        { name: 'Department', index: 'Department', width: 55 },
                        { name: 'Dept Code', index: 'Dept Code', width: 90 },
                        { name: 'Contact Person', index: 'Contact Person', width: 40, align: 'center' },
                        { name: 'Contact Phone', index: 'Contact Phone', width: 40, align: 'center' },
                        { name: 'Contact Email', index: 'Conatct Email', width: 40, align: 'center' }],


                pager: '#pager1',
                rowNum: 15,
                rowList: [10, 20, 30],
                sortname: 'Department',
                sortorder: "desc",
                loadonce: true,
                loadtext: "Loading....",
                shrinkToFit: true,
                multiselect: true,
                emptyrecords: "No records to view",
                width: x - 40,
                height: 230,
                rownumbers: true,
                caption: 'DepartmentTable'


            });
            jQuery("#table1").jqGrid('navGrid', '#pager1', { edit: true, add: true, del: true });


        });

 </script>

Answer 1

(Might be time to start moving this conversation from comments to an answer...)

I'm not 100% familiar with this particular functionality in jqGrid (as I said in a comment, its own documentation has a hard time keeping up with its development), but essentially there should be one of two things that the "delete" functionality is looking for:

• A URL to send a pre-determined delete request. Likely a GET request with some parameters on the query string, though that's not certain. This URL may be highly configurable. You'll need to find where/how to configure it (unless you can point me to the documentation/tutorial you're using and perhaps I can help from there).
• A client-side event handler for the deletes. This would likely be something to which you'd attach an inline function in your JavaScript code. This function, for your needs, will probably just be an AJAX call (via jQuery, naturally) to a server-side resource of your design/choosing which would handle the deletes.

From my past experience with jqGrid, and from your comments so far, it sounds like the first option is what it's looking for. Somewhere in its initialization jqGrid needs you to set a URL to which it will send deletes. This URL will be of your own design for your server-side code.

That means you also need to create a server-side handler to make this happen. If you're using ASP .NET MVC, this is very easy. A controller action will do the job just fine and can even return JSON very easily if anything needs to be sent back to the client-side. If you're using WebForms, you have two primary options:

• Create a new page which has no UI (delete everything but the Page directive from the .aspx file). It would check the incoming parameters, perform the action you need on the server-side (delete the record from the database, most likely), then manually craft a response. You'll want to look into manipulating response headers for this, because it will probably expect the content type to be application-json or something of that nature.
• Create an HttpHandler which doesn't have the overhead of an .aspx page (and is a lot more like a controller action in that respect). It would do the same thing, performing the server-side action and all that, and manually crafting a response. (I'm assuming a particular response is expected, such as an indication of success or failure which may be in the form of an actual server error such as a 500.)

Your jqGrid initializer would set some property which configures the URL it uses to send delete requests to the server. This would have to include the ID of the row being deleted, of course. Essentially, you have a lot of manual control over what's going on. It's not really plug-and-play, you have to write and understand the code.

Edit: If you're doing the client-side delete on the server-side then you don't need a lot of jqGrid involvement here. You'd just have an ASP .NET button which posts back to the server, deletes the record, and re-binds the page data (to include the jqGrid data) to the new data set from the server. Keep in mind that this post-back model is not really what jqGrid is meant to use.

You can add a button on the client-side for jqGrid deletes, as demonstrated here (click on "Live Data Manipulation" on the left and then on "Delete Row" to see the example). Then you'd simply write a JavaScript function for that button's click event to handle the delete. Their example does the client-side delete:

$("#dedata").click(function(){
  var gr = jQuery("#delgrid").jqGrid('getGridParam','selrow');
  if( gr != null )
    jQuery("#delgrid").jqGrid('delGridRow',gr,{reloadAfterSubmit:false});
  else
    alert("Please Select Row to delete!");
});

Of course, you'll need to add to that (as I said in a comment, before the client-side delete in case there's an error on the server) an AJAX call to handle the server-side delete as I'd talked about above. The most straight-forward way would be to use the jQuery .ajax method. This would call your server-side resource (controller action, HttpHandler, or .aspx page) that would handle the server-side delete and return success or failure.

Keep in mind the server-side delete from the database is an entirely separate topic than what you're doing here. It's also very well covered in ADO .NET and LINQ and Entity Framework articles and tutorials all over the internet. Essentially, all you're looking to do there (based on your comments so far) is call a SQL stored procedure from .NET code. Google will yield many results on this.