Databases
StackOverflow2013
Postsdbo
POSlickGrid Ajax call empty rows
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POSlickGrid Ajax call empty rows
    text
    copied!<p>I have a SlickGrid with AJAX call. I tracked it under Chrome and found out the data is correct but somehow grid shows all empty rows. Any idea why?</p> <h2>Web service</h2> <pre><code> [System.Web.Services.WebMethod] [ScriptMethod(ResponseFormat = ResponseFormat.Json)] public static string LoadUsers() { List&lt;Person&gt; users = new List&lt;Person&gt;(); using (SqlConnection conn = UtWeb.ConnectionGet()) { conn.Open(); SqlCommand command = new SqlCommand("UserGet", conn); using (SqlDataReader r = command.ExecuteReader()) { while (r.Read()) { Person person = new Person(); person.LoginName = r["LoginName"].ToString(); person.FirstName = r["FirstName"].ToString(); person.LastName = r["LastName"].ToString(); users.Add(person); } } } MemoryStream stream = new MemoryStream(); DataContractJsonSerializer serializer = new DataContractJsonSerializer(typeof(Person[])); serializer.WriteObject(stream, users.ToArray()); stream.Position = 0; StreamReader streamReader = new StreamReader(stream); return streamReader.ReadToEnd(); } </code></pre> <h2>Code</h2> <pre><code>&lt;script src="../Scripts/jquery-1.7.2.min.js"&gt;&lt;/script&gt; &lt;script src="../Scripts/jquery.event.drag.min.js"&gt;&lt;/script&gt; &lt;script src="../Scripts/SlickGrid/slick.core.js"&gt;&lt;/script&gt; &lt;script src="../Scripts/SlickGrid/slick.grid.js"&gt;&lt;/script&gt; &lt;script&gt; var grid; var loader; var columns = [ { id: "login-name", name: "Login Name", field: "LoginName" }, { id: "firstname", name: "First Name", field: "FirstName" }, { id: "lastname", name: "Last Name", field: "LastName" } ]; var options = { editable: false, enableAddRow: false, enableCellNavigation: true, enableColumnReorder: false }; $(document).ready(function () { $.ajax({ url: 'TestSlickGrid.aspx/LoadUsers', async: false, data: "{}", dataType: "json", type: "POST", contentType: "application/json; charset=utf-8", success: OnSuccess, failure: function (response) { alert("ajax fail!"); } }); function OnSuccess(response) { if (parseInt(response) == 0) alert(response.d); else { loader = response; grid = new Slick.Grid("#myGrid", loader.d, columns, options); } } }); &lt;/script&gt; </code></pre> <p>In Chrome, it shows that loader.d = "[{"FirstName":"b","LastName":"bb","LoginName":"b"},{"FirstName":"","LastName":"","LoginName":"test1"},{"FirstName":"","LastName":"","LoginName":"test2"}]"</p> <pre><code> loader = '{"employees":' + response.d + '}'; var obj = eval("(" + loader + ")"); grid = new Slick.Grid("#myGrid", obj.employees, columns, options); </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