jQWidgets Forums

jQuery UI Widgets Forums Grid Strange grid filtering problem (tabs+grids)

This topic contains 2 replies, has 2 voices, and was last updated by  fdski 10 years, 9 months ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author

  • fdski
    Participant

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


    Peter Stoev
    Keymaster

    Hi 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.htm

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com


    fdski
    Participant

    Hi 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 myself 🙂

    Cheers,

    fd

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

You must be logged in to reply to this topic.