jQWidgets Forums

jQuery UI Widgets › Forums › Grid › Nested grid with row filtering

Tagged: , , ,

This topic contains 2 replies, has 2 voices, and was last updated by  Sanatan 12 years ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Nested grid with row filtering Posts
  • April 27, 2013 at 6:16 am Nested grid with row filtering #20119

    Sanatan
    Participant

    I am trying to incorporate a Filterbar to the main data using:

    showfilterrow: true, filterable: true,

    But nothing …

    Is it possible ???

    April 29, 2013 at 10:07 am Nested grid with row filtering #20203

    Dimitar
    Participant

    Hello Sanatan,

    Yes, it is possible. You may have not included some of the required JavaScript files in your solution. Here is a working example, based on the demo Nested Grids (using jQWidgets version 2.8.2):

    <!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.8.3.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/jqxlistbox.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxgrid.filter.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxgrid.sort.js"></script>
        <script type="text/javascript" src="../../scripts/gettheme.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                var theme = getDemoTheme();
                var url = "../sampledata/employees.xml";
                var source =
                {
                    datafields: [
                        { name: 'FirstName' },
                        { name: 'LastName' },
                        { name: 'Title' },
                        { name: 'Address' },
                        { name: 'City' }
                    ],
                    root: "Employees",
                    record: "Employee",
                    id: 'EmployeeID',
                    datatype: "xml",
                    async: false,
                    url: url
                };
                var employeesAdapter = new $.jqx.dataAdapter(source);
                var orderdetailsurl = "../sampledata/orderdetails.xml";
                var ordersSource =
                {
                    datafields: [
                        { name: 'EmployeeID' },
                        { name: 'ShipName' },
                        { name: 'ShipAddress' },
                        { name: 'ShipCity' },
                        { name: 'ShipCountry' },
                        { name: 'ShippedDate', type: 'date' }
                    ],
                    root: "Orders",
                    record: "Order",
                    datatype: "xml",
                    url: orderdetailsurl,
                    async: false
                };
                var ordersDataAdapter = new $.jqx.dataAdapter(ordersSource, { autoBind: true });
                orders = ordersDataAdapter.records;
                // create nested grid.
                var initrowdetails = function (index, parentElement, gridElement, record) {
                    var id = record.uid.toString();
                    var grid = $($(parentElement).children()[0]);
                    var filtergroup = new $.jqx.filter();
                    var filter_or_operator = 1;
                    var filtervalue = id;
                    var filtercondition = 'equal';
                    var filter = filtergroup.createfilter('stringfilter', filtervalue, filtercondition);
                    // fill the orders depending on the id.
                    var ordersbyid = [];
                    for (var m = 0; m < orders.length; m++) {
                        var result = filter.evaluate(orders[m]["EmployeeID"]);
                        if (result)
                            ordersbyid.push(orders[m]);
                    }
                    var orderssource = { datafields: [
                        { name: 'EmployeeID' },
                        { name: 'ShipName' },
                        { name: 'ShipAddress' },
                        { name: 'ShipCity' },
                        { name: 'ShipCountry' },
                        { name: 'ShippedDate' }
                    ],
                        id: 'OrderID',
                        localdata: ordersbyid
                    }
                    if (grid != null) {
                        grid.jqxGrid({ source: orderssource, theme: theme, width: 600, height: 200,
                            columns: [
                              { text: 'Ship Name', datafield: 'ShipName', width: 200 },
                              { text: 'Ship Address', datafield: 'ShipAddress', width: 200 },
                              { text: 'Ship City', datafield: 'ShipCity', width: 150 },
                              { text: 'Ship Country', datafield: 'ShipCountry', width: 150 },
                              { text: 'Shipped Date', datafield: 'ShippedDate', width: 200 }
                           ]
                        });
                    }
                }
                var photorenderer = function (row, column, value) {
                    var name = $('#jqxgrid').jqxGrid('getrowdata', row).FirstName;
                    var imgurl = '../../images/' + name.toLowerCase() + '.png';
                    var img = '<div style="background: white;"><img style="margin:2px; margin-left: 10px;" width="32" height="32" src="' + imgurl + '"></div>';
                    return img;
                }
                var renderer = function (row, column, value) {
                    return '<span style="margin-left: 4px; margin-top: 9px; float: left;">' + value + '</span>';
                }
                // creage jqxgrid
                $("#jqxgrid").jqxGrid(
                {
                    width: 670,
                    height: 365,
                    source: source,
                    theme: theme,
                    rowdetails: true,
                    rowsheight: 35,
                    filterable: true,
                    showfilterrow: true,
                    initrowdetails: initrowdetails,
                    rowdetailstemplate: { rowdetails: "<div id='grid' style='margin: 10px;'></div>", rowdetailsheight: 220, rowdetailshidden: true },
                    ready: function () {
                        $("#jqxgrid").jqxGrid('showrowdetails', 1);
                    },
                    columns: [
                          { text: 'Photo', width: 50, cellsrenderer: photorenderer },
                          { text: 'First Name', datafield: 'FirstName', width: 100, cellsrenderer: renderer },
                          { text: 'Last Name', datafield: 'LastName', width: 100, cellsrenderer: renderer },
                          { text: 'Title', datafield: 'Title', width: 180, cellsrenderer: renderer },
                          { text: 'Address', datafield: 'Address', width: 300, cellsrenderer: renderer },
                          { text: 'City', datafield: 'City', width: 170, cellsrenderer: renderer }
                      ]
                });
            });
        </script>
    </head>
    <body class='default'>
        <div id="jqxgrid">
        </div>
    </body>
    </html>

    Best Regards,
    Dimitar

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

    April 30, 2013 at 5:45 am Nested grid with row filtering #20293

    Sanatan
    Participant

    Thanks Dimitar….

    Things are working fine now …. but it works with xml only

    I tried implementing the same in “server_side_grid__with_nested_grids” …. No results..

    Then i came to understand the i need to put a filter function and put a filter query in data.php, so i copied the query form “server_side_grid_filtering_and_virtualscrolling” … still it doesnt work

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
        <link rel="stylesheet" href="../../jqwidgets/styles/jqx.classic.css" type="text/css" />
        <script type="text/javascript" src="../../scripts/jquery-1.8.3.min.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxcore.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/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="../../jqwidgets/jqxmenu.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxgrid.sort.js"></script>	
        <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxgrid.pager.js"></script>
        <script type="text/javascript" src="../../scripts/gettheme.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxgrid.filter.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                // prepare the data
                var source =
                {
                    datatype: "json",
                    datafields: [
                        { name: 'CustomerID'},
                        { name: 'CompanyName'},
                        { name: 'ContactName'},
                        { name: 'ContactTitle'},
                        { name: 'Address'},
                        { name: 'City'},
                    ],
    				id: 'CustomerID',
                    url: 'data.php',
    				root: 'Rows',
    				cache: false,
                    beforeprocessing: function (data) {
                        source.totalrecords = data[0].TotalRows;
                    },
    				sort: function()
    				{
    					$("#jqxgrid").jqxGrid('updatebounddata', 'sort');
    				},				
    				filter: function()
    				{
    					// update the grid and send a request to the server.
    					$("#jqxgrid").jqxGrid('updatebounddata', 'filter');
    				}
                };
                var dataAdapter = new $.jqx.dataAdapter(source);
    			
                var initrowdetails = function (index, parentElement, gridElement) {      
    	    var row = index;
    	    var id = $("#jqxgrid").jqxGrid('getrowdata', row)['CustomerID'];
    	    var grid = $($(parentElement).children()[0]);
    	    var filtergroup = new $.jqx.filter();
                    var filter_or_operator = 1;
                    var filtervalue = id;
                    var filtercondition = 'equal';
                    var filter = filtergroup.createfilter('stringfilter', filtervalue, filtercondition);
                
    				var source =
    				{
    					url: 'data.php',
    					dataType: 'json',
    					data: {customerid: id},
    					datatype: "json",
    					cache: false,
    					datafields: [
    						 { name: 'ShippedDate' },
    						 { name: 'ShipName' },
    						 { name: 'ShipAddress' },
    						 { name: 'ShipCity' },
    						 { name: 'ShipCountry' }
    					],
    					root: 'Rows',
    					beforeprocessing: function (data) {
    						source.totalrecords = data[0].TotalRows;
    					},     
    					sort: function()
    					{
    						grid.jqxGrid('updatebounddata', 'sort');
    					},
    					filter: function()
    					{
    					// update the grid and send a request to the server.
    						grid.jqxGrid('updatebounddata', 'filter');
    					}
     				};
    				var adapter = new $.jqx.dataAdapter(source);
    				// init Orders Grid
    				grid.jqxGrid(
    				{
    					virtualmode: true,
    					showfilterrow: true,
    					filterable: true,
    					sortable: true,
    					height: 190,
    					width: 530,
    					pageable: true,
    					pagesize: 5,
    					source: adapter,
    					theme: 'classic',
    					rendergridrows: function (obj) {
    						return obj.data;
    					},
    					columns: [
    						  { text: 'Shipped Date', datafield: 'ShippedDate', cellsformat: 'd', width: 200 },
    						  { text: 'Ship Name', datafield: 'ShipName', width: 200 },
    						  { text: 'Address', datafield: 'ShipAddress', width: 180 },
    						  { text: 'City', datafield: 'ShipCity', width: 100 },
    						  { text: 'Country', datafield: 'ShipCountry', width: 140 }
    					  ]
    				});					
    			};
    			  
    			// set rows details.
                $("#jqxgrid").bind('bindingcomplete', function (event) {
                    if (event.target.id == "jqxgrid") {
                        $("#jqxgrid").jqxGrid('beginupdate');
                        var datainformation = $("#jqxgrid").jqxGrid('getdatainformation');
                        for (i = 0; i < datainformation.rowscount; i++) {
                            $("#jqxgrid").jqxGrid('setrowdetails', i, "<div id='grid" + i + "' style='margin: 10px;'></div>", 220, true);
                        }
                        $("#jqxgrid").jqxGrid('resumeupdate');
                    }
                });
    			
    			$("#jqxgrid").jqxGrid(
                {
                    source: dataAdapter,
                    theme: 'classic',
    				pageable: true,
    				sortable: true,
    				showfilterrow: true,
    				filterable: true,
    				autoheight: true,
                    virtualmode: true,
                    rowdetails: true,
                    initrowdetails: initrowdetails,
                    rendergridrows: function () {
                        return dataAdapter.records;
                    },				
                    columns: [
                      { text: 'Company Name', datafield: 'CompanyName', width: 250},
                      { text: 'ContactName', datafield: 'ContactName', width: 150 },
                      { text: 'Contact Title', datafield: 'ContactTitle', width: 180 },
                      { text: 'Address', datafield: 'Address', width: 200 },
                      { text: 'City', datafield: 'City', width: 120 }
                  ]
                });        	
            });
        </script>
    </head>
    <body class='default'>
       <div id="jqxgrid"></div>
    </body>
    </html>
  • Author
    Posts
Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.