Simple jQuery SlickGrid JSON example or documentation

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.

score 13 · Answer 1 · answered Apr 18 '11 at 23:11

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

score 6 · Accepted Answer · edited Dec 17 '13 at 12:19

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>

gor · Answer 3 · 2011-02-13T15:02:09.083

2

Take a look at this example.

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

edited Feb 13 '11 at 15:02

answered Feb 13 '11 at 12:43

gor

11,498
5
36
42

Unfortunately this example is already quite complex and hard to understand for a beginner. How would I for example implement the success callback in the $.Ajax call? Isthere any documentation available? Thank you! – doberkofler Feb 13 '11 at 14:54
Is there any kind of documentation out there for SlickGrid? – doberkofler Feb 15 '11 at 15:15
Documentation is a bit lacking at the moment, but there is a broad set of examples that demonstrate the most effective ways of using SlickGrid. There is a support group hosted by Google Groups. – gor Feb 15 '11 at 15:23

score 0 · Answer 4 · answered Apr 13 '15 at 15:39

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);
}

Simple jQuery SlickGrid JSON example or documentation

4 Answers4

Linked