jQuery UI Widgets Forums Grid Jqwidgets Grid – Redraw Grid

This topic contains 1 reply, has 2 voices, and was last updated by  Stanislav 6 years ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • Jqwidgets Grid – Redraw Grid #98375

    danangeloalcanar
    Participant

    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! 🙂

    Jqwidgets Grid – Redraw Grid #98455

    Stanislav
    Participant

    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/

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.