How to reload jqxGrid data with new data from another url

Question

I have a jqxGrid form JqWidgets library , I have bound the data to the jqxGrid like so..

 var url = "getConsignments.php?type="+$('#selectIsDelevered').val();

      var consignmentsource =
          {
            datafields: [
              {
                name: 'ConsignmentId', type: 'string'  }
              ,{
                name: 'Name' , type: 'string' }

            ],
            id: 'ConsignmentId',
            datatype: "json",
            async: false,
            cache:false,
            url: url ,
            filter: function()
      {
        // update the grid and send a request to the server.
        $("#jqxgrid").jqxGrid('updatebounddata', 'filter');
      },
      sort: function()
        {
          // update the grid and send a request to the server.
          $("#jqxgrid").jqxGrid('updatebounddata', 'sort');

        },
          root: 'Rows',
          cache: false,
    beforeprocessing: function(data)
    {   
      if (data != null)
      {
        consignmentsource.totalrecords = data[0].TotalRows;          
      }
    }
          }

This for initionalizing and server call. the bellow code is for binding to the data I get from the server

consignmentAdapter = new $.jqx.dataAdapter(consignmentsource);

  $("#jqxgrid").jqxGrid(
      {
        source: consignmentAdapter,
        theme:'bootstrap',
        columnsresize:true,
        width: '100%',

          filterable:true,
        autoheight:true,

        rowdetails: true,
        autorowheight :true,
        showfilterrow: true,
        pageable:true,
        sortable: true,
        virtualmode: true,
        rendergridrows: function()
        {
            return consignmentAdapter.records;     
        },


        ready: function () {
          // $("#jqxgrid").jqxGrid('showrowdetails', 1);
        }
        ,
        columns: [
          {
            text: 'ID', width: '10%',datafield:  'ConsignmentId'}
          ,
          {
            text: 'Name', datafield: 'Name', width: '18%' }
        ]
      }
    );

The selectIsDelevered is a select tag has 3 options , every option loads different data, I wand to do the rebind , reload , or refresh the grid with the ('#selectIsDelevered').change() function I have tested $('#jqxGrid').jqxGrid('updatebounddata'); but it didn't work , even I have tried $('#jqxGrid').jqxGrid('refresh'); with repeating the binding steps . I took me 3 days , Any suggestion ?!!

score 3 · Answer 1 · answered Apr 14 '15 at 03:00

You can change url directly as the following code:

('#selectIsDelevered').change({
   var tmpS = $("#jqxgrid").jqxGrid('source');
   tmpS._source.url = "getConsignments.php?type="+$('#selectIsDelevered').val();
   $("#jqxgrid").jqxGrid('source', tmpS);
});

How to reload jqxGrid data with new data from another url

1 Answers1