jQuery UI Widgets Forums Grid Filtering the data

This topic contains 1 reply, has 2 voices, and was last updated by  Dimitar 8 years, 6 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • Filtering the data #78873

    Venki7092
    Participant

    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 filtered

    Here 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″}]

    Filtering the data #78904

    Dimitar
    Participant

    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,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.