jQWidgets Forums

Tagged: Double grid, groupable, jqxgrid

This topic contains 8 replies, has 2 voices, and was last updated by vtavakkoli 12 years, 1 month ago.

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

Author

Using two grid with grouping feature is not possible Posts

March 25, 2013 at 2:03 pm Using two grid with grouping feature is not possible #17952

vtavakkoli

Member

I’m using two grids on different tab pages :
like following schema

Events

Logs

table1

table2

and I create two different table on ‘table1’ and ‘table2’ with table1 “groupable: true”
everything is working fine but when I enable second table “groupable: true”
second table is not working and creating this error
“Uncaught TypeError: Cannot read property ‘cellsformat’ of null “

March 25, 2013 at 2:14 pm Using two grid with grouping feature is not possible #17958

vtavakkoli

Member

sample code

					<div id='Tabs' class='jqx-rc-all' style="border: none;">
								<ul id="unorderedList">
									<li style="margin-left: 40px;" >
										<div>
											
											<div class="tabHeader">
												<b><span class="tr-events">Events</span></b>
											</div>
										</div>
									</li>
									<li style="margin-left: 40px;" >
										<div>
											
											<div class="tabHeader">
												<b><span class="tr-logs">Logs</span></b>
											</div>
										</div>
									</li>
								</ul>
							<div class="advisor-tab ui-body-d">
								<div id="table1">table1</div>
							</div>
							<div class="advisor-tab ui-body-d">
								<div id="table2">table2</div>
							</div>
							
					</div>

March 25, 2013 at 3:04 pm Using two grid with grouping feature is not possible #17961

Peter Stoev

Keymaster

Hi vtavakkoli,

Here’s a working sample with 2 Grids with enabled grouping:

<!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/jqxgrid.js"></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.columnsreorder.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script> 
    <script type="text/javascript" src="../../scripts/gettheme.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var theme = getDemoTheme();
            var url = "../sampledata/customers.xml";
            // prepare the data
            var source =
            {
                datatype: "xml",
                datafields: [
                    { name: 'CompanyName', map: 'm\\:properties>d\\:CompanyName', type: 'string' },
                    { name: 'ContactName', map: 'm\\:properties>d\\:ContactName', type: 'string' },
                    { name: 'ContactTitle', map: 'm\\:properties>d\\:ContactTitle', type: 'string' },
                    { name: 'City', map: 'm\\:properties>d\\:City', type: 'string' },
                    { name: 'PostalCode', map: 'm\\:properties>d\\:PostalCode', type: 'string' },
                    { name: 'Country', map: 'm\\:properties>d\\:Country', type: 'string' }
                ],
                root: "entry",
                record: "content",
                id: 'm\\:properties>d\\:CustomerID',
                url: url
            };
            var dataAdapter = new $.jqx.dataAdapter(source);
            // Create jqxGrid
            $("#jqxgrid").jqxGrid(
            {
                width: 600,
                source: dataAdapter,
                groupable: true,
                theme: theme,
                columns: [
                  { text: 'Company Name', datafield: 'CompanyName', width: 250, aggregates: ['count'] },
                  { text: 'City', datafield: 'City', width: 120, aggregates: ['count'] },
                  { text: 'Country', datafield: 'Country', aggregates: ['count'] }
                ],
                groups: ['City']
            });
            var dataAdapter2 = new $.jqx.dataAdapter(source);
            // Create jqxGrid
            $("#jqxgrid2").jqxGrid(
            {
                width: 600,
                source: dataAdapter2,
                groupable: true,
                theme: theme,
                columns: [
                  { text: 'Company Name', datafield: 'CompanyName', width: 250, aggregates: ['count'] },
                  { text: 'City', datafield: 'City', width: 120, aggregates: ['count'] },
                  { text: 'Country', datafield: 'Country', aggregates: ['count'] }
                ],
                groups: ['City']
            });
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
        <div id="jqxgrid">
        </div>
        <div id="jqxgrid2">
        </div>
      
    </div>
</body>
</html>

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

March 26, 2013 at 7:13 am Using two grid with grouping feature is not possible #18012

vtavakkoli

Member

Thanks for reply
but it is not working
same error happened . please see following example,
without grouping code is working fine.also if you enable grouping without default group “groups: [‘Category’]” error will not happened.
with best regards,
Vahid
Error message :ncaught TypeError: Cannot read property ‘cellsformat’ of null

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="./js/jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="./js/jquery.min.js"></script>
    <script type="text/javascript" src="./js/jqwidgets/jqx-all.js"></script>
    <script type="text/javascript" src="./js/seso_ui_functions.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var theme = getTheme();
            var source_eve = {
        			datatype : "json",
        			datafields : [ {
        				name : 'EventId',
        				type:'number'
        			}, {
        				name : 'Category',
        				type:'string'
        			}, {
        				name : 'State',
        				type:'string'
        			}, {
        				name : 'Description',
        				type:'string'
        			}],
        			id:'EventId',
        			
        			url : 'ajax/events.php?info=vulscan'
        		};
        	var dataAdapter_eve = new $.jqx.dataAdapter(source_eve);
       	
        	$('#event-table').jqxGrid({
        		width : 600,
        		source : dataAdapter_eve,
        		theme : theme,
        		groupable: true,
        		columns : [ {
        			text : 'State',
        			datafield : 'State',
        			width : '30%'
        		}, {
        			text : 'Description',
        			datafield : 'Description',
        			width : '50%'
        		} , {
        			text : 'Category',
        			datafield : 'Category',
        			width : '20%'
        		} ],
        		groups: ['Source']
        	});
        	var source_log = {
        			datatype : "json",
        			datafields : [ {
        				name : 'EventId',
        				type:'number'
        			}, {
        				name : 'Category',
        				type:'string'
        			}, {
        				name : 'State',
        				type:'string'
        			}, {
        				name : 'Description',
        				type:'string'
        			}],
        			id:'EventId',
        			url : 'ajax/events.php?info=victims'
        		};
        	var dataAdapter_log = new $.jqx.dataAdapter(source_log);
       	
        	$('#log-table').jqxGrid({
        		width : 600,
        		source : dataAdapter_log,
        		theme : theme,
        		groupable: true,
        		columns : [ {
        			text : 'State',
        			datafield : 'State',
        			width : '30%'
        		}, {
        			text : 'Description',
        			datafield : 'Description',
        			width : '50%'
        		} , {
        			text : 'Category',
        			datafield : 'Category',
        			width : '20%'
        		} ],
        		groups: ['Category']
        	});
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
        <div id="event-table">
        </div>
        <div id="log-table">
        </div>
      
    </div>
</body>
</html>

March 26, 2013 at 7:23 am Using two grid with grouping feature is not possible #18017

Peter Stoev

Keymaster

Hi,

In your code, you call a function “getTheme”. “getTheme” was replaced with getDemoTheme in ver 2.7. The current version is 2.8. Which version of jQWidgets do you use? Did you try my code?

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

March 26, 2013 at 8:08 am Using two grid with grouping feature is not possible #18020

vtavakkoli

Member

Hi,
I’m using version 2.6 , changing code to version 2.8 version has problems as in newer version tree structure is not working like previous versions.Also I create sample code from your source as my original code is much larger than this one.
Anyway I download you latest plugin code 2.8 with following changes and it is not working :

    <link rel="stylesheet" href="./js/jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="./js/jquery.min.js"></script>
    <script type="text/javascript" src="./js/jqwidgets-ver2.8/jqwidgets/jqx-all.js"></script>
    <script type="text/javascript" src="./js/seso_ui_functions.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var theme = getDemoTheme();

may be the problem is null values in json data .
with best regards,
Vahid

March 26, 2013 at 8:26 am Using two grid with grouping feature is not possible #18023

Peter Stoev

Keymaster

Hi Vahid,

I see only one possible option here due to the fact that we are unable to reproduce your issue:

Please, send us a complete sample which demonstrates your issue i.e HTML page including sample data loaded in the Grid. We need such thing as it will reproduce your specific scenario. You can send it either here or to support@jqwidgets.com

The Grouping in ver. 2.8 is changed. The group column is now pinned by default. That is the only change.

In addition, in your first Grid, you try to group by a column that does not exist in the Grid. I believe that causes the issue on your side, not the 2 Grids.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

March 26, 2013 at 9:19 am Using two grid with grouping feature is not possible #18027

vtavakkoli

Member

Hi Peter,
Thanks yes it is mistake in here not in original as I remove additional fields,
I will try provide better sample with php code .
regards,
Vahid

March 26, 2013 at 9:40 am Using two grid with grouping feature is not possible #18028

vtavakkoli

Member

Thanks it is solved

Author

Posts

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

You must be logged in to reply to this topic.