Jqwidgets Grid – Redraw Grid

[danangeloalcanarParticipant]

Hi, I am using jqWidgets grid. I am able to make the server side pager work. But there is something weird happening.

Here is my scenario:

I have two datepicker. jquery datepicker. When I select a date range, for example:

I have data between the dates January 1 and January 10. (10 records)

Now, I will select the date range: Dec 1 to Dec 5.

Of course, the result would be 0. Working fine.

But If I change the date to January 1 to January 10, the grid will become blank. But in the pager it shows that I have 10 records.

It is like it is retrieving records from the server but not redrawing the grid.

Hope you can help me. Thanks!

$('#btn-inventory-detailed').on('click', function() {
  $('#inventory-detailed').jqxGrid('updatebounddata');
  var salesGroupCode = $('#salesGroupCode').val();
  var salesOfficeCode = $('#salesOfficeCode').val();
  var salesDistrictCode = $('#salesDistrictCode').val();
  var dateFrom = $('#from').val();
  var dateTo = $('#to').val();

  if (dateFrom == '' || dateTo == '') {
    $('.alert-danger').show();
  } else {
    var source = {
      type: 'POST',
      datatype: "json",
      datafields:
      [
        { name: 'salesGroupCode', type: 'string'},
        { name: 'salesOfficeCode', type: 'string'},
        { name: 'salesDistrictCode', type: 'string'},
        { name: 'customerCode', type: 'string'},
        { name: 'customer', type: 'string'},
        { name: 'materialCode', type: 'string'},
        { name: 'material', type: 'string'},
        { name: 'qty', type: 'number' },
        { name: 'batch', type: 'string' },
        { name: 'week', type: 'number' },
        { name: 'dateRcvd', type: 'date' },
        { name: 'diser', type: 'string' }
      ],
      url: 'detailedajax',
      data: {
        salesGroupCode: salesGroupCode,
        salesOfficeCode: salesOfficeCode,
        salesDistrictCode: salesDistrictCode,
        dateFrom: dateFrom,
        dateTo: dateTo 
      },
      cache: false,  
      root: 'Rows',
      beforeprocessing: function(data)
      {
        source.totalrecords = data[0].TotalRows;
      }
    };
    var dataadapter = new $.jqx.dataAdapter(source);
    $("#inventory-detailed").jqxGrid('updatebounddata');
    $("#inventory-detailed").jqxGrid({
      source: dataadapter,
      columnsresize: true,
      enabletooltips: true,
      height: '400px',
      pageable: true,
      pagesize: 10,
      pagesizeoptions: ['10', '25', '50', '100'],
      selectionmode: 'multiplecellsextended',
      width: '100%',
      virtualmode: true,
      rendergridrows: function() {
        return dataadapter.records;
      },
      columns: [
        { text: 'Sales Group Code', datafield: 'salesGroupCode', width: 110},
        { text: 'Sales Office Code', datafield: 'salesOfficeCode', width: 110},
        { text: 'Sales District Code', datafield: 'salesDistrictCode', width: 110},
        { text: 'Customer Code', datafield: 'customerCode', width: 150},
        { text: 'Customer Name', datafield: 'customer', width: 300},
        { text: 'Material Code', datafield: 'materialCode', width: 100},
        { text: 'Material Description', datafield: 'material', width: 200},
        { text: 'Qty', datafield: 'qty', groupable: false, width: 80},
        { text: 'Batch', datafield: 'batch', width: 80},
        { text: 'Week', datafield: 'week', width: 100},
        { text: 'Date Sent', datafield: 'dateRcvd', width: 100},
        { text: 'Diser', datafield: 'diser', width: 200},
      ]
    });
    // $('#inventory-detailed').jqxGrid('updatebounddata'); 
    $("#inventory-detailed").on("bindingcomplete", function (event) {
      $('.alert-danger').hide();
      $('#inventory-detailed-filter').hide();
      $('#export-inventory-detailed').css('display', 'inline-block');
      $('#toggle-inventory-detailed-filter').css('display', 'block');
      if ($('#inventory-detailed-filter').is(':visible')) {
        $('#toggle-inventory-detailed-filter').text('Show Filters');
      } else {
        $('#toggle-inventory-detailed-filter').text('Show Filters');
        $('#inventory-detailed-filter').hide();
      }
    });

  }
 
});

		$route = $this->uri->segment(1) . '/' .$this->uri->segment(2) . '/' . $this->uri->segment(3);
		if ($this->usermodel->userHasAccess($this->session->userdata('userId'), $route)) {
			$data['title'] = 'Inventory Summary Report';
			$data['mainView'] = 'merchandiser/inventory/inventory-summary';
			$this->load->view('index', $data);
		} else {
			redirect('/', 'refresh');
		}
	}
	public function inventoryDetailedAjax() {
		$salesGroupCode = $this->input->post('salesGroupCode');
		$salesOfficeCode = $this->input->post('salesOfficeCode');
		$salesDistrictCode = $this->input->post('salesDistrictCode');
		$dateFrom = new DateTime($this->input->post('dateFrom'));
		$dateFrom  = $dateFrom->format('m/d/Y');
		$dateTo = new DateTime($this->input->post('dateTo'));
		$dateTo  = $dateTo->format('m/d/Y');
		$this->session->set_userdata('salesGroupCode', $salesGroupCode);
		$this->session->set_userdata('salesOfficeCode', $salesOfficeCode);
		$this->session->set_userdata('salesDistrictCode', $salesDistrictCode);
		$this->session->set_userdata('dateFrom', $dateFrom);
		$this->session->set_userdata('dateTo', $dateTo);		
		$pageNum =$this->input->post('pagenum');
		$pageSize =$this->input->post('pagesize');
		$start = $pageNum * $pageSize;

		$result = $this->inventorymodel->inventoryDetailed($start, $pageSize, $this->session->userdata('userId'), $salesGroupCode, $salesOfficeCode, $salesDistrictCode, $dateFrom, $dateTo);

		if ($result) {
			foreach ($result as $row) {
				$inventory[] = [
					'salesGroupCode' => $row['salesGroupCode'],
					'salesOfficeCode' => $row['salesOfficeCode'],
					'salesDistrictCode' => $row['salesDistrictCode'],
					'customerCode' => $row['customerCode'],
					'customer' => $row['customer'],
					'materialCode' => $row['materialCode'],
					'material' => $row['material'],
					'qty' => $row['qty'],
					'batch' => $row['batch'],
					'week' => $row['week'],
					'dateRcvd' => $row['dateRcvd'],
					'diser' => $row['diser']
				];
				$rowCount = $row['overall_count'];
			}
		} else {
			$rowCount = 0;
			$inventory = [];
		}
			$data[] = [
				'TotalRows' => $rowCount,
				'Rows' => $inventory
			];
			echo json_encode($data);

Thanks any tips and suggestion would be appreciated! 🙂

[StanislavParticipant]

Hello danangeloalcanar,

See updatedelay from the API list.

You could also take a look at the DataAdapter’s settings, you migth find something usefull there.

Best Regards,
Stanislav

jQWidgets Team
http://www.jqwidgets.com/

[Author]

Posts