title: jqGrid with Ajax data (JSON) : load data in grid using "url" parameter from azure database
body: <p>I have one doubt with ajax implementation. I could find that "url" parameter need to be defined as "service_name1.azure-mobile.net/tables/" to fetch data to populate grid. But I need to add request header "X-ZUMO-APPLICATION" to define application key. To accomplish this, I think I have to make a httprequest with proper headers in a function and need to set reference of that function in some parameter of jqGrid to load data. Can you point out how is it possible to achieve?</p>
  
  <p>Page on which jqGrid is used, starts with "<a href="https://service_name2.azure-mobile.net" rel="nofollow">https://service_name2.azure-mobile.net</a>" </p>
  
  <p>Here service_name1 is azure mobile service name and 
  service_name2 is azure web service name and I have enabled CORS (cross object resource sharing) for service_name2 on mobile service service_name1.</p>
  
  <p>Please let me know if any additional information is required</p>
  
  <p>Updated  code to make it work with Ajax call :</p>
  
  <pre><code>        jQuery("#list4").jqGrid({
          datatype: "json",
          url : 'https://mohit.azure-mobile.net/tables/Schedules',
          height: "auto",
          colNames: ['RowNo', 'RouteId', 'Area],
          colModel: [
                    { name: 'id', index: 'id', width: 50, sortable: false },
                    { name: 'RouteId', index: 'RouteId', width: 50, sortable: false, editable: true, editrules: { required: true} },
                    { name: 'Area', index: 'Area', width: 130, sortable: false, editable: true, editrules: { required: true} },
                ],
          rowList: [10, 20, 30],
          loadBeforeSend: function(jqXHR) {
                                              jqXHR.setRequestHeader('X-ZUMO-APPLICATION', 'mykey');
                                          },
          ajaxGridOptions: { contentType: "application/json" },
          postData: "",
          serializeGridData: function (data) {return JSON.stringify(data);},
          pager: '#pager1',
          viewrecords: true,
          caption: "Schedule Data",
          //loadonce: true,
          gridview: true
      });
  </code></pre>
  
  <p>Weird thing is, I am not able to capture this request using fiddler so I am capturing request using IE developer toolbar (using F12).
  I tried composing a request using fiddler, used GET with url'<a href="https://mohit.azure.net/tables/Schedules" rel="nofollow">https://mohit.azure.net/tables/Schedules</a>'  and set header parameter as X-ZUMO-APPLICATION : appKey. I got proper response (expected JSON formatted table data) with this request. So I am feeling appended parameters are issue. </p>
  
  <p>Update code part 2</p>
  
  <pre><code>    jQuery("#list4").jqGrid({
          datatype: "json",
          url : 'https://mohit.azure-mobile.net/tables/Schedules',
          height: "auto",
          colNames: ['RowNo', 'RouteId', 'Area'],
          colModel: [
                    { name: 'id', index: 'id', width: 50, sortable: false },
                    { name: 'RouteId', index: 'RouteId', width: 50, sortable: false, editable: true, editrules: { required: true} },
                    { name: 'Area', index: 'Area', width: 130, sortable: false, editable: true, editrules: { required: true} }
                ],
          rowList: [10, 20, 30],
          loadBeforeSend: function(jqXHR) {
                                              jqXHR.setRequestHeader('X-ZUMO-APPLICATION', 'myKey');
                                          },
          loadComplete: function () {
                                          //alert("OK");
                                    },
          loadError: function (jqXHR, textStatus, errorThrown) {
                                                                      alert('HTTP status code: ' + jqXHR.status + '\n' +
                                                                      'textStatus: ' + textStatus + '\n' +
                                                                      'errorThrown: ' + errorThrown);
                                                                       alert('HTTP message body (jqXHR.responseText): ' + '\n' + jqXHR.responseText);
                                                               },
          ajaxGridOptions: { contentType: "application/json", cache: true },
          postData: "",
          pager: '#pager1',
          viewrecords: true,
          caption: "Schedule Data",
          loadonce: true,
          gridview: true
      });
  
     var inlineparams = {
          restoreAfterSelect: false,
          add: true,
          edit: true,
          save: true,
          cancel: true,
          del: true
      };
  
      jQuery("#list4").jqGrid('navGrid', "#pager1", { edit: false, save: false, add: false, cancel: false, del: false });
      jQuery("#list4").jqGrid('inlineNav', "#pager1", inlineparams);       
  }
  </code></pre>
  
  <p><strong>Solution for loading data in grid with jqGrid version 4.4.5 using Ajax way</strong></p>
  
  <pre><code>                       jQuery("#list4").jqGrid({
          datatype: "json",
          url : 'https://mohit.azure-mobile.net/tables/Schedules',
          height: "auto",
          colNames: ['RowNo', 'RouteId', 'Area'],
          colModel: [
                    { name: 'id', index: 'id', width: 50, sortable: false },
                    { name: 'RouteId', index: 'RouteId', width: 50, sortable: false, editable: true, editrules: { required: true} },
                    { name: 'Area', index: 'Area', width: 130, sortable: false, editable: true, editrules: { required: true} },
                ],
          rowList: [10, 20, 30],
          loadBeforeSend: function(jqXHR) {
                                              jqXHR.setRequestHeader('X-ZUMO-APPLICATION', 'myKey');
                                          },
          loadComplete: function () {
                                          //alert("OK");
                                    },
          loadError: function (jqXHR, textStatus, errorThrown) {
                                                                      alert('HTTP status code: ' + jqXHR.status + '\n' +
                                                                      'textStatus: ' + textStatus + '\n' +
                                                                      'errorThrown: ' + errorThrown);
                                                                       alert('HTTP message body (jqXHR.responseText): ' + '\n' + jqXHR.responseText);
                                                               },
          ajaxGridOptions: { contentType: "application/json", cache: true },
          postData: "",
          pager: '#pager1',
          viewrecords: true,
          caption: "Schedule Data",
          loadonce: true,
          jsonReader: {repeatitems: false},
          gridview: true
      });
  </code></pre>