jsGrid won't render JSON data

Question

I'm trying to use jsGrid in my MVC project as the client would like inline editing and filtering. However, I cannot get it to load my JSON source into the table. My js to load the table looks like so:

$("#jsGrid").jsGrid({
            height: "50%",
            width: "100%",

            filtering: true,
            inserting: true,
            editing: true,
            sorting: true,
            paging: true,
            autoload: true,

            pageSize: 10,
            pageButtonCount: 5,

            deleteConfirm: "Do you really want to delete client?",

            controller: {
                loadData: function (filter) {
                    return $.ajax({
                        type: "GET",
                        url: "RICInstrumentCode/GetData",
                        data: filter,
                        dataType: "json"
                    });
                },

                insertItem: function (item) {
                    return $.ajax({
                        type: "CREATE",
                        url: "/api/RICInsrumentCodeTable",
                        data: item,
                        dataType: "json"
                    });
                },

                updateItem: function (item) {
                    return $.ajax({
                        type: "UPDATE",
                        url: "/api/RICInsrumentCodeTable/" + item.ID,
                        data: item,
                        dataType: "json"
                    });
                },

                deleteItem: $.noop

                //deleteItem: function (item) {
                //    return $.ajax({
                //        type: "DELETE",
                //        url: "/api/data/" + item.ID,
                //        dataType: "json"
                //    });
                //}
            },

            fields: [
                { name: "Code", type: "text", title: "RIC Instrument Code", width: 150 },
                { name: "Descr", type: "text", title:"RIC Instrument Code Description", width: 200 },
                { name: "RICInstrumentGroupId", type: "select", title: "RIC Instrument Group", items: countries, valueField: "Id", textField: "Name" },
                { name: "Active", type: "checkbox", title: "Is Active", sorting: true },
                { type: "control" }
            ]
        });

    });

The loadData is what I've been working on.

and the JSON the is returned from get data looks like so:

[{"Id":1,"Code":"test1","Descr":"first code test","RICInstrumentGroupId":2,"Active":true},{"Id":2,"Code":"APP","Descr":"Apples and bananas","RICInstrumentGroupId":4,"Active":true},{"Id":3,"Code":"1","Descr":"1","RICInstrumentGroupId":1,"Active":true},{"Id":4,"Code":"3","Descr":"3","RICInstrumentGroupId":3,"Active":false}]

So far I have confirmed that the ajax is firing, changed my array titles to match those of the call, and ensured the return is in valid JSON, what else can I do? Why isn't this working?

Answer 1

I was being stupid, The bit that sets the table height was set to a 100% in a div that had no height, this was causing the table body to render with a height of 0px, changing the height property to auto fixed it because the data was there all along.

Thanks for the advice though!