jQuery UI Widgets › Forums › Grid › Filtering the data
Tagged: angular grid, createfilterwidget, datafield, displayfield, DropDownList, filter, grid, jquery grid, jqxgrid
This topic contains 1 reply, has 2 voices, and was last updated by Dimitar 9 years ago.
-
AuthorFiltering the data Posts
-
I am try to filter the data with help of other column here is code and json
in StCAD column i will have values like ‘c’,’i’,’s’
and in CAD column i will have values so i am coloring the cell with the help of STCAD
so when i am trying to filter the CAD column with selecting any option like Complete’, ‘Incomplete’, ‘Skipped’ it corseponding values like c,i,s should be filteredHere is the script
{
text: ‘CAD’, datafield: ‘StCAD’, displayfield: ‘CAD’, width: ‘4%’, filtertype: ‘checkedlist’, cellsalign: ‘center’, align: ‘center’, filteritems: [‘Complete’, ‘Incomplete’, ‘Skipped’], columntype: ‘textbox’,
cellsrenderer: function (row, cell, value) {
var tempValue = this.owner.source.records[row][cell]
if (tempValue === “I”) {
return ‘<div style=”background:#FFD1D1 ; overflow: hidden; text-overflow: ellipsis; padding-bottom: 2px; text-align: left; margin-right: 2px; margin-left: 4px; margin-top: 4px;”>’ + value + ‘</div>’
}
else if(tempValue === “S”)
{
return ‘<div style=”background:#84D5EC ; overflow: hidden; text-overflow: ellipsis; padding-bottom: 2px; text-align: left; margin-right: 2px; margin-left: 4px; margin-top: 4px;”>’ + value + ‘</div>’
}
else if (tempValue === “C”)
{
return ‘<div style=”background:#A9D10E ; overflow: hidden; text-overflow: ellipsis; padding-bottom: 2px; text-align: left; margin-right: 2px; margin-left: 4px; margin-top: 4px;”>’ + value + ‘</div>’
}
else
{
return ‘<div>’ + value + ‘</div>’
}},
//createfilterwidget: function (column, columnElement, widget) {
// widget.jqxDropDownList({ displayMember: “CAD”, valueMember: “CAD” });
//}
}Here is my json
[{“HICNO”:”HICN 1″,”FNAME”:”FNAME1″,”LNAME”:”LNAME1″,”Sex”:”1″,”DOB”:”\/Date(-760734000000)\/”,”CAD”:null,”StCAD”:”S”,”DM”:null,”StDM”:null,”HF”:null,”StHF”:null,”HTN”:240,”StHTN”:”S”,”IVD”:null,”StIVD”:”S”,”Prev5″:null,”StPrev5″:null,”Prev6″:129,”StPrev6″:”S”,”Prev7″:299,”StPrev7″:”S”,”Prev8″:297,”StPrev8″:”S”,”Prev9″:294,”StPrev9″:”S”,”Prev10″:null,”StPrev10″:”S”,”Prev11″:null,”StPrev11″:null,”Prev12″:null,”StPrev12″:”S”,”Care1″:null,”StCare1″:””,”Care2″:366,”StCare2″:”S”,”Prov_TIN”:”PTIN 9″},{“HICNO”:”HICN 10″,”FNAME”:”FNAME 10″,”LNAME”:”LNAME10″,”Sex”:”1″,”DOB”:”\/Date(-1058385600000)\/”,”CAD”:73,”StCAD”:”I”,”DM”:null,”StDM”:null,”HF”:null,”StHF”:null,”HTN”:191,”StHTN”:”S”,”IVD”:61,”StIVD”:”S”,”Prev5″:null,”StPrev5″:null,”Prev6″:null,”StPrev6″:null,”Prev7″:241,”StPrev7″:”S”,”Prev8″:244,”StPrev8″:”S”,”Prev9″:null,”StPrev9″:null,”Prev10″:254,”StPrev10″:””,”Prev11″:null,”StPrev11″:null,”Prev12″:247,”StPrev12″:””,”Care1″:null,”StCare1″:””,”Care2″:310,”StCare2″:”S”,”Prov_TIN”:”PTIN 18″}]Hello Venki7092,
Here is how to implement your requirement:
<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" /> <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.edit.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.aggregates.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.filter.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script> <script type="text/javascript" src="../../scripts/demos.js"></script> <script type="text/javascript" src="generatedata.js"></script> <script type="text/javascript"> $(document).ready(function () { // prepare the data var data = [{ "HICNO": "HICN 1", "FNAME": "FNAME1", "LNAME": "LNAME1", "Sex": "1", "DOB": "\/Date(-760734000000)\/", "CAD": null, "StCAD": "S", "DM": null, "StDM": null, "HF": null, "StHF": null, "HTN": 240, "StHTN": "S", "IVD": null, "StIVD": "S", "Prev5": null, "StPrev5": null, "Prev6": 129, "StPrev6": "S", "Prev7": 299, "StPrev7": "S", "Prev8": 297, "StPrev8": "S", "Prev9": 294, "StPrev9": "S", "Prev10": null, "StPrev10": "S", "Prev11": null, "StPrev11": null, "Prev12": null, "StPrev12": "S", "Care1": null, "StCare1": "", "Care2": 366, "StCare2": "S", "Prov_TIN": "PTIN 9" }, { "HICNO": "HICN 10", "FNAME": "FNAME 10", "LNAME": "LNAME10", "Sex": "1", "DOB": "\/Date(-1058385600000)\/", "CAD": 73, "StCAD": "I", "DM": null, "StDM": null, "HF": null, "StHF": null, "HTN": 191, "StHTN": "S", "IVD": 61, "StIVD": "S", "Prev5": null, "StPrev5": null, "Prev6": null, "StPrev6": null, "Prev7": 241, "StPrev7": "S", "Prev8": 244, "StPrev8": "S", "Prev9": null, "StPrev9": null, "Prev10": 254, "StPrev10": "", "Prev11": null, "StPrev11": null, "Prev12": 247, "StPrev12": "", "Care1": null, "StCare1": "", "Care2": 310, "StCare2": "S", "Prov_TIN": "PTIN 18" }] var source = { localdata: data, datatype: "array", datafields: [ { name: 'CAD', type: 'string' }, { name: 'StCAD', type: 'string' } ], updaterow: function (rowid, rowdata) { // synchronize with the server - send update command } }; var dataAdapter = new $.jqx.dataAdapter(source); // initialize jqxGrid $("#jqxgrid").jqxGrid( { width: 350, autoheight: true, source: dataAdapter, filterable: true, showfilterrow: true, columns: [{ width: 350, text: 'CAD', datafield: 'StCAD', filtertype: 'checkedlist', cellsalign: 'center', align: 'center', columntype: 'textbox', cellsrenderer: function (row, cell, value) { var CAD = this.owner.source.records[row]['CAD']; if (CAD === null) { CAD = ''; } if (value === "I") { return '<div style="background:#FFD1D1 ; overflow: hidden; text-overflow: ellipsis; padding-bottom: 2px; text-align: left; margin-right: 2px; margin-left: 4px; margin-top: 4px;">' + CAD + '</div>' } else if (value === "S") { return '<div style="background:#84D5EC ; overflow: hidden; text-overflow: ellipsis; padding-bottom: 2px; text-align: left; margin-right: 2px; margin-left: 4px; margin-top: 4px;">' + CAD + '</div>' } else if (value === "C") { return '<div style="background:#A9D10E ; overflow: hidden; text-overflow: ellipsis; padding-bottom: 2px; text-align: left; margin-right: 2px; margin-left: 4px; margin-top: 4px;">' + CAD + '</div>' } else { return '<div>' + CAD + '</div>' } }, createfilterwidget: function (column, columnElement, widget) { widget.jqxDropDownList({ source: ['C', 'I', 'S'], renderer: function (index, label, value) { switch (label) { case '(Select All)': return '(Select All)'; break; case 'C': return 'Complete'; break; case 'I': return 'Incomplete'; break; case 'S': return 'Skipped'; break; } } }); } }] }); }); </script> </head> <body class='default'> <div id='jqxWidget'> <div id="jqxgrid"> </div> </div> </body> </html>Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/ -
AuthorPosts
You must be logged in to reply to this topic.