Filter row problems

[hardcodeMember]

/*The grid begins here*/
	var url = "../php/grid.php?populate=true";
       	var source =
            {
                datatype: "json",
                datafields: [
                    { name: 'tripNumber' },
                    { name: 'BRVNumber'},
                    { name: 'loadingDate'},
                    { name: 'loadingDepot'},
                    { name: 'OMC'},
                    { name: 'productLoaded'},
					{ name: 'roadExpenses'},
					{ name: 'kilometers'},
					{ name: 'wayBillNumber'},
					{ name: 'customer'},
					{ name: 'destination'},
					{ name: 'quantityShipped', type: 'float'},
					{ name: 'remark'},
					{ name: 'returnDate'},
					{ name: 'topUp'},
					{ name: 'meterLosses'},
					{ name: 'whoFirstCreated'},
					{ name: 'whoLastEdited'},
					{ name: 'fuelQuantityGiven'}
					
                ],
                id: 'wayBillNumber',
                url: url,
                root: 'data',
				cache: false
            };
            var dataAdapter = new $.jqx.dataAdapter(source);
            $("#tripGrid").jqxGrid(
            {
                width: '100%',
				autoheight: true,
                source: dataAdapter,
				showfilterrow: true,
				filterable: true,
				sortable:true,
				editable: true,
				pageable: true,
				pagesize:20,
				pagesizeoptions:['20', '40', '60'],
				selectionmode: 'singlerow',
                columnsresize: true,
				columnsheight:40,
                theme: greyTheme,
                columns: [
                  { text: 'Trip<br/>Number', columntype: 'textbox',dataField: 'tripNumber', width: 80, editable:false},
				  { text: 'Waybill<br/>Number', dataField: 'wayBillNumber', width: 100, editable:false,  columntype: 'textbox'},
                  { text: 'BRV<br/>Number', dataField: 'BRVNumber', width: 85, editable:false},
                  { text: 'Loading<br/>Date',columntype:'datetimeinput', dataField: 'loadingDate', width: 80, cellsformat:'dd/MM/yyyy', editable:false,filtertype: 'date'},
                  { text: 'Loading<br/>Depot', dataField: 'loadingDepot', width: 70, editable:false},
                  { text: 'OMC', dataField: 'OMC', width: 120, editable:false},
                  { text: 'Product<br/>Loaded', dataField: 'productLoaded',width: 70, editable:false},
				  { text: 'Kilometers', dataField: 'kilometers', width: 80, editable:false},
				  { text: 'Customer', dataField: 'customer', width: 100, editable:false},
				  { text: 'Destination', dataField: 'destination', width: 100, editable:false},
				  { text: 'Quantity', dataField: 'quantityShipped', width: 65, editable:false, cellsformat: 'f1'},
				  { text: 'Fuel<br/>Given', dataField: 'fuelQuantityGiven', width: 45, editable:false, cellsformat: 'f1',},
				  { text: 'Road<br/>Exp', dataField: 'roadExpenses', width: 50, editable:false},
				  { text: 'Return<br/>Date', columntype:'datetimeinput', dataField: 'returnDate', width: 80, editable:true, cellsformat:'dd/MM/yyyy'},
				  { text: 'TopUp', dataField: 'topUp', width: 45, editable:true},
				  { text: 'Meter<br/>Losses', dataField: 'meterLosses', width: 50, editable:true},
				  { text: 'Remarks', dataField: 'remark', width: 65, editable:true},
				  { text: 'Created By', dataField: 'whoFirstCreated', width: 100, editable:false},
				  { text: 'Last<br/> Edited By', dataField: 'whoLastEdited', width: 100, editable:false}
                ]
            });
	/*grid ends*/
	
	/*This event is called anytime a cell in the grid is edited and the enter key is pressed by the user*/
		$("#tripGrid").bind('cellendedit', function (event) {
            var args = event.args;
			var myRowId = $("#tripGrid").jqxGrid('getrowid', args.rowindex);
			var data = "update=true&wayBillNumber=" + myRowId + "&column=" + args.datafield+"&columnValue=" +args.value +"&whoLastEdited="+$("#employeeName").val();
          		if(args.value != ""){
					$.ajax({
                			dataType: 'json',
                			url: '../php/record.php',
                			data: data,
                			success: function (data, status, xhr) {
								if (data != 1){
								alert("Record not could not be saved, please contact administrator, check internet connection and try again");
								}else{
									source = source;
                					$("#tripGrid").jqxGrid('updatebounddata');
								}
							}
					});
			}
						
		});

Hello,
My grid is working fine and there is no problem with data been displayed but i have problems with filter row
1. I have a button that when clicked refreshes the grid. it works fine and refreshes the grid but problems occur when I add the
showfilterrow: true,
filterable: true,

the textbox space where the user types the search string duplicates and rolls up to the top where the column titles are located, usually it should be below the column titles even after refresh. Note that when the entire page loads for the first time all display in their correct positions.
Anytime i click the refresh button, the grid filter textbox duplicates. That means if i click it for 10 times the filter textboxes for each column duplicates 10 times.

2. The textbox space for typing the search string is read only and i cannot type in any value yet the space has been created and showing alright yet when i click in it the cursor blinks but anything i type does not appear and filtering does not

Please advice me on what to do

[Peter StoevKeymaster]

Hi hardcode,

Which version of jQWidgets do you use? If you don’t use 2.4.1, I suggest you to upgrade to it.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[hardcodeMember]

Was using 2.4.0
I just updated it to 2.4.1 and all seems well. I will keep an eye on any of these anomalies and let you know should any pop up
Thanks

[Author]

Posts