StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>I suppose that your code with <code>$(".deleteRowButton").button({icons: {primary: 'ui-icon-trash'}, text: false});</code> didn't worked because you placed it in the wrong place. If you create the <code><button class='deleteRowButton' ...></code> inside of <code>gridComplete</code> you should make the call <code>$(".deleteRowButton").button(...)</code> also <strong>inside of <code>gridComplete</code></strong> directly after the code which you posted:</p> <pre><code>gridComplete: function () { var $this = $(this), ids = $this.jqGrid('getDataIDs'), l = ids.length, i, deleteButton; for (i = 0; i < l; i++) { deleteButton = "<button type='button' style='height:22px;width:20px;'" + " class='deleteRowButton' title='Delete' onclick=deleteRow(" + ids[i] + ")></button>"; $this.jqGrid('setRowData', ids[i], { DeleteButton: deleteButton }); } $(".deleteRowButton").button({ icons: { primary: 'ui-icon-trash' }, text: false }); } </code></pre> <p>see <a href="http://www.ok-soft-gmbh.com/jqGrid/trashicon.htm" rel="nofollow">the first demo</a>.</p> <p>The small problem exists in the performance of the above approach. Using <code>setRowData</code> you make changes on the page. Every change on the page follow recalculation of positions of <strong>all other elements existing on the page</strong>. So to improve performance it's recommended to reduce the number of changes on the grid. So the better way is the usage of <a href="http://www.trirand.com/jqgridwiki/doku.php?id=wiki%3acustom_formatter" rel="nofollow">custom formattrer</a>. The new version of the code will be practically exactly so easy as the previous one. You just need to define <code>formatter</code> as function:</p> <pre><code>{ name: 'DeleteButton', width: 20, formatter: function (cellvalue, options) { return "<button type='button' class='deleteRowButton' " + "style='height: 22px;width: 20px;' title='Delete'></button>"; }}, </code></pre> <p>and reduce the code of <code>gridComplete</code> or <code>loadComplete</code> to</p> <pre><code>gridComplete: function () { $(".deleteRowButton").button({ icons: { primary: 'ui-icon-trash' }, text: false }).click(function (e) { var $tr = $(e.target).closest("tr.jqgrow"); alert("the row with id=" + $tr.attr("id") + " need be deleted"); }); } </code></pre> <p>In your original code the method <code>deleteRow</code> must be <em>global</em> (it should be defined on the top level). The new code can use just <code>click</code> event handler. See <a href="http://www.ok-soft-gmbh.com/jqGrid/trashicon1.htm" rel="nofollow">the next demo</a>.</p> <p>By the way you don't really need to bind every <code><button></code> to <code>click</code> event handler. As well known if there are no <code>click</code> event handler on the button the <a href="http://en.wikipedia.org/wiki/DOM_events#Event_flow" rel="nofollow">event bubbling</a> will take place. So instead of binding <code>click</code> event handler every time on loading and reloading of the grid one can just define <strong>once</strong> the corresponding event handler on the whole grid body. In other words you can use <code>onCellSelect</code> callback. the usage is very comfortable because the <code>rowid</code> and the index of the column of the clicked cell are already calculated. Moreover per 4-th parameter <code>e</code> of the <code>onCellSelect</code> callback you can access to the event handler where <code>e.tagret</code> is the DOM element of the clicked <code><button></code>. So you can replace the above code of <code>gridComplete</code> to the following code:</p> <pre><code>onCellSelect: function (rowid, iCol, cellcontent, e) { if ($(e.target).closest("button.deleteRowButton").length > 0) { alert("the row with id=" + rowid + " need be deleted"); } }, gridComplete: function () { $(".deleteRowButton").button({ icons: { primary: 'ui-icon-trash' }, text: false }); } </code></pre> <p>In the way you can more improve the performance and reduce a little the memory used for the page. <a href="http://www.ok-soft-gmbh.com/jqGrid/trashicon2.htm" rel="nofollow">The demo</a> shows the last code live. In the most cases you don't need to use constructs like <code>$(e.target).closest("button.deleteRowButton").length > 0</code>. Instead of that you can just verify the column index <code>iCol</code>. If you need you can test the column name instead. You can use</p> <pre><code>$(this).jqGrid("getGridParam", "colModel")[iCol].name </code></pre> <p>to convert the <code>iCol</code> to the corresponding column name.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload