onclick event not fired on the button which is added to each subgrid cell of jqGrid

Question

I have added a button to each row of the subgrid of a jqGrid. I just followed the documentation of inline_editing for this.

I want to call the server side code on click of the button. But when I see the firebug it shows no request been made (not showing any url request) on click of the button.

Below is my code,

subGridRowExpanded: function (subgrid_id, row_id) {
 var subgrid_table_id, pager_id;
 subgrid_table_id = subgrid_id + "_t";
 pager_id = "p_" + subgrid_table_id;
 $("#" + subgrid_id)
     .html("<table id='" + subgrid_table_id + "' class='scroll'></table><div id='" + pager_id + "' class='scroll'></div>");
 $mysubgrid = jQuery("#" + subgrid_table_id);
 $mysubgrid.jqGrid({
     url: "serversub.php",
     datatype: "json",
     colNames: ['Product Id', 'Product Name', 'status', ''],
     width: 700,
     colModel: [{
         name: 'productid',
         index: 'productid',
         width: 55
     }, {
         name: 'productname',
         index: 'productname',
         width: 90
     }, {
         name: 'status',
         index: 'status',
         width: 80,
         search: false
     }, {
         name: 'link',
         index: 'link',
         width: 80,
         search: false
     }],
     rowNum: 20,
     sortname: 'num',
     sortorder: "asc",
     gridComplete: function () {
         var ids = $mysubgrid.jqGrid('getDataIDs');
         for (var i = 0; i < ids.length; i++) {
             var cl = ids[i];

           se = "<input style='height:22px;width:20px;'
  type='button' value='Update' onclick=\"$mysubgrid.saveRow('" + cl + "');\" />";
             $mysubgrid.jqGrid('setRowData', ids[i], {
                 link: se
             });
         }
     },
     editurl: "saveserversub.php"
 });

Am I missing something here?

Thanks

score 0 · Answer 1 · answered Oct 12 '12 at 11:09

0

The function which you call in onclick have contains only global variables. You can't use local $mysubgrid variable.

I would recommend you to create buttons which you need inside of custom formatter and to use (like in all other your grids) the option gridview: true. It will improve performance of the grid.

Additionally I think that you don't need to set any onclick on the buttons which you insert in the grid column. If the click event is fire and there are no event handler for the click the bubbling take place. So you can just use onCellSelect callback. If you need have the original DOM object of the clicked button you find it in e.target.

answered Oct 12 '12 at 11:09

Oleg

220,925
34
403
798

Thanks for the reply. Yes I added the button using the custom formatter. You are correct that no need to write the click as the event bubbling takes place but I don't want the code in the callback function happen all the time.It should only happen on button click event. Of course I have written the callback onCellSelect but the event bubbling is not happening anyways ( I am not sure why?). Then how to get the rowid in the button click event? – poddroid Oct 12 '12 at 13:56
@poddroid: Of you want to bind `click` events for all buttons of the grid body you can use just `$(this).find("input").click(yourEventHandler);` inside of `loadComplete` or `gridComplete`. If you have many other buttons in the grid and nee to bind only specific buttons see [here](http://stackoverflow.com/a/9153396/315935) and [here](http://stackoverflow.com/a/9085974/315935) how to find the pecific buttons. I recommend you additionally to read [the answer](http://stackoverflow.com/a/5305904/315935) about usage of `onCellSelect`. – Oleg Oct 12 '12 at 14:27

onclick event not fired on the button which is added to each subgrid cell of jqGrid

1 Answers1