JQGrid custom action

Question

I have a great example of inline editing with jQGrid http://ok-soft-gmbh.com/jqGrid/TestSamle/Admin.htm There are two user actions: “Edit” and “Delete”.

I want to add another custom built-in action, let's call it ToggleOnline. In this step, I want to send all the grid cells to the controller. Basically it will be some kind of editing action, but it will set some default values ​​for some columns.

Built-in buttons were added as follows:

{ name: 'act', index: 'act', width: 55, align: 'center', sortable: false, formatter: 'actions', formatoptions: { keys: true, // we want use [Enter] key to save the row and [Esc] to cancel editing. delOptions: myDelOptions } } 

than adding a custom extra button, I used the loadComplete: event loadComplete:

 loadComplete: function(){ debugger; var ids = jQuery("#Grid1").getDataIDs(); for(var i=0;i<ids.length;i++){ var cl = ids[i]; custom = "<input style='height:22px;width:20px;' type='button' value='E' onclick=jQuery('#Grid1').editRow(" + cl + "); />"; jQuery("#Grid1").setRowData(ids[i], { act: custom }) } } 

but the custom button does not appear at all. And also I need to somehow send the string data, and I also need to specify the name of the user action (oper) for processing this action on the server.

Answer 1

I updated the demo for you. Now http://ok-soft-gmbh.com/jqGrid/TestSamle/Admin1.htm does what you need. (I removed the second grid from the code to keep the code smaller):

Some comments on the implementation. Formatting actions adds action elements inside a div. Each “action button” has HTML markup, as shown below.

 <div style="margin-left: 5px; float: left;" class="ui-pg-div ui-inline-del" onmouseover="jQuery(this).addClass('ui-state-hover');" title="Delete selected row" onmouseout="jQuery(this).removeClass('ui-state-hover');" onclick="$.fn.fmatter.rowactions('10','List1','del',0);"> <span class="ui-icon ui-icon-trash"></span> </div> 

So that the appearance of the custom button is close to the original "action buttons", I do loadComplete inside as follows:

 loadComplete: function () { var grid = $(this), iCol = getColumnIndexByName(grid,'act'); // 'act' - name of the actions column grid.children("tbody") .children("tr.jqgrow") .children("td:nth-child("+(iCol+1)+")") .each(function() { $("<div>", { title: "Custom", mouseover: function() { $(this).addClass('ui-state-hover'); }, mouseout: function() { $(this).removeClass('ui-state-hover'); }, click: function(e) { alert("'Custom' button is clicked in the rowis="+ $(e.target).closest("tr.jqgrow").attr("id") +" !"); } } ).css({"margin-left": "5px", float:"left"}) .addClass("ui-pg-div ui-inline-custom") .append('<span class="ui-icon ui-icon-document"></span>') .appendTo($(this).children("div")); }); } 

Where

 var getColumnIndexByName = function(grid,columnName) { var cm = grid.jqGrid('getGridParam','colModel'), i=0,l=cm.length; for (; i<l; i+=1) { if (cm[i].name===columnName) { return i; // return the index } } return -1; }; 

You can change the custom button icon from "ui-icon-document" and change the click event descriptor code for what you need. I showed how you can get rowid. Using it, you can use the getRowData method to get other cells in the row.

UPDATED: The current version of the free jqGrid supports an easy way to implement custom buttons. Watch the demo .