How can I implement a custom jqGrid delete button?
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 theIndex.cshtml
- You should close
<table id="list">
(add ) in theIndex.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 theIndex.cshtml
and add parameterpager: '#page'
to the jqGrid. - You have to clean the HTML markup which you use. For example you should remove
</div>
from the end ofIndex.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.
Related videos on Youtube
Timsen
Updated on June 04, 2022Comments
-
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" }); });