How can I implement a custom jqGrid delete button?

10,587

You can use delGridRow method fore example. To do this you can just replace in your code jQuery('#list').deleteRow( to jQuery('#list').jqGrid('delGridRow',

You can consider to use formatter:'actions': see here, here and here. One more way to implement custom buttons you will find here.

UPDATED: To send additional information during Delete operation you can use delData parameter of delGridRow method:

be = "... onclick=\"jQuery('#list').deleteRow('" + cl +
  ",{delData:{Navn:'"+ jQuery("#list").jqGrid('getCell',cl,'Navn')+ "'});\"  />";

The expression jQuery("#list").jqGrid('getCell',cl,'Navn') will get the value from the 'Navn' column and {delData:{Navn:'NavnValue'} will add Navn=NavnValue parameter to the data send to the server.

UPDATED 2: Your main problem was that you used in the demo project another version of the code as you posted in your question. Your demo has

... onclick=\"jQuery('#list').jqGrid('delGridRow','" + rows + "',

instead of

... onclick=\"jQuery('#list').jqGrid('delGridRow','" + cl + "',

which is the first important error. The rows variable you set as var rows = jQuery("#list").jqGrid('getGridParam','selrow'); inside of gridComplete. At the time no row is selected, rows = null and you place onclick=\"jQuery('#list').jqGrid('delGridRow','null' in for all your buttons.

The next important problem: you should rename

public ActionResult deleteRow(String ProductId)

to

public ActionResult deleteRow(String id)

or use prmNames: {id: 'ProductId'} as additional jqGrid parameter.

Other common problems:

  • You should modify _Layout.cshtml file. You should remove <script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script> because you include another version of the jQuery (jquery-1.5.2.min.js) in the Index.cshtml
  • You should close <table id="list"> (add ) in the Index.cshtml.
  • If you want to have pager in the grid (you used jQuery("#list").jqGrid('navGrid', "#page", ...) you should 1) add <div id="page"></div> in the Index.cshtml and add parameter pager: '#page' to the jqGrid.
  • You have to clean the HTML markup which you use. For example you should remove </div> from the end of Index.cshtml. One more </div> at the end of @RenderSection("Main", required: false)</div> (in the _Layout.cshtml file) should be also removed.
  • To see the pager in the correct width you should include in the _Layout.cshtml file the following fix

    <style type="text/css">input.ui-pg-input { width: auto; }</style>

  • You should include at least jQuery UI CSS and ui.jqgrid.css for example in the _Layout.cshtml file:

I would recommend you to replace jquery-1.5.2.min.js to jquery-1.6.2.min.js. The last version of vsdoc files you can always load from here. In the same way the last version (currently 1.8.16) of jQuery UI is also recommended.

I would recommend you to download the VS2010 demo project which I created for the answer and use it as the template for your project. You can easy change the code to use Razor.

Share:
10,587

Related videos on Youtube

Timsen
Author by

Timsen

Updated on June 04, 2022

Comments

  • Timsen
    Timsen over 1 year

    I have added a delete button for each row into my jqGrid. Now I need to add functionality to those buttons. Each button has to delete the row which it is in and remove data from the server. How can I do this? Here is my code so far:

    var lastsel;
    
    jQuery(document).ready(function () {
        jQuery("#list").jqGrid({
            url: '@Url.Action("Category1List")',
            datatype: 'json',
            mtype: 'GET',
            colNames: ['Navn', 'Slet'],
            colModel: [
                { name: 'Navn', index: 'Navn', width: 50,edittype: 'text', align: 'center', editable: true , key: true },
                { name: 'act', index: 'act', width: 75, sortable: false}],
            gridComplete: function () {
                var ids = jQuery("#list").jqGrid('getDataIDs');
                for (var i = 0; i < ids.length; i++) {
                    var cl = ids[i];
                    be = "<input style='height:22px;width:90px;' type='button' value='Slet' onclick=\"jQuery('#list').deleteRow('" + cl + "');\"  />";
                    jQuery("#list").jqGrid('setRowData', ids[i], { act: be });
                }
            },
    
            onSelectRow: function (id) {
                if (id && id !== lastsel) {
                    jQuery('#list').jqGrid('restoreRow', lastsel);
                    jQuery('#list').jqGrid('editRow', id, true);
                    lastsel = id;
                }
            },
            editurl: '@Url.Action("GridSave")',
            rowNum: 50000,
            rowList: [5, 10, 20, 50],
            pager: '#page',
            sortname: 'Id',
            sortorder: "desc",
            viewrecords: true,
            height: "500px"
        });
    }); 
    

Related