title: Loading jsGrid by calling Controller/WebService in MVC
body: <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>