jQWidgets Forums
jQuery UI Widgets › Forums › Grid › Filter row not working › Reply To: Filter row not working
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"}]