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 (356 forks)batch import
help wanted

Repository metrics

Stars
 (1,520 stars)
PR merge metrics
 (No merged PRs in 30d)

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