numeric filter not working for me in jqxgrid

[sumeshkjMember]

 

i am unable to do numeric filer in the numeric column,

also not able to do text box startwith filter

i request you to help at the earlist

i have put the code i am using pls help

 

 

 

<div>
<?php
echo validation_errors();
$attrs=array(“name”=>”myform”,”id”=>”myform”);
echo form_open(‘adduser/customergrid’,$attrs); ?>

<style type=”text/css”>
.button {
-moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
-webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
box-shadow:inset 0px 1px 0px 0px #ffffff;
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #fafafa), color-stop(1, #4fbaf7) );
background:-moz-linear-gradient( center top, #fafafa 5%, #4fbaf7 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=’#fafafa’, endColorstr=’#4fbaf7′);
background-color:#fafafa;
-moz-border-radius:7px;
-webkit-border-radius:7px;
border-radius:7px;
border:1px solid #dcdcdc;
display:inline-block;
color:#073985;
font-family:arial;
font-size:13px;
font-weight:bold;
padding:6px 11px;
text-decoration:none;
}.button:hover {
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #4fbaf7), color-stop(1, #fafafa) );
background:-moz-linear-gradient( center top, #4fbaf7 5%, #fafafa 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=’#4fbaf7′, endColorstr=’#fafafa’);
background-color:#4fbaf7;
}.button:active {
position:relative;
top:1px;
}
/* This imageless css button was generated by CSSButtonGenerator.com */

</style>

<link rel=”stylesheet” href=”<?php echo base_url() ?>widgets/jqwidgets/styles/jqx.base.css” type=”text/css” />
<link rel=”stylesheet” href=”<?php echo base_url() ?>widgets/jqwidgets/styles/jqx.fresh.css” type=”text/css” />
<script type=”text/javascript” src=”<?php echo base_url() ?>widgets/scripts/jquery-1.7.2.min.js”></script>
<script type=”text/javascript” src=”<?php echo base_url() ?>js/jquery-ui-1.8.17.custom.min.js”></script>
<script type=”text/javascript” src=”<?php echo base_url() ?>widgets/jqwidgets/jqxcore.js”></script>
<script type=”text/javascript” src=”<?php echo base_url() ?>widgets/jqwidgets/jqxbuttons.js”></script>
<script type=”text/javascript” src=”<?php echo base_url() ?>widgets/jqwidgets/jqxscrollbar.js”></script>
<script type=”text/javascript” src=”<?php echo base_url() ?>widgets/jqwidgets/jqxmenu.js”></script>
<script type=”text/javascript” src=”<?php echo base_url() ?>widgets/jqwidgets/jqxcheckbox.js”></script>
<script type=”text/javascript” src=”<?php echo base_url() ?>widgets/jqwidgets/jqxnumberinput.js”></script>
<script type=”text/javascript” src=”<?php echo base_url() ?>widgets/jqwidgets/jqxgrid.edit.js”></script>
<script type=”text/javascript” src=”<?php echo base_url() ?>widgets/jqwidgets/jqxgrid.js”></script>
<script type=”text/javascript” src=”<?php echo base_url() ?>widgets/jqwidgets/jqxgrid.selection.js”></script>
<script type=”text/javascript” src=”<?php echo base_url() ?>widgets/jqwidgets/jqxgrid.columnsresize.js”></script>
<script type=”text/javascript” src=”<?php echo base_url() ?>widgets/jqwidgets/jqxdata.js”></script>
<script type=”text/javascript” src=”<?php echo base_url() ?>widgets/scripts/gettheme.js”></script>
<script type=”text/javascript” src=”<?php echo base_url() ?>widgets/jqwidgets/jqxpanel.js”></script>
<script type=”text/javascript” src=”<?php echo base_url() ?>widgets/jqwidgets/jqxgrid.pager.js”></script>
<script type=”text/javascript” src=”<?php echo base_url() ?>widgets/jqwidgets/jqxgrid.filter.js”></script>
<script type=”text/javascript” src=”<?php echo base_url() ?>widgets/jqwidgets/jqxlistbox.js”></script>
<script type=”text/javascript” src=”<?php echo base_url() ?>widgets/jqwidgets/jqxdropdownlist.js”></script>
<script type=”text/javascript” src=”<?php echo base_url() ?>widgets/jqwidgets/jqxgrid.sort.js”></script>
<script type=”text/javascript” src=”<?php echo base_url() ?>widgets/jqwidgets/jqxwindow.js”></script>
<script src=”<?php echo base_url() ?>js/jquery.sessionTimeout.1.0.js”></script>
<script type=”text/javascript”>

$(document).ready(function(){
$(document).idleTimeout();
});

$(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: ‘vsatid’ },
{ name: ‘techid’ },
{ name: ‘custid’ },
{ name: ‘name’ },
{ name: ‘location’ },
{ name: ‘phoneno’ },
{ name: ‘contact’ },
{ name: ‘status’ },

],
id: ‘EmployeeID’,
url: ‘<?php echo base_url().”index.php/vsat/customergriddata”; ?>’,

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 +”&contact=” + rowdata.contact +”&currency=” + rowdata.currency +”&branch=” + rowdata.branch +”&type=” + rowdata.type;

$.ajax({
dataType: ‘json’,
url: ‘<?php echo base_url().”index.php/vsat/customergriddata”; ?>’,
data: data,
success: function (data, status, xhr) {
// update command is executed.
}
});
}
};

$(“#sl”).addClass(‘jqx-input’);
$(“#custid”).addClass(‘jqx-input’);
$(“#name”).addClass(‘jqx-input’);
$(“#vsatid”).addClass(‘jqx-input’);
$(“#addr1”).addClass(‘jqx-input’);
$(“#addr2”).addClass(‘jqx-input’);
$(“#addr3”).addClass(‘jqx-input’);
$(“#addr4”).addClass(‘jqx-input’);
$(“#district”).addClass(‘jqx-input’);
$(“#location”).addClass(‘jqx-input’);
$(“#phoneno”).addClass(‘jqx-input’);
$(“#contact”).addClass(‘jqx-input’);
$(“#status”).addClass(‘jqx-selectbox’);
$(“#mobile”).addClass(‘jqx-input’);
$(“#remarks”).addClass(‘jqx-input’);
$(“#techid”).addClass(‘jqx-input’);
$(“#ansize”).addClass(‘jqx-input’);
$(“#bheight”).addClass(‘jqx-input’);
$(“#ifllength”).addClass(‘jqx-input’);
$(“#consignee”).addClass(‘jqx-input’);

$(“#sl”).width(30);
$(“#sl”).height(23);
$(“#custid”).width(100);
$(“#custid”).height(23);
$(“#name”).width(300);
$(“#name”).height(23);
$(“#vsatid”).width(100);
$(“#vsatid”).height(23);
$(“#addr1”).width(300);
$(“#addr1”).height(23);
$(“#addr2”).width(300);
$(“#addr2”).height(23);
$(“#addr3”).width(300);
$(“#addr3”).height(23);
$(“#addr4”).width(300);
$(“#addr4”).height(23);
$(“#district”).width(200);
$(“#district”).height(23);
$(“#location”).width(200);
$(“#location”).height(23);
$(“#phoneno”).width(200);
$(“#phoneno”).height(23);
$(“#contact”).width(200);
$(“#contact”).height(23);
$(“#status”).width(200);
$(“#status”).height(23);
$(“#mobile”).width(100);
$(“#mobile”).height(23);
$(“#remarks”).width(100);
$(“#remarks”).height(23);
$(“#techid”).width(100);
$(“#techid”).height(23);
$(“#ansize”).width(100);
$(“#ansize”).height(23);
$(“#bheight”).width(100);
$(“#bheight”).height(23);
$(“#ifllength”).width(100);
$(“#ifllength”).height(23);
$(“#consignee”).width(100);
$(“#consignee”).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: source,
theme: theme,
width:900,

pageable: true,
autoheight: true,
showfilterrow: true,
//  filterable: true,
sortable: true,
editable:true,
columnsresize: true,

columns: [
{ text: ‘Sl No’, datafield: ‘slno’, width: 40 },
{ text: ‘Vsat Id’,filtertype: ‘textbox’,filtercondition: ‘starts_with’, datafield: ‘vsatid’, width: 60},
{ text: ‘Technology’, datafield: ‘techid’, width: 100},
{ text: ‘Cust Id’, datafield: ‘custid’, width:60},
{ text: ‘Name’,filtertype: ‘textbox’,filtercondition: ‘starts_with’, datafield: ‘name’, width: 150},
{ text: ‘Location’, datafield: ‘location’, width: 150},
{ text: ‘Phone no’, datafield: ‘phoneno’, width: 120},
{ text: ‘Contact’, datafield: ‘contact’, width: 80},
{ text: ‘Status’, datafield: ‘status’, width: 80},

{ text: ‘View’, datafield: ‘View’, columntype: ‘button’, cellsrenderer: function () {
return “View”;
}, buttonclick: function (row) {
// open the popup window when the user clicks a button.
var selectedrowindex = $(“#jqxgrid”).jqxGrid(‘getselectedrowindex’);
var phon = $(‘#jqxgrid’).jqxGrid(‘getcellvalue’, selectedrowindex, “custid”);

document.location.href=”userview/”+phon;
}
},
]
});

$(“#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(),contact: $(“#contact”).val(),currency: $(“#currency”).val(),tin: $(“#tin”).val(),branch: $(“#branch”).val(),type: $(“#type”).val(),
};

$(“#popupWindow”).jqxWindow(‘hide’);
$(‘#jqxgrid’).jqxGrid(‘updaterow’, editrow, row);
}
});
$(‘#jqxgrid’).bind(‘initialized’, function () { $(‘#jqxgrid’).jqxGrid(‘hidecolumn’, ‘addr1’); });
$(‘#jqxgrid’).bind(‘initialized’, function () { $(‘#jqxgrid’).jqxGrid(‘hidecolumn’, ‘mobile’); });
$(‘#jqxgrid’).bind(‘initialized’, function () { $(‘#jqxgrid’).jqxGrid(‘hidecolumn’, ‘district’); });
$(‘#jqxgrid’).bind(‘initialized’, function () { $(‘#jqxgrid’).jqxGrid(‘hidecolumn’, ‘remarks’); });
$(‘#jqxgrid’).bind(‘initialized’, function () { $(‘#jqxgrid’).jqxGrid(‘hidecolumn’, ‘ansize’); });
$(‘#jqxgrid’).bind(‘initialized’, function () { $(‘#jqxgrid’).jqxGrid(‘hidecolumn’, ‘bheight’); });
$(‘#jqxgrid’).bind(‘initialized’, function () { $(‘#jqxgrid’).jqxGrid(‘hidecolumn’, ‘ifllength’); });
$(‘#jqxgrid’).bind(‘initialized’, function () { $(‘#jqxgrid’).jqxGrid(‘hidecolumn’, ‘addr2’); });
$(‘#jqxgrid’).bind(‘initialized’, function () { $(‘#jqxgrid’).jqxGrid(‘hidecolumn’, ‘addr3’); });
$(‘#jqxgrid’).bind(‘initialized’, function () { $(‘#jqxgrid’).jqxGrid(‘hidecolumn’, ‘addr4’); });
$(‘#jqxgrid’).bind(‘initialized’, function () { $(‘#jqxgrid’).jqxGrid(‘hidecolumn’, ‘consignee’); });

});

function goback()
{
document.location.href=”viewuser”;
}

</script>

<br /><br />

<fieldset>

<br /><br />

<center><div id=”jqxgrid”></div></center>

<center>
</center>
<br />
<br />
</fieldset>
<!–
<div id=”popupWindow”>
<div>Edit</div>
<div style=”overflow: hidden;”>
<table>
<tr>
<td align=”left”>Sl no:</td>
<td align=”left” ><input id=”sl” readonly=”readonly”/></td>
</tr>
<tr>
<td align=”left”>Code:</td>
<td align=”left”><input id=”code” /></td>
<td align=”left”>Phone:</td>
<td align=”left”><input id=”phone” /></td>
</tr>
<tr>
<td align=”left”>Name:</td>
<td align=”left” ><input id=”name”  /></td>

<td align=”left”>Mobile:</td>
<td align=”left”><input id=”mobile” /></td>
</tr>
<tr>
<td align=”left”>Address:</td>
<td align=”left”><input id=”address1″ /></td>
<td align=”left”>email:</td>
<td align=”left”><input id=”email” /></td>
</tr>
<tr>
<td align=”left”></td>
<td align=”left”><input id=”address2″ /></td>
<td align=”left”>Fax:</td>
<td align=”left”><input id=”fax” /></td>
</tr>
<tr>
<td align=”left”></td>
<td align=”left”><input id=”address3″ /></td>
<td align=”left”>Tin No:</td>
<td align=”left”><input id=”tin” /></td>

</tr>

<tr>
<td align=”left”></td>
<td align=”left”><input id=”address4″ /></td>
<td align=”left”>Contact Person:</td>
<td align=”left”><input id=”contact” /></td>

</tr>
<tr>
<td align=”left”>Pincode:</td>
<td align=”left”><input id=”pin” /></td>
<td align=”left”>Curency:</td>
<td align=”left”><select name=”currency” id=”currency” ><option></option><option>UAE Dirham</option><option>British Pound</option><option>Indian Rupee</option><option>Kuwaiti Dinar</option><option>Omani Riyal</option><option>Qatari Riyal</option><option>Saudi Arabian Riyal</option><option>US Dollar</option>
</select></td></tr>
<tr><td align=”left”></td>
<td>
<select name=”branch” id=”branch” style=”visibility:hidden”/>
<option></option>
<option>CALICUT</option>
<option>CORPORATE</option>
<option>KANNUR</option>
<option>KOCHI</option>
<option>KOTTAYAM</option>
<option>MALAPPURAM</option>
<option>THRISSUR</option>
<option>TRIVANDRUM</option>
<option>BANGALORE</option>
<option>MANGALORE</option>

</select>

</td>
<td align=”left”>Type:</td>
<td>
<select name=”type” id=”type” /><option></option><option>Intrastate</option><option>Import</option><option>Interstate</option></select>
</td>

</tr>

<tr><td height=”30″></td></tr>
</table>

<center>

<input style=”margin-right: 10px;” type=”button” id=”Save” value=”Save” /><input id=”Cancel” type=”button” value=”Cancel” />

</center>
</div>
<br />
<br />
<?php

//echo form_close();

?>
</div>
–>

[Peter StoevKeymaster]

For Numeric Filtering and Filtering using the Filter Row, check out this demo: filterrow.htm.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[Author]

Posts