Jqgrid Custom Button

Question

i need to have a send button in my jqgrid. So it means that i have to call An action from my controller when im pressing on the button. Ive got the code for my delete button. but i cant figure out how to send additional data with my action :

gridComplete: function () {
                  var gr = jQuery('#list'); gr.setGridHeight("auto", true);
                  var ids = jQuery("#list").jqGrid('getDataIDs');
                  for (var i = 0; i < ids.length; i++) {
                      var cl = ids[i];
                      be = "<a href='#' style='height:25px;width:120px;' type='button' value='Slet' onclick=\"jQuery('#list').jqGrid('" + cl + "', @Url.Action("Action")); return false;\">Send</>";
                      jQuery("#list").jqGrid('setRowData', ids[i], { act: be });
                  }
              },

First of all you should define *which information* you want to send to the action "Action". How the action "Action" is defined. Probably it wait that you use HTTP POST to send some data from the current grid row, but which data? Moreover the tag [](http://www.w3schools.com/tags/tag_a.asp) could have no `value` or `type` attributes. I wrote you about this before. Probably you want to use `` inside of the [ — Oleg, Sep 03 '11 at 15:59
I have a hidden id column in jqgrid, i want to send id from the same row as where button was clicked. without tag hyperlink disapears. — Timsen, Sep 03 '11 at 19:34
Sorry for so many dumb questions, but i just dont get the syntax of jqgrid. — Timsen, Sep 03 '11 at 19:44
1) If you don't write 'var ' before `be = ...` the `be` variable will be **global**, work slowly and you can have name conflicts with other global variables. 2) The syntax of `setRowData` is very easy. If you set the object `{ act: be }` then as the contain of the "act" column will be set the value of the `be` variable which could be HTML fragment. The button could be `` or ``. The anchor could be `Send`. You use `Send>` — Oleg, Sep 03 '11 at 20:06
okay, i fixed the code now its look like this: var be = "Send>"; in your code you used DelGridRow parameter, but i dont need to delete row, i need to make an action happend, which also send id to controller — Timsen, Sep 04 '11 at 07:03
Now ive tryed to make a function which pick the id and when you click on a link, function should fire, but nothing happends, but if i add 'delGridRow' and press ok in delete window event gets fired... strange — Timsen, Sep 05 '11 at 17:14
You should post full code which can be used to reproduce your problem. I think that defining of *global* function and the usage it in `onclick` with any parameters which you need should solve your problem. — Oleg, Sep 05 '11 at 17:18
i solved this one, by using ajax request just like in checkbox solution. how would you solve it? Ive updated code (Just to know for next time) — Timsen, Sep 05 '11 at 18:08
Yes! You should only 1) remove `async: false` which is not needed. 2) remove `cache: false` because you use `"POST"` which is not cached. 3) replace `mtype: "POST"` to `type: "POST"` 4) replace '=\Send(' to '=\"Send(' 5) You send currently only `rowId` to the server and no data. You don't posted the whole grid, so I don't know whether you made local grid editing and the *modified* data should be send additionally. By the way if you answered on my first question from my first comment "*which information* you want to send to the action "Action"" I could write you the code immediately. — Oleg, Sep 05 '11 at 18:17
whats the difference betwean mtype and type? Im kind of glad for i figured it out myself, jscript isnt my strong side :D but again thank you for your help. thumbs up — Timsen, Sep 05 '11 at 18:24
If you look at the documentation of [$.ajax](http://api.jquery.com/jQuery.ajax/) you will find parameter `type` which default value is `"GET"`. If you write `mtype: "POST"` if **will be ignored** like `blabla: "HaHa"`. So the HTTP GET request will be send where `cache: false` can have sense, but "POST" could be not allowed in the Action. What you really want was `type: "POST"`. By the way I recommend you to include in your question better too much code as to few. Many things could be more clear and all will save there time. — Oleg, Sep 05 '11 at 19:59

score 1 · Accepted Answer · edited Mar 20 '17 at 09:43

(Answered in a question edit and comments. Converted to a community wiki answer. See What is the appropriate action when the answer to a question is added to the question itself? )

The OP wrote:

Solved this one by using ajax request

var Send = function (rowId) {
    $.ajax({
        mtype: "POST",
        url: '@Url.Action("Action")',
        data: { actionparameter: rowId },
        async: false,
        cache: false
    });
  };

         gridComplete: function () {
            var gr = jQuery('#list'); gr.setGridHeight("auto", true);
            var ids = jQuery("#list").jqGrid('getDataIDs');
            for (var i = 0; i < ids.length; i++) {
                var cl = ids[i];
                var be = "<a href='#' value='Slet' onclick=\Send(" +cl + "); return false;\">Send</>";
                jQuery("#list").jqGrid('setRowData', ids[i], { act: be });
            }
        },

@Oleg wrote:

You should only

remove async: false which is not needed.

remove cache: false because you use "POST" which is not cached.

replace mtype: "POST" to type: "POST"

replace '=\Send(' to '=\"Send('

You send currently only rowId to the server and no data.

You did't post the whole grid, so I don't know whether you made local grid editing and the modified data should be send additionally. If you look at the documentation of $.ajax you will find parameter type which default value is "GET". If you write mtype: "POST" it will be ignored like blabla: "HaHa". So the HTTP GET request will be sent where cache: false can have sense, but "POST" could be not allowed in the Action. What you really want was type: "POST". By the way I recommend you to include in your question better too much code as to few. Many things could be more clear and all will save there time

Jqgrid Custom Button

1 Answers1