Filter row not working

[basim.sherifParticipant]

I have a problem with filter row.Its not working for the below code.Even that filter row is not displaying.

$(document).ready(function () {
var theme = ‘fresh’
var source =
{
datatype: “json”,
datafields: [
{ name: ‘slno’},
{ name: ‘id’},
{ name: ‘gino’},
{ name: ‘gidate’},
{ name: ‘supcode’},
{ name: ‘billno’},
{ name: ‘billamount’},
],
url: ”
};

$(“#jqxgrid”).jqxGrid(
{
source: source,
theme: theme,

width: 800,
height:25,
autoheight: true,
autowidth: true,
sortable: true,
editable:true,
pageable:true,
showfilterrow: true,
filterable: true,

selectionmode: ‘multiplerowsextended’,

columns: [
{ text: ‘Sl No.’, datafield: ‘slno’, width: 50},
{ text: ‘Sl No.’, datafield: ‘id’, width: 50},
{ text: ‘Gi No.’, datafield: ‘gino’, width: 100,columntype: ‘textbox’,filterable: true},
{ text: ‘Gi date’, datafield: ‘gidate’, width:100},
{ text: ‘Supplier Code’, datafield: ‘supcode’, width:120,cellsalign: ‘left’ },
{ text: ‘Bill No.’, datafield: ‘billno’, width:150,cellsalign: ‘left’ },
{ text: ‘Bill Amount’, datafield: ‘billamount’, width:150,cellsalign: ‘right’ },

{ text: ‘ ‘, columntype: ‘button’,value:’edit’, datafield: ‘edit’, cellsrenderer: function () {

return “Edit”;

}, buttonclick: function (row) {

var selectedrowindex = $(“#jqxgrid”).jqxGrid(‘getselectedrowindex’);
var id = $(‘#jqxgrid’).jqxGrid(‘getcellvalue’, selectedrowindex, “id”);
var gino = $(‘#jqxgrid’).jqxGrid(‘getcellvalue’, selectedrowindex, “gino”);

//window.open(“stockinwardform?id=”+id);
document.location.href=”stockinwardform?id=”+id+”&gino=”+gino;

}}

,

{ text: ‘ ‘, columntype: ‘button’,value:’edit’, datafield: ‘edit’, cellsrenderer: function () {

return “Print”;

}, buttonclick: function (row) {

var selectedrowindex = $(“#jqxgrid”).jqxGrid(‘getselectedrowindex’);
var gino = $(‘#jqxgrid’).jqxGrid(‘getcellvalue’, selectedrowindex, “gino”);

//window.open(“stockinwardform?id=”+id);
window.open(“invoiceprint/”+gino);

}}

,

]
});

$(‘#jqxgrid’).bind(‘initialized’, function () { $(‘#jqxgrid’).jqxGrid(‘hidecolumn’, ‘id’); });

});

[Peter StoevKeymaster]

Hi basim.sherif,

1. Check the version of jQWidgets that you use. Filter Row is a new feature so if you are using version before 2.4, it will not work.
2. Check whether you added all required references.
3. There’s no such setting ‘autowidth’.
4. You missed to bind the Grid to a data adapter. Always use jqxDataAdapter as a data source.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[basim.sherifParticipant]

Thanks that problem has gone.I had older version of jQWidget.But now I have another problem.I have a phone number column.When I apply filter row to that particular column its not working.It shows no data to display.But other columns works perfect.What will be the problem here? Thank you…

[Peter StoevKeymaster]

Hi basim.sherif,

I don’t know what could be the issue with the Phone Number column. Could you post a code including sample data, so we can test locally?

Looking forward to your reply.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[basim.sherifParticipant]

Ok…here is my code,

  $(document).ready(function () {
            // prepare the data
           var pur="";
		    var data = {};
            var theme = 'fresh';
			var editModes = ['Click', 'Double-Click', 'Selected Cell Click'];
            var source =
            {
                datatype: "json",
                datafields: [
					{ name: 'slno' },
					 { name: 'code' },
					 { name: 'name' },
					 { name: 'id' },
					 { name: 'phone' },
					 { name: 'mobile' },
					 { name: 'email' },
					 { name: 'address1' },
					 { name: 'address2' },
					 { name: 'address3' },
					 { name: 'address4' },
					 { name: 'fax' },
					  { name: 'branch' },
					 { name: 'tin' },
					 { name: 'pin' },
					
					 
					
                ],
                id: 'EmployeeID',
                url: '',
                
				updaterow: function (rowid, rowdata) {
                    // synchronize with the server - send update command
                    var data = "update=true&code=" + rowdata.code + "&name=" + rowdata.name +"&phone=" + rowdata.phone +"&id=" + rowdata.id +"&mobile=" + rowdata.mobile +"&email=" + rowdata.email +"&fax=" + rowdata.fax +"&pin=" + rowdata.pin +"&address1=" + rowdata.address1 +"&address2=" + rowdata.address2 +"&address3=" + rowdata.address3 +"&address4=" + rowdata.address4 +"&tin=" + rowdata.tin +"&branch=" + rowdata.branch;
                    
				  
				  
				  
				  
				  
				  
                    $.ajax({
                        dataType: 'json',
                        url: '',
                        data: data,
                        success: function (data, status, xhr) {
                            // update command is executed.
                        }
                    });
                }
            };
 
 			$("#sl").addClass('jqx-input');
 			$("#code").addClass('jqx-input');
            $("#name").addClass('jqx-input');
          	$("#phone").addClass('jqx-input');
			$("#mobile").addClass('jqx-input');
			$("#fax").addClass('jqx-input');
			$("#email").addClass('jqx-input');
			$("#address1").addClass('jqx-input');
			$("#address2").addClass('jqx-input');
			$("#address3").addClass('jqx-input');
			$("#address4").addClass('jqx-input');
			
			$("#pin").addClass('jqx-input');
			$("#branch").addClass('jqx-selectbox');
            
			
			
			$("#sl").width(30);
            $("#sl").height(23);
            $("#code").width(100);
            $("#code").height(23);
            $("#name").width(300);
            $("#name").height(23);
			 $("#phone").width(100);
            $("#phone").height(23);
			 $("#fax").width(100);
            $("#fax").height(23);
			 $("#mobile").width(100);
            $("#mobile").height(23);
			 $("#email").width(200);
            $("#email").height(23);
			 $("#address1").width(300);
            $("#address1").height(23);
			 $("#address2").width(300);
            $("#address2").height(23);
			 $("#address3").width(300);
            $("#address3").height(23);
			 $("#address4").width(300);
            $("#address4").height(23);
			 $("#tin").width(100);
            $("#tin").height(23);
			 $("#pin").width(100);
            $("#pin").height(23);
			
			 $("#branch").width(100);
            $("#branch").height(23);
			 
			
			
            if (theme.length > 0) {
                $("#firstName").addClass('jqx-input-' + theme);
                $("#lastName").addClass('jqx-input-' + theme);
                $("#product").addClass('jqx-input-' + theme);
            }
           
            var dataAdapter = new $.jqx.dataAdapter(source);
            var editrow = -1;
 
 
 
 
 		
 			
 
 
         $("#jqxgrid").jqxGrid(
         {
             source: dataAdapter,
             theme: theme,
			 width:970,
			 
			
	
             
			 
			 pageable: true,
             autoheight: true,
			 autowidth: true,
		     sortable: true,
			 editable:true,
			  showfilterrow: true,
             filterable: true,
			 
             
              
         columns: [
		  		{ text: 'Sl No', datafield: 'slno', width: 40},
		        { text: 'Sl No', datafield: 'id', width: 40},
			    { text: 'Code', datafield: 'code', width:100},
               { text: 'Name', datafield: 'name', width: 150},
			   { text: 'Address', datafield: 'address1', width: 150},
			   { text: 'Address2', datafield: 'address2', width: 200},
			   { text: 'Address3', datafield: 'address3', width: 200},
			   { text: 'Address4', datafield: 'address4', width: 200},
			   { text: 'Pincode', datafield: 'pin', width: 80},
			   { text: 'Phone', datafield: 'phone', width: 150},
			   { text: 'Mobile', datafield: 'mobile', width: 150},
			   { text: 'Fax', datafield: 'fax', width: 80},
			   { text: 'TIN No', datafield: 'tin', width: 80},
			   { text: '', datafield: 'email', width: 120},
			  
			  { text: '', datafield: 'branch', width: 100},
			 
			   
			   
	  { text: 'Edit', datafield: 'Edit', columntype: 'button', cellsrenderer: function () {
                     return "Edit";
                 }, buttonclick: function (row) {
                     // open the popup window when the user clicks a button.
                    
					
					
				
					
					
					
					
					
					 editrow = row;
                     var offset = $("#jqxgrid").offset();
                     $("#popupWindow").jqxWindow({ position: { x: parseInt(offset.left) + 130, y: parseInt(offset.top) + -100} });
                     // get the clicked row's data and initialize the input fields.
                     var dataRecord = $("#jqxgrid").jqxGrid('getrowdata', editrow);
                      $("#sl").val(dataRecord.id);
					 $("#code").val(dataRecord.code);
                     $("#name").val(dataRecord.name);
					 $("#phone").val(dataRecord.phone);
                     $("#mobile").val(dataRecord.mobile);
					 $("#fax").val(dataRecord.fax);
					 $("#email").val(dataRecord.email);
					 $("#tin").val(dataRecord.tin);
					 $("#pin").val(dataRecord.pin);
					 $("#branch").val(dataRecord.branch);
					 $("#address1").val(dataRecord.address1);
					 $("#address2").val(dataRecord.address2);
					 $("#address3").val(dataRecord.address3);
					 $("#address4").val(dataRecord.address4);
					
					 
					 
                    
                     $("#popupWindow").jqxWindow('show');
                 }
                 },
                ]
            });
		 
	 $("#popupWindow").jqxWindow({ width:1000, resizable: false, theme: theme, isModal: true, autoOpen: false, cancelButton: $("#Cancel"), modalOpacity: 0.01 });
            $("#Cancel").jqxButton({ theme: theme });
            $("#Save").jqxButton({ theme: theme });
            // update the edited row when the user clicks the 'Save' button.
            $("#Save").click(function () {
                if (editrow >= 0) {
                    var row = { code: $("#code").val(), name: $("#name").val(), phone: $("#phone").val(),id: $("#sl").val(),mobile: $("#mobile").val(),email: $("#email").val(),address1: $("#address1").val(),address2: $("#address2").val(),address3: $("#address3").val(),address4: $("#address4").val(),pin: $("#pin").val(),fax: $("#fax").val(),tin: $("#tin").val(),branch: $("#branch").val(),
                    };
                    
					
                    
					
					
					$("#popupWindow").jqxWindow('hide');
					$('#jqxgrid').jqxGrid('updaterow', editrow, row);
                }
            });
    
			$('#jqxgrid').bind('initialized', function () { $('#jqxgrid').jqxGrid('hidecolumn', 'id'); });
			$('#jqxgrid').bind('initialized', function () { $('#jqxgrid').jqxGrid('hidecolumn', 'tin'); });
			$('#jqxgrid').bind('initialized', function () { $('#jqxgrid').jqxGrid('hidecolumn', 'fax'); });
			$('#jqxgrid').bind('initialized', function () { $('#jqxgrid').jqxGrid('hidecolumn', 'email'); });
			$('#jqxgrid').bind('initialized', function () { $('#jqxgrid').jqxGrid('hidecolumn', 'address2'); });
			$('#jqxgrid').bind('initialized', function () { $('#jqxgrid').jqxGrid('hidecolumn', 'address3'); });
			$('#jqxgrid').bind('initialized', function () { $('#jqxgrid').jqxGrid('hidecolumn', 'address4'); });

			
			
			
			
			
			
			

			
		
		
		

	 
});




And here is my json data,

[{"slno":1,"name":"Asif","code":"4050003","id":"1","mobile":"0497 2702307","phone":"9809109150","email":"","address1":"SME","address2":"ABC","address3":"KANNUR","address4":"","fax":"","tin":"","branch":"KANNUR","pin":"670 002"},{"slno":2,"name":"SOOPPY T.P","code":"4050002","id":"2","mobile":"+919645556116","phone":"0497 2723707","email":"","address1":"BUREAU CHIEF","address2":"ABC","address3":"KANNUR","address4":"","fax":"","tin":"","branch":"KANNUR","pin":"670 002"}]

[Peter StoevKeymaster]

Hi basim.sherif,

I tested the provided code with the latest version – jQWidgets 2.5 and it works on my side.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[basim.sherifParticipant]

Iam using remote data.Do I have done the right method for remote data??

[Author]

Posts