Simple jQuery SlickGrid JSON example or documentat

Question

I'm looking for a simple example on how to use SlickGrid when trying to retrieve the data as JSon via jQuery.Ajax. I was also unable to find any documentation of the SlickGrid plugin and was wondering if I was just looking in the wrong places. Any help to get me started with SlickGrid would be most appreciated.

Answer 1

Take a look at this example.

If SlickGrid lacks of examples, take a look at jqgrid.

Answer 2

An example within an asp.net page. The webservice myData returns a json string that needs to match the grid columns.

$(function () {

        $.ajax({
            url: "WS.asmx/myData",
            global: false,
            type: "POST",
            data: "{}",
            contentType: "application/json",
            dataType: "json",
            async: false,
            success: function (json) {
                data = eval('(' + json.d + ')');
                if (!data) { alert('no data'); };
            },
            error: function (msg) {
                var errorText = eval('(' + msg.responseText + ')');
                alert('Error : \n--------\n' + errorText.Message);
            }
        }

        );

 if (data) {
    dataView = new GridNic.Data.DataView();
    grid = new GridNic.Grid($("#myGrid"), dataView.rows, columns, options);
    var pager = new GridNic.Controls.Pager(dataView, grid, $("#pager"), columns);
    var columnpicker = new GridNic.Controls.ColumnPicker(columns, grid, options);

... and so on

---

In Asp.Net, the size of the json string is restricted by default. In case of trouble you have to declare a larger size in the web.config e.g. :

<system.web.extensions>
  <scripting>
    <webServices>
        <jsonSerialization maxJsonLength="5000000">
        </jsonSerialization>
    </webServices>
  </scripting>
</system.web.extensions>

Answer 3

The solution is simple, but they do not explicitly state how to do this on their wiki page.

SlickGrid expects JSON to be in object form. So if for any reason it is in string form just use:

JSON.parse(jsonString);

If you're loading from ajax, just simply do this:

$.getJSON("file.json", function(data) {
    grid = new Slick.Grid("#myGrid", data, columns, options);
}

Answer 4

The AJAX example in the SlickGrid repository is quite complex, because it's trying to get tricky with caching, etc. For example, it keeps track of all the rows already sent and will only request new rows from the server. It's also hard coded for the specific example of Digg stories. Documentation is sorely lacking and it seems buggy with the versions 1.5+ of jQuery (which changed how ajax was handled).

I had much easier time getting started by using Andrew Childs fork of SlickGrid, which contains very simple and straightforward instructions on how to use AJAX at the bottom of the README:

The repository is at https://github.com/andrewchilds/SlickGrid