jQuery UI Widgets Forums Grid Custom FIlter and Cellsrenderer

This topic contains 4 replies, has 2 voices, and was last updated by  Stanislav 6 years, 8 months ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
  • Custom FIlter and Cellsrenderer #98738

    Satch
    Participant

    Hi,
    I have a simple grid where I use Cellsrenderer to change the color of the cell text.
    When I apply a custom filter to that column, it does not see any of the cell values.

    If I remove the Cellsrenderer, the custom filter works. I also tried showing the filter row and using the built in filtertype but that does not see the cell values either.

    Any ideas on how to have cellsrenderer work with a custom filter?

    Thanks,
    Satch

    Custom FIlter and Cellsrenderer #98748

    Stanislav
    Participant

    Hello Satch,

    Can you please provide us with an example?
    We would greatly appreciate it!

    Best Regards,
    Stanislav

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

    Custom FIlter and Cellsrenderer #98825

    Satch
    Participant

    Hi Stanislav,

    Thanks for getting back to me. I believe my actual issue is that the cellsrenderer value is visible in the grid but not seen when a filter is applied.

    Below is an example where I have applied a custom filter looking for the word “TEST” and the grid has returned no matching rows even though I have set the value of the column to “TEST” using cellsrenderer.

    If you clear the filter on the “Follow Up Date” column, you can see the data is in the grid and was filtered out previously.

    Test Page

    <html >
        <head>
            <title>Test Page</title>
    
            <link rel="stylesheet" href="../jqwidgets/5.1.0/styles/jqx.base.css" type="text/css" />
            <link rel="stylesheet" href="../jqwidgets/5.1.0/styles/jqx.shinyblack.css" type="text/css" />
    
            <script type="text/javascript" src="../jqwidgets/jquery-1.11.2.min.js"></script>
    
            <script type="text/javascript" src="../jqwidgets/5.1.0/globalization/globalize.js"></script>
            <script type="text/javascript" src="../jqwidgets/5.1.0/globalization/globalize.culture.en-US.js"></script>
            <script type="text/javascript" src="../jqwidgets/5.1.0/jqx-all.js"></script>
            <script type="text/javascript">
                $(document).ready(function () {
                    createTestGrid();
                });
    
                function createTestGrid() {
    
                    testData = [{ "ln": "Doe", "fn": "John", "tDate": "12/3/2017", "fDate": "", "notes": "Blah blah" }, { "ln": "Brown", "fn": "Mike", "tDate": "1/4/2018", "fDate": "", "notes": "New record" }, { "ln": "Smith", "fn": "Tom", "tDate": "4/24/2018", "fDate": "2/21/2018", "notes": "WooHoo" }]
    
                    var testSource = {
                        datatype: "json",
                        localdata: testData,
                        datafields: [
                                { name: 'ln', type: 'string' },
                                { name: 'fn', type: 'string' },
                                { name: 'tDate', type: 'date' },
                                { name: 'fDate', type: 'string' },
                                { name: 'notes', type: 'string' }
                        ]
                    };
    
                    var testDataAdapter = new $.jqx.dataAdapter(testSource);
    
                    var testRender = function (row, columnfield, value, defaulthtml, columnproperties) {
                        if (value == "") {
                            //Put word <TEST> in where no date value exists
                            return 'TEST';
                        } else {
                            return value;
                        } 
                    } 
    
                    $("#testGrid").jqxGrid({
                        width: '95%',
                        autoheight: true,
                        source: testDataAdapter,
                        sortable: false,
                        theme: "shinyblack",
                        columnsresize: true,
                        pageable: true,
                        pagesize: 5,
                        showfilterrow: false,
                        filterable: true,
                        columns: [
                            { text: 'Lastname', datafield: 'ln', width: 100 },
                            { text: 'Firstname', datafield: 'fn', width: 100 },
                            { text: 'Test Date', datafield: 'tDate', width: 100, filtertype: 'date', cellsformat: 'MM/dd/yyyy' },
                            { text: 'Follow Up Date', datafield: 'fDate', width: 120,  cellsrenderer: testRender },
                            { text: 'Notes', datafield: 'notes'}
                        ]
                    });
    
                    addFilter()
    
                }
    
                function addFilter() {
                    var myFiltergroup = new $.jqx.filter();
                    //add filter to <Follow Up Date column> looking for the word TEST
                    var myFilter = myFiltergroup.createfilter('stringfilter', 'TEST', 'CONTAINS');
                    myFiltergroup.addfilter(0, myFilter);
                    $('#testGrid').jqxGrid('addfilter', 'fDate', myFiltergroup, true);
                }
            </script>
        </head>
    
        <body>
            <div id="testGrid"></div>
        </body>
    </html>
    Custom FIlter and Cellsrenderer #98828

    Satch
    Participant

    I just found this post regarding the same issue.
    Link

    I’ll do the modifications on the data server side so they appear in the results from the datasource since the filtering takes place on the datasource not the visible data in the grid. Really need to do this anyways since the export grid wouldn’t show the cell changes in the data either.

    Thanks,
    Satch

    Custom FIlter and Cellsrenderer #98841

    Stanislav
    Participant

    Hello Satch,

    Thanks for the update.

    Best Regards,
    Stanislav

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

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

You must be logged in to reply to this topic.