CODEWITHSUNDEEP
javascriptphpjqueryslickgrid
Maciej Płocki
Maciej Płocki

Reputation: 412

jQuery SlickGrid initialize with json data

Problem: how to initialize SlickGrid with json data

my not working code:

<div id="data">

</div>

<script>
$(document).ready(function(){
    $.ajax({    
        type: "GET",
        url: "<?=Route::url('ajax_list')?>",   
        dataType: 'json',   
        success: function(json) {   

            var grid;

            var columns = [
                {id: "id", name: "Id", field: "id"},
                {id: "code", name: "Kod", field: "code"},
                {id: "type", name: "Typ", field: "type"},
                {id: "height", name: "Wys", field: "height"},
                {id: "width", name: "Szer", field: "width"},
                {id: "in_stock", name: "Stan", field: "in_stock"}
            ];

            var options = {
              enableCellNavigation: true,
              enableColumnReorder: false
            };

            grid = new Slick.Grid("#data", json, columns, options);
        }               
    });
});
</script>

json: 

[{"id":"7","code":"C22\/30\/130","type":"0","height":"30","width":"130","in_stock":"34","update_hash":"e8df47c817c8acc9831d4ee27394e955"},{"id":"8","code":"C21\/60\/160","type":"0","height":"60","width":"160","in_stock":"12","update_hash":"e8df47c817c8acc9831d4ee27394e955"},{"id":"9","code":"C21\/90\/120","type":"0","height":"90","width":"120","in_stock":"2","update_hash":"e8df47c817c8acc9831d4ee27394e955"},{"id":"10","code":"C22\/30\/080","type":"0","height":"30","width":"80","in_stock":"1","update_hash":"e8df47c817c8acc9831d4ee27394e955"},{"id":"11","code":"C22\/30\/090","type":"0","height":"30","width":"90","in_stock":"23","update_hash":"e8df47c817c8acc9831d4ee27394e955"},{"id":"12","code":"C22\/30\/100","type":"0","height":"30","width":"100","in_stock":"5","update_hash":"e8df47c817c8acc9831d4ee27394e955"}]

Please help me to find out how to run SlickGrid with json data.

EDIT: I dont have any console errors.

Upvotes: 1

Views: 4303

Answers (1)

Damian
Damian

Reputation: 528

The way I implemented it is to implement a dataprovider and pass that into the constructor. This probably won't work as it stands but hopefully you get the idea. Essentially you have the data provider load an array by way of your json call and then the getItem method needs to return one row of data.

var columns = [
            {id: "delete", name: "Del", field: "del", formatter: Slick.Formatters.Delete, width: 15},
            {id: "edit", name: "Edit", field: "edit", formatter: Slick.Formatters.Edit, width: 15},
            {id: "lastName", name: "Last Name", field: "lastName", syncColumnCellResize: true, formatter: Slick.Formatters.ContactLink, width: 50},
            {id: "firstName", name: "First Name", field: "firstName", rerenderOnResize: true, width: 50}];

var contactDataProvider = function() {
   //this sets up my data provider
    this.init = function() {
        $.ajax({
            url: '/jsonContactResults',
            dataType: 'json',
            async: false,
            cache: false,
            success: function(data) {
                sets[0] = data.items;  // Take the results and put them in array
                searchId = data.searchId;
                length = data.length; // You need this
            }
    });

    this.getLength = function() {
        return length;
    };

    this.getItem = function(index) {
         //Implement this so that it returns one row of data from your array
         //I also have logic that says if I haven't loaded this data yet go grab it and put it in my data array
    }

};
};



var cdo = new contactDataProvider();
cdo.init();

grid = new Slick.Grid("#myGrid", cdo, columns, options);

Upvotes: 3

Related Questions