Data not populating the table created using jsgrid

Question

I'm using jsgrid to create an editable table. i used the code from this demo. The only difference is im using mvc instead of web api.

Looking at the network, the controller returns the needed json data and jsgrid also shows the pagination stuff on the bottom of the table. However, the table is not being populated

Here's the html and javascript code

<div id="jsGrid"></div>

@section scripts {
<script src="http://js-grid.com/js/jsgrid.min.js"></script>
<script>
    $("#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: "get",
                    data: filter,
                    dataType: "json"
                });
            },

            insertItem: function (item) {

            },

            updateItem: function (item) {

            },

            deleteItem: function (item) {

            }
        },

        fields: [
            { name: "SKU", type: "text", width: 50 },
            { name: "PartNumber", type: "text", width: 100 },
            { name: "ProductLineName", type: "text", width: 50 },
            { name: "ProductLineId", type: "text", width: 50 },
            { name: "Deleted", type: "checkbox", sorting: false },
            { type: "control" }
        ]
    });
</script>

Here's the relevant method in the controller

 public async Task<ActionResult> Get()
        {
            var query = db.Products
                .Select(p => new ProductDto()
                {
                    PartNumber = p.PartNumber,
                    SKU = p.SKU,
                    ProductLineName = p.ProductLines.ProductLineName,
                    ProductLineId = p.ProductLineId,
                    Deleted = p.Deleted
                });

            var products = await query.ToListAsync();

            return Json(products, JsonRequestBehavior.AllowGet);
        }

Anyone know what i can do to display/bind the returned data to the table?

Answer 1

Change your loadData call because its not specifying what to do when ajax call is done.

Try to rewrite it like below :

controller: {
        loadData: function() {
        var d = $.Deferred();
        $.ajax({
            url: "get",
            dataType: "json",
            data: filter
        }).done(function(response) {
            d.resolve(response.value);
        });

        return d.promise();
    }
},

Answer 2

This is the client side javascript that I used which finally put some data in the grid: (just the controller part)

                    controller: {
                        loadData: function (filter) {
                            console.log("1. loadData");

                            return $.ajax({
                                type: "GET",
                                url: "/Timesheet/GetTimesheet/",
                                dataType: "json",
                                data: filter

                            console.log("3. loadData complete");
                        }

None of the posted explicit promise code functioned at all. Apparently $.ajax returns a promise.

and this was my MVC controller code that I called with ajax (C#):

    public async Task<ActionResult> GetTimesheet()
    {
        int id = Convert.ToInt32(Session["UID"]);

        var tl = (
            from ts in db.Tasks
            orderby ts.Task_Date descending
            where ts.Emp_ID == id
            select new
            {
                ID = ts.Task_ID,
                Date = ts.Task_Date,
                Client = ts.Customer_ID,
                Hours = ts.Total_Hours
            }
        ).Take(4);

        var jsonData = await tl.ToListAsync();

        return Json(jsonData, JsonRequestBehavior.AllowGet);
    }

There are no actual examples of required Json for jsGrid. anywhere but this worked for me - note no headers or anything.