StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>Why not bind the jqGrid to the data object found in the callback function of the autocomplete source. Below I have a text box for somebody to search for users. It makes an ajax call to a WCF wervice called SearchUsers. On the ajax call's success "function(data)...." is called, with "data" being the data returned.</p> <pre><code>//create the userlistautocomplete $("#txtSearchUsers").autocomplete({ source: function (request, response) { SecurityAjax.SearchUsers(request.term, function (data) { $("#usersList").jqGrid('clearGridData'); gridData = data; $("#usersList").setGridParam({ data: gridData }); $("#usersList").trigger("reloadGrid"); }); }, minLength: 2, open: function () { $(this).removeClass("ui-corner-all").addClass("ui-corner-top"); }, close: function () { $(this).removeClass("ui-corner-top").addClass("ui-corner-all"); } }).data("autocomplete")._renderItem = function (ul, item) { return $("<li></li>").data("item.autocomplete", item).append("<a>" + item.FirstName + "<br>" + item.LastName + "</a>").appendTo(ul); }; </code></pre> <p>In the anonymous function "function (data)" I am setting my existing jqGrid's data to the autocomplete data and then refreshing the grid, where my grid is defined as follows:</p> <pre><code> $("#usersList").jqGrid({ data: gridData, width: 800, datatype: "local", colNames: ['User Id', "First Name", "Last name", "User name"], colModel: [ { name: 'SysUserId', index: 'SysUserId', width: 55, hidden: true }, { name: 'FirstName', index: 'FirstName', width: 100, editable: true }, { name: 'LastName', index: 'LastName', width: 90, editable: true }, { name: 'UserName', index: 'UserName', width: 90, editable: true } ], caption: "Using events example", onSelectRow: function (id) { if (id && id !== lastsel) { lastsel = id; } }, ondblClickRow: function (id) { }, localReader: { repeatitems: false, id: "UserId" }, pager: '#pusersList' }); </code></pre>

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