Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>Here is a simple example...</p> <p>You will need <a href="https://github.com/douglascrockford/JSON-js/blob/master/json2.js" rel="noreferrer">https://github.com/douglascrockford/JSON-js/blob/master/json2.js</a> for this to work...</p> <p>and of course the usual jquery files.</p> <p>Paste this to a webservice</p> <pre><code>// The lower case properties here are required to be lower case // I cant find a way to rename them when they are serialized to JSON // XmlElement("yournamehere") does not work for JSON :( public class JQGrid { public class Row { public int id { get; set; } public List&lt;string&gt; cell { get; set; } public Row() { cell = new List&lt;string&gt;(); } } public int page { get; set; } public int total { get; set; } public int records { get; set; } public List&lt;Row&gt; rows { get; set; } public JQGrid() { rows = new List&lt;Row&gt;(); } } [WebService(Namespace = "http://tempuri.org/")] [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)] [ScriptService] public class MyWebService : System.Web.Services.WebService { [WebMethod(EnableSession = true)] [ScriptMethod(ResponseFormat = ResponseFormat.Json)] public JQGrid GetJQGrid(int page, int pageSize, string sortIndex, string sortDirection) { DataSet ds = SqlHelper.ExecuteDataset(SqlHelper.CONN_STRING, "udsp_GetMyData",pageIndex, pageSize); if (ds == null || ds.Tables.Count &lt; 1) throw new Exception("Unable to retrieve data."); JQGrid jqGrid = new JQGrid(); int i = 1; foreach (DataRow dataRow in ds.Tables[0].Rows) { JQGrid.Row row = new JQGrid.Row(); row.id = Convert.ToInt32(dataRow["MyIdColumn"]); row.cell.Add(dataRow["MyIdColumn"].ToString()); row.cell.Add(dataRow["MyColumn"].ToString()); projectGrid.rows.Add(row); } jqGrid.page = 1; // Set this when you are actually doing paging... this is just a sample jqGrid.records = jqGrid.rows.Count; jqGrid.total = jqGrid.rows.Count; // Set this to total pages in your result... return jqGrid; } } </code></pre> <p>Paste this to your aspx page</p> <pre><code>&lt;script type="text/javascript"&gt; function getData(pdata) { var params = new Object(); params.page = pdata.page; params.pageSize = pdata.rows; params.sortIndex = pdata.sidx; params.sortDirection = pdata.sord; $.ajax({ type: "POST", contentType: "application/json; charset=utf-8", url: "/CLM/CLM.asmx/GetProjectGrid2", data: JSON.stringify(params), dataType: "json", success: function(data, textStatus) { if (textStatus == "success") { var thegrid = $("#testGrid")[0]; thegrid.addJSONData(data.d); } }, error: function(data, textStatus) { alert('An error has occured retrieving data!'); } }); } var gridimgpath = '/clm/css/ui-lightness/images'; $(document).ready(function() { $("#testGrid").jqGrid({ datatype: function(pdata) { getData(pdata); }, colNames: ['My Id Column', 'My Column'], colModel: [ { name: 'MyIdColumn', index: 'MyIdColumn', width: 150 }, { name: 'My Column', index: 'MyColumn', width: 250 } ], rowNum: 10, rowList: [10, 20, 30], imgpath: gridimgpath, pager: jQuery('#pagerdt'), sortname: 'id', viewrecords: false, sortorder: "desc", caption: "Projects", cellEdit: false }); }); &lt;/script&gt; </code></pre>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    3. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

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