StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>I do it like this and it loads the data as well as search can be performed easily.</p> <p>this is the function which is called to load the jqgrid</p> <pre><code>function FillGrid(WebMethodString, GridName, PagerName, columnModel, columnNames, header) { // debugger; jQuery(GridName).GridUnload(); jQuery.ajax({ type: "POST", contentType: "application/json; charset=utf-8", url: WebMethodString, data: '{}', //PageMethod Parametros de entrada datatype: "json", success: function(msg) { $('#dvWait').css('display', 'block'); // Do interesting things here. // debugger; var mydata = jQuery.parseJSON(msg.d); //console.log(mydata); jQuery(GridName).jqGrid({ datatype: "local", data: mydata, colNames: columnNames, colModel: columnModel, pager: jQuery(PagerName), rowNum: 25, mtype: "GET", pagination: true, scrollOffset: 0, rowList: [10, 20, 25], sortname: "WorkOrderID", scroll: 1, sortorder: "desc", multiselect: false, viewrecords: true, caption: header, autowidth: true, ignoreCase: true, height: 580, jsonReader: { repeatItem: false, root: function (obj) { return obj.d.rows; }, page: function (obj) { return obj.d.page; }, total: function (obj) { return obj.d.total; }, records: function (obj) { return obj.d.records; } }, afterInsertRow: function(rowid, rowdata, rowelem) { jQuery(GridName).setCell(rowid, 'WorkOrderID', '', '', { title: '', onclick: 'DisappearPopup(event);' }); jQuery(GridName).setCell(rowid, 'Requester', '', '', { title: '', onclick: 'DisappearPopup(event);' }); jQuery(GridName).setCell(rowid, 'AssignedTo', '', '', { title: '', onclick: 'DisappearPopup(event);' }); jQuery(GridName).setCell(rowid, 'SummaryText', '', '', { title: '', onclick: 'DisappearPopup(event);' }); jQuery(GridName).setCell(rowid, 'CreationDate', '', '', { title: '', onclick: 'DisappearPopup(event);' }); }, gridComplete: function() { $('#dvMaintbl').css('visibility', 'visible'); $('#dvWait').css('display', 'none'); } }) jQuery(GridName).jqGrid('navGrid', PagerName, { edit: false, add: false, del: false, searchtext: 'Search', refreshtext: 'Reload' }); } }); } </code></pre> <p>Add this code in .aspx page</p> <pre><code><script type="text/javascript"> // debugger; jQuery(document).ready(function() { FillGrid('Json.asmx/GetAllTroubleTickets', '#grid', '#pager', "put your column model here", "put your column names here", "put header text here"); }); </script> </code></pre> <p>Following is my web service call:</p> <pre><code>Public Function GetAllTroubleTickets() As String Dim strStatus As String = HttpContext.Current.Request.QueryString("status") Dim page As Integer = 1 If HttpContext.Current.Request.Form("page") IsNot Nothing Then page = Integer.Parse(HttpContext.Current.Request.Form("page").ToString()) End If Dim rp As Integer = 1 If HttpContext.Current.Request.Form("rowNum") IsNot Nothing Then rp = Integer.Parse(HttpContext.Current.Request.Form("rowNum").ToString()) End If Dim start As Integer = ((Page - 1) * rp) If (strStatus = Nothing) Then strStatus = "2" End If Dim dsDatos As DataSet = GetAllTroubleTicketsclass("", "WorkOrderID asc", "1", "4000", "", Convert.ToInt16(strStatus)) Dim result As String = Jayrock.Json.Conversion.JsonConvert.ExportToString(dsDatos.Tables(0).Rows) Return result End Function </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