jQWidgets Forums
jQuery UI Widgets › Forums › Grid › Strange grid filtering problem (tabs+grids)
Tagged: grid filtering tabs addfilter
This topic contains 2 replies, has 2 voices, and was last updated by fdski 10 years, 9 months ago.
-
Author
-
Example code: (sorry for different pathing)
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title id='Description'></title> <link href="jqwidgets/styles/jqx.base.css" rel="stylesheet" type="text/css"/> <link href="jqwidgets/styles/jqx.metro.css" rel="stylesheet" type="text/css"/> <script src="scripts/jquery-1.10.2.min.js" type="text/javascript"></script> <script src="jqwidgets/jqxcore.js" type="text/javascript"></script> <script src="jqwidgets/jqxdata.js"type="text/javascript" ></script> <script src="jqwidgets/jqxbuttons.js" type="text/javascript"></script> <script src="jqwidgets/jqxscrollbar.js" type="text/javascript"></script> <script src="jqwidgets/jqxsplitter.js" type="text/javascript"></script> <script src="jqwidgets/jqxtabs.js" type="text/javascript"></script> <script src="jqwidgets/jqxmenu.js"type="text/javascript" ></script> <script src="jqwidgets/jqxpanel.js" type="text/javascript"></script> <script src="jqwidgets/jqxmenu.js" type="text/javascript"></script> <script type="text/javascript" src="jqwidgets/jqxcheckbox.js"></script> <script type="text/javascript" src="jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="jqwidgets/jqxdropdownlist.js"></script> <script src="jqwidgets/jqxgrid.js"type="text/javascript" ></script> <script src="jqwidgets/jqxgrid.sort.js" type="text/javascript"></script> <script src="jqwidgets/jqxgrid.pager.js" type="text/javascript" ></script> <script src="jqwidgets/jqxgrid.selection.js"type="text/javascript" ></script> <script src="jqwidgets/jqxgrid.edit.js" type="text/javascript" ></script> <script src="jqwidgets/jqxgrid.filter.js" type="text/javascript" ></script> <script type="text/javascript" src="jqwidgets/jqxgrid.grouping.js"></script> <script type="text/javascript" src="jqwidgets/jqxgrid.aggregates.js"></script> <script type="text/javascript" src="jqwidgets/jqxgrid.columnsresize.js"></script> <script type="text/javascript" src="jqwidgets/jqxgrid.columnsreorder.js"></script> <script type="text/javascript" src="jqwidgets/jqxgrid.storage.js"></script> <script type="text/javascript"> $(document).ready(function () { function MakeGrid(number){ var url = "demos/sampledata/products.xml"; var source = { datatype: "xml", datafields: [ { name: 'ProductName', type: 'string' }, { name: 'QuantityPerUnit', type: 'int' }, { name: 'UnitPrice', type: 'float' }, { name: 'UnitsInStock', type: 'float' }, { name: 'Discontinued', type: 'bool' } ], root: "Products", record: "Product", id: 'ProductID', url: url }; var cellsrenderer = function (row, columnfield, value, defaulthtml, columnproperties, rowdata) { if (value < 20) { return '<span style="margin: 4px; float: ' + columnproperties.cellsalign + '; color: #ff0000;">' + value + '</span>'; } else { return '<span style="margin: 4px; float: ' + columnproperties.cellsalign + '; color: #008000;">' + value + '</span>'; } } var dataAdapter = new $.jqx.dataAdapter(source, { downloadComplete: function (data, status, xhr) { }, loadComplete: function (data) { }, loadError: function (xhr, status, error) { } }); // initialize jqxGrid $("#jqxgrid" + number).jqxGrid( { width: 850, source: dataAdapter, pageable: true, autoheight: true, showtoolbar: true, sortable: true, filtermode: 'default', filterable: true, altrows: true, enabletooltips: true, editable: true, selectionmode: 'multiplecellsadvanced', rendertoolbar: function (toolbar) { var container = $("<div style='overflow: hidden; position: relative; margin: 1px;'></div>"); var addFilterTypeButton = $("<div style='float: left; margin-left: 5px;margin-top: 0px;' title='Typ filtra'><img src='images/search_lg.png' style='position: relative; margin-top: 2px;'/></div>"); var addFilterRowButton = $("<div style='float: left; margin-left: 5px;margin-top: 0px;' title='Typ filtra'><img src='images/card.png' style='position: relative; margin-top: 2px;'/></div>"); var addFilterByName = $("<div style='float: left; margin-left: 5px;margin-top: 0px;' title='Typ filtra'><img src='images/administrator.png' style='position: relative; margin-top: 2px;'/></div>"); toolbar.append(container); container.append(addFilterTypeButton); container.append(addFilterRowButton); container.append(addFilterByName); addFilterTypeButton.jqxButton({width: 20, height: 20 }); addFilterRowButton.jqxButton({width: 20, height: 20 }); addFilterByName.jqxButton({width: 20, height: 20 }); addFilterTypeButton.click(function(event){ if ($("#jqxgrid" + number).jqxGrid('filtermode')=='default'){ $("#jqxgrid" + number).jqxGrid({ filtermode: 'excel'}); }else{ $("#jqxgrid" + number).jqxGrid({ filtermode: 'default'}); } }); addFilterRowButton.click(function(event){ $("#jqxgrid" + number).jqxGrid({showfilterrow: (!$("#jqxgrid" + number).jqxGrid('showfilterrow'))}); }); //THIS IS AN EXAMPLE EVENT - THAT ACTIVATES A SECOND TAB AND TRIES TO FILTER BY PRESET NAME - works only from tab1 to tab2. addFilterByName.click(function(event){ $("#jqxTabs1").jqxTabs('select', 1); $("#jqxgrid2").jqxGrid('clearfilters', false); //clear existing filters do not refresh var filtergroup = new $.jqx.filter(); var filtercondition = 'equal'; var filter_or_operator = 0; var filtervalue = "Chef Anton's Cajun Seasoning"; var filter = filtergroup.createfilter('stringfilter',filtervalue , filtercondition); filtergroup.addfilter(filter_or_operator, filter); $("#jqxgrid2").jqxGrid('addfilter', 'ProductName', filtergroup, true); }); }, columns: [ { text: 'Product Name', columngroup: 'ProductDetails', datafield: 'ProductName', width: 250 }, { text: 'Quantity per Unit', columngroup: 'ProductDetails', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 }, { text: 'Unit Price', columngroup: 'ProductDetails', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 }, { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', cellsrenderer: cellsrenderer, width: 100 }, { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' } ], columngroups: [ { text: 'Product Details', align: 'center', name: 'ProductDetails' } ] }); } $('#jqxTabs1').jqxTabs({ width: '100%', height: '100%', position: 'top'}); MakeGrid(1); MakeGrid(2); }); </script> <style type="text/css"> html, body { height: 100%; width: 100%; margin: 0px; padding: 0px; overflow: hidden; } </style> </head> <body class='default'> <div id="jqxTabs1"> <ul> <li>Grid1</li> <li>Grid2</li> </ul> <div id="tab1"> <div id="jqxgrid1"></div> </div> <div id="tab2"> <div id="jqxgrid2"></div> </div> </div> </div> </body> </html>
There are two tabs, one grid on each. Grids are essencially the same.
First two buttons change the filtermode and show filterbar
Third button shows the problem.
Third button (on tab 1) is supposed to switch to tab2 and apply filter for particular value.
Code for filtering based on examples in the demo.If you click the “guy” button right way, console will give “length” error – which probably relates to grid2 not being initialized at this point (just thinking outloud)
If first you click tab2 and go back to tab1 – length error will not occur.
Neither will it occur on second click ( since switching tabs is first action).Any ideas how to get rid of length error ?
( writing this up i found another thing that wasn’t working right for me:
I had var filtercondition = ‘equals’;
I didn’t get an error – just very strange and inconsitant behaviour from filters. Changing to “equal” made it work fine. But there was no error – maybe you could add something like error or warning when wrong enum is selected_ ?Thanks,
fdHi fd,
1. To use widgets within Tabs, the approach is through initTabContent: http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxtabs/integration.htm?arctic
2. A Grid is created when a Grid is displayed for first time. This means that you cannot use the Grid’s API until the Grid is created. Otherwise, you will get errors due to the incorrect usage.
3. There’s no filter condition called “equals”. It is “equal” as you can learn from the documentation: http://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxgrid/jquery-grid-filtering.htmBest Regards,
Peter StoevjQWidgets Team
http://www.jqwidgets.comHi Peter, thanks for the answer.
1. Thanks, I’ll read up
2. ok, i’ll play around with it. I thought that if I select a tab that it will initialize other widgets on it. I guess it goes back to point 1.
3. I know. It was a typo, stupid one at that, but it took me a while to find it. There is no error catching if filtercondition is invalid, maybe you could add one for disletic types like myselfCheers,
fd
-
AuthorPosts
You must be logged in to reply to this topic.