2

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"
    });
});
Michael Petrotta
  • 59,888
  • 27
  • 145
  • 179
Timsen
  • 4,066
  • 10
  • 59
  • 117

2 Answers2

2

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.

Community
  • 1
  • 1
Oleg
  • 220,925
  • 34
  • 403
  • 798
  • Okay now ive got it to respond and delete rows, but now i have to get it to delete a raw inside of my server, so i need to send "Navn" with my delete oeration – Timsen Aug 22 '11 at 08:06
  • Problem which i have is that i cant sendt the data futher to my controller. – Timsen Aug 22 '11 at 09:49
  • @Timsen: You should describe your problem more exactly. Do you realy not send the data or the controller not read the data? Till now you don't include any server side code in your question. You can examine the HTTP traffic with respect of [Fiddler](http://www.fiddler2.com/fiddler2/) or [Firebug](http://getfirebug.com/). – Oleg Aug 22 '11 at 10:04
  • okay, sorry The thing i want is to send SellerId value to controller when i press delete in my jqgrid, so i can delete it in my controller. Just like you do when u are making edit – Timsen Aug 22 '11 at 10:15
  • @Timsen: I don't see any `SellerId` in the jqGrid definition. If you fill jqGrid with `SellerId` as the id (rowid), the `id` value will be automatically send to the server. It will be done for Delete operation in the same way like for Edit or Add operations. You can rename the `id` parameter to `SellerId` with respect of `prmNames: {id:"SellerId"}` parameter of jqGrid. Just verify what will be currently send to the server. If you want to have the data in another format you should describe in which one format you need the data. – Oleg Aug 22 '11 at 10:24
  • You can read my new code above, where i have some differences – Timsen Aug 22 '11 at 10:46
  • You can read my new code above, where i have some differences, right now whet i am clicking on delete button in a row, im sending reference to delGridRow inside of my controller class. Controller class have String SellerKey as a incoming paramter but when im running the grid my sellerkey parameter inside of controller is null where delGridRow is called – Timsen Aug 22 '11 at 10:56
  • @Timsen: OK, now I have found the code. Please **append** always the code to your question instead of writing the answer on your own question. To solve your problem you should just either rename `SellerKey` parameter from your controller action to `id` or to add `prmNames: {id:"SellerKey"}` parameter to the jqGrid. By the way you don't need to name the controller action as `delGridRow`. The `delGridRow` is jqGrid method which work on your client code. The `url` parameter of `delGridRow` method should be just set to the controller action. – Oleg Aug 22 '11 at 11:15
  • Thanks for fast answers, i tryed to use built in id, but its still wont work, at debuging, i can see that in controller sellerkey value is still null – Timsen Aug 22 '11 at 11:57
  • @Timsen: Do you tried [Fiddler](http://www.fiddler2.com/fiddler2/) or [Firebug](http://getfirebug.com/)? It's important to know *where* you have the problem: on the server side or on the client side. Moreover it is always helpful to open the source code of the generated page in the web browser. If the delete action on the controller will be called correctly you can have some problems in the MVC routing (look at `MapRoute` which you use in the `RegisterRoutes`). – Oleg Aug 22 '11 at 12:31
  • It is a locla SQL server i have running, when i look into the source code, i can that rows property is null, so jqgrid doesnt get the value from a selected row – Timsen Aug 22 '11 at 13:07
  • @Timsen: Only the tracing of HTTP traffic (with Fiddler for example) can gives you enough information whether you have the problem on the server or on the client part. If you upload somewhere your test project I could debug it on my computer and say you where you made an error. – Oleg Aug 22 '11 at 13:59
  • here is a simple demo, layout is not pretty, but all the functionallity are there, ill hope ull finde some kind of solution oleg, im beign fighting with it all my weekend. http://www.2shared.com/file/5cQvo8Fd/MvcApplication3.html – Timsen Aug 23 '11 at 07:12
  • oh almost forgot, u can use northwind database with it – Timsen Aug 23 '11 at 07:16
  • @Timsen: I appended my answer. – Oleg Aug 23 '11 at 11:26
  • One more question, now i want to make buttons to hyperlinks with same functionallity since buttons looks very ugly in grid, is there any way to do it? – Timsen Aug 25 '11 at 07:49
0

try 

$("#classOfYourButton").click(function(e){

e.stopPropagation();
$(this).closest("tr").remove();
});
Rafay
  • 30,950
  • 5
  • 68
  • 101
  • add a class to your delete button and replace that name with `classOfYourButton` on click it will remove the `tr` – Rafay Aug 19 '11 at 11:22