Loading jsGrid by calling Controller/WebService in MVC
<p>Am really struggling to load the jsGrid using Controller service. Am not able to do it correctly.</p>

<p>I even tried the sample code from the jsGrid site demo but that too didn't work either it throws error at !this.data.length or grid doesn't load at all.</p>

<p>I get no data every time I try using below code.</p>

<p>Appreciate if anyone can help.</p>

<p>This is how am loading the jsGrid:</p>

<pre><code>$(element).jsGrid({
   height: 300,
   width: "100%",
    filtering: true,
    sorting: true,
    paging: true,
    autoload: true,
    pageLoading: true,

    controller: {
        loadData: function (filter) {
            $.ajax({
                type: "GET",
                url: "../Common/GetData",
                data: filter,
                dataType: "JSON"
            });
        }
    },
    pageSize: 10,
    pageButtonCount: 5,
    pageIndex: 1,

    noDataContent: "No Record Found",
    loadIndication: true,
    loadIndicationDelay: 500,
    loadMessage: "Please, wait...",
    loadShading: true,

    fields: [
        { name: "Name", type: "textarea", width: 150 },
        { name: "Age", type: "number", width: 50 },
        { name: "Address", type: "text", width: 200 },
        { name: "Country", type: "select" },
         {
             name: "", type: "text", width: 50, sorting: false, filtering: false,
             itemTemplate: function (value) {
                 return '&lt;div class="edit-container"&gt;&lt;a class="edit-custom-field-link"&gt;Edit&lt;/a&gt;&lt;div class="sort-icon-container"&gt;&lt;div class="up-arrow-icon"&gt;&lt;/div&gt;&lt;div class="down-arrow-icon"&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;';
             }
         }
        //{ name: "Married", type: "checkbox", title: "Is Married", sorting: false }
        //,{ type: "control" }
    ]
});
</code></pre>