jQuery UI Widgets › Forums › Grid › Custom FIlter and Cellsrenderer
Tagged: cellsrenderer, filter, jqxGrid ;
This topic contains 4 replies, has 2 voices, and was last updated by Stanislav 6 years, 8 months ago.
-
Author
-
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,
SatchHello Satch,
Can you please provide us with an example?
We would greatly appreciate it!Best Regards,
StanislavjQWidgets Team
http://www.jqwidgets.com/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>
I just found this post regarding the same issue.
LinkI’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,
SatchHello Satch,
Thanks for the update.
Best Regards,
StanislavjQWidgets Team
http://www.jqwidgets.com/ -
AuthorPosts
You must be logged in to reply to this topic.