tabalinas/jsgrid

jsGrid not able to attach the data to the table

Open

#991 opened on Jan 5, 2018

View on GitHub
 (1 comment) (0 reactions) (0 assignees)JavaScript (1,520 stars) (356 forks)batch import
help wanted

Description

I am using C# for getting the data from server and I am attaching it to jsGrid. Data is returned from Ajax call and Page footer is displayed properly(if I display TotalCounts , it's displayed properly ).But the data in the grid is not shown. I am trying to refer the jsGrid with Asp.Net WebAPI sample project. I am new to this. Any help will be highly appreciated. Thanks :)

<script>
    $(function() {

        var countries = [
            { Name: "", Id: 0 },
            { Name: "United States", Id: 1 },
            { Name: "Canada", Id: 2 },
            { Name: "United Kingdom", Id: 3 },
            { Name: "France", Id: 4 },
            { Name: "Brazil", Id: 5 },
            { Name: "China", Id: 6 },
            { Name: "Russia", Id: 7 }
        ];

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

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

            pageSize: 10,
            pageButtonCount: 5,

            

            controller: {
                loadData: function () {
                    var d = $.Deferred();
                    $.ajax({
                        type: "GET",
                        url: "/Query/Get",
                        //data: filter,
                        dataType: "json",
                        success: function (response) {
                            d.resolve(response);
                            console.log(response);
                        }
                    });
                    return d.promise();
                },

                

            fields: {
                colModel: [
                    { name: "Name", type: "text", width: 150 },
                    { name: "Age", type: "number", width: 50, filtering: false },
                    { name: "Address", type: "text", width: 200 },
                    { name: "Country", type: "select", items: countries, valueField: "Id", textField: "Name" },
                    { name: "Married", type: "checkbox", title: "Is Married", sorting: false },
                    { type: "control" }
                ]
            }
        });

    });
</script>

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

[System.Web.Mvc.HttpGet]
        public JsonResult Get()
        {
            return Json(obj.GetClients(), JsonRequestBehavior.AllowGet);
        }
public List<Client>  GetClients()
        {
            return clients;
        }

public class Client
    {

        public int ID { get; set; }
        public string Name { get; set; }
        public int Age { get; set; }
        public Country? Country { get; set; }
        public string Address { get; set; }
        public bool Married { get; set; }

    }

issue

Contributor guide