jQWidgets Forums

Tagged: grid multi-line column headers stacked columns

This topic contains 11 replies, has 5 voices, and was last updated by Priya 11 years, 9 months ago.

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

Author

Status of "Stacked Columns" aka Multi-line Columns Posts

August 15, 2013 at 4:33 pm Status of "Stacked Columns" aka Multi-line Columns #26900

Participant

In this post: http://www.jqwidgets.com/community/topic/multi-line-mult-column-header/ you referred the poster to the roadmap for information on when multi-line columns would be available. Looking at the roadmap today (http://www.jqwidgets.com/roadmap/), it appears that stacked columns were/are scheduled for July 2013. Can someone provide an update as to where this functionality is at? We require it for a project, and if it’s going to be released in the next month or so I won’t waste any time on work-arounds.

Thank you.

August 16, 2013 at 8:03 am Status of "Stacked Columns" aka Multi-line Columns #26942

admin

Keymaster

Hi shimmoril,

The feature is available in ver. 3.0.

August 16, 2013 at 1:34 pm Status of "Stacked Columns" aka Multi-line Columns #26977

shimmoril

Participant

Looks good, thanks.

August 16, 2013 at 2:39 pm Status of "Stacked Columns" aka Multi-line Columns #26981

shimmoril

Participant

I’ve updated to version 3 and I’m trying to implement the column groups on my grid. I keep getting the following error: “Error: jqxGrid: Column Groups initialization Error. Please, check the initialization of the jqxGrid’s columns array. The columns in a column group are expected to be siblings in the columns array.”

Below is my grid code:

$("#grid").jqxGrid ({
	width: '100%', 
	source: dataAdapter, 
	theme: theme,
	altrows: true, 
	autoheight: true, 
	columnsresize: true,
	selectionmode: 'none', 
	sortable: true, 
	filterable: true, 
	enablebrowserselection: true,
	pageable: true,
	virtualmode: true,	
	rendergridrows: rendergridrows,	
	showdefaultloadelement: false,
	pagesize: 20, 
	pagesizeoptions: ['20', '50', '100', '200', '400'],
	columns: [
		{text: 'Group', datafield: 'Name', width: '30%'},
		{text: 'Status', datafield: 'Status', width: '10%'},
		{text: 'Course', datafield: 'Courses', width: '10%', cellsalign: 'right', filterable: false, sortable: false},
		{text: 'Users', datafield: 'Users', width: '8%', cellsalign: 'right', filterable: false, sortable: false},
		{text: 'Active', datafield: 'Active', width: '6%', cellsalign: 'right', filterable: false, sortable: false},
		{text: 'Warning', datafield: 'Warning', width: '6%', cellsalign: 'right', filterable: false, sortable: false},
		{text: 'Overdue', datafield: 'Overdue', width: '6%', cellsalign: 'right', filterable: false, sortable: false},
		{text: 'Completed', datafield: 'Completed', width: '6%', cellsalign: 'right',filterable: false, sortable: false},
		{text: 'Met', datafield: 'Met', width: '6%', cellsalign: 'right', columngroup: 'Certifications', filterable: false, sortable: false},
		{text: 'Warning', datafield: 'CertWarning', width: '6%', cellsalign: 'right', columngroup: 'Certifications', filterable: false, sortable: false},
		{text: 'Not Met', datafield: 'NotMet', width: '6%', cellsalign: 'right', columngroup: 'Certifications', filterable: false, sortable: false}
	], 
	columngroups: [
		{text: 'Certifications', align: 'center', name: 'Certifications'}
	],
	ready: function() {
		$('#groupsGrid').jqxGrid('content').unbind('selectstart.jqxgrid');
	}
});

Based on the error, it sounds like I’m doing something wrong in the columns specification, but I’m not sure what. It appears to match the example provided under demos.

For some reason, when I comment out the Completed column it works. There’s no difference in the Completed and Overdue columns, except for the title/datafield, but if Overdue is right next to the grouped columns it works fine.

August 16, 2013 at 4:34 pm Status of "Stacked Columns" aka Multi-line Columns #27004

shimmoril

Participant

Here’s a full working example, with XML.

XML:

<Groups>		
			
	<Group>
		<ID>1240</ID>
		<Name><![CDATA[Added From Dashboard]]></Name>
		<Status><![CDATA[Active]]></Status>
		<Courses>0</Courses>
		<Users>0</Users>	
		<Active>0</Active>
		<Warning>0</Warning>
		<Overdue>0</Overdue>
		<Completed>0</Completed>
		<CertMet>0</CertMet>
		<CertWarning>0</CertWarning>
		<CertNotMet>0</CertNotMet>
		<TotalRows>7</TotalRows>
	</Group>
	<Group>
		<ID>1241</ID>
		<Name><![CDATA[Added From Dashboard 2]]></Name>
		<Status><![CDATA[Active]]></Status>
		<Courses>0</Courses>
		<Users>0</Users>	
		<Active>0</Active>
		<Warning>0</Warning>
		<Overdue>0</Overdue>
		<Completed>0</Completed>
		<CertMet>0</CertMet>
		<CertWarning>0</CertWarning>
		<CertNotMet>0</CertNotMet>
		<TotalRows>7</TotalRows>
	</Group>
	<Group>
		<ID>1238</ID>
		<Name><![CDATA[Cuarto Proyecto]]></Name>
		<Status><![CDATA[Active]]></Status>
		<Courses>3</Courses>
		<Users>4</Users>	
		<Active>0</Active>
		<Warning>0</Warning>
		<Overdue>0</Overdue>
		<Completed>0</Completed>
		<CertMet>0</CertMet>
		<CertWarning>0</CertWarning>
		<CertNotMet>0</CertNotMet>
		<TotalRows>7</TotalRows>
	</Group>
	<Group>
		<ID>1022</ID>
		<Name><![CDATA[Primer Proyecto]]></Name>
		<Status><![CDATA[Active]]></Status>
		<Courses>2</Courses>
		<Users>3</Users>	
		<Active>0</Active>
		<Warning>0</Warning>
		<Overdue>0</Overdue>
		<Completed>0</Completed>
		<CertMet>0</CertMet>
		<CertWarning>0</CertWarning>
		<CertNotMet>0</CertNotMet>
		<TotalRows>7</TotalRows>
	</Group>
	<Group>
		<ID>1239</ID>
		<Name><![CDATA[Quinto Proyecto]]></Name>
		<Status><![CDATA[Active]]></Status>
		<Courses>2</Courses>
		<Users>2</Users>	
		<Active>0</Active>
		<Warning>0</Warning>
		<Overdue>0</Overdue>
		<Completed>0</Completed>
		<CertMet>0</CertMet>
		<CertWarning>0</CertWarning>
		<CertNotMet>0</CertNotMet>
		<TotalRows>7</TotalRows>
	</Group>
	<Group>
		<ID>1236</ID>
		<Name><![CDATA[Segundo Proyecto]]></Name>
		<Status><![CDATA[Active]]></Status>
		<Courses>2</Courses>
		<Users>3</Users>	
		<Active>0</Active>
		<Warning>0</Warning>
		<Overdue>0</Overdue>
		<Completed>0</Completed>
		<CertMet>0</CertMet>
		<CertWarning>0</CertWarning>
		<CertNotMet>0</CertNotMet>
		<TotalRows>7</TotalRows>
	</Group>
	<Group>
		<ID>1237</ID>
		<Name><![CDATA[Tercer Proyecto]]></Name>
		<Status><![CDATA[Active]]></Status>
		<Courses>2</Courses>
		<Users>3</Users>	
		<Active>0</Active>
		<Warning>0</Warning>
		<Overdue>0</Overdue>
		<Completed>0</Completed>
		<CertMet>0</CertMet>
		<CertWarning>0</CertWarning>
		<CertNotMet>0</CertNotMet>
		<TotalRows>7</TotalRows>
	</Group>
</Groups>

Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>This demo illustrates the basic functionality of the Grid plugin. The jQWidgets Grid plugin offers rich support for interacting with data, including paging, grouping and sorting. 
    </title>
    <link rel="stylesheet" href="/javascript/jqwidgets/3.0.0/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="/javascript/jquery.current.min.js"></script>
    <script type="text/javascript" src="/javascript/jqwidgets/3.0.0/jqxcore.js"></script>
    <script type="text/javascript" src="/javascript/jqwidgets/3.0.0/jqxdata.js"></script> 
    <script type="text/javascript" src="/javascript/jqwidgets/3.0.0/jqxbuttons.js"></script>
    <script type="text/javascript" src="/javascript/jqwidgets/3.0.0/jqxscrollbar.js"></script>
    <script type="text/javascript" src="/javascript/jqwidgets/3.0.0/jqxmenu.js"></script>
    <script type="text/javascript" src="/javascript/jqwidgets/3.0.0/jqxcheckbox.js"></script>
    <script type="text/javascript" src="/javascript/jqwidgets/3.0.0/jqxlistbox.js"></script>
    <script type="text/javascript" src="/javascript/jqwidgets/3.0.0/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="/javascript/jqwidgets/3.0.0/jqxgrid.js"></script>
    <script type="text/javascript" src="/javascript/jqwidgets/3.0.0/jqxgrid.sort.js"></script> 
    <script type="text/javascript" src="/javascript/jqwidgets/3.0.0/jqxgrid.pager.js"></script> 
    <script type="text/javascript" src="/javascript/jqwidgets/3.0.0/jqxgrid.selection.js"></script> 
    <script type="text/javascript" src="/javascript/jqwidgets/3.0.0/jqxgrid.edit.js"></script>
	<script type="text/javascript" src="/javascript/jqwidgets/3.0.0/jqxgrid.filter.js"></script>
	<script type="text/javascript" src="/javascript/jqwidgets/3.0.0/jqxgrid.columnsresize.js"></script>
	<script type="text/javascript" src="/javascript/jqwidgets/3.0.0/jqxgrid.columnsreorder.js"></script>  
    <script type="text/javascript" src="/javascript/jqwidgets/3.0.0/scripts/gettheme.js"></script>
	
	<script type="text/javascript" src="/javascript/jqueryui/1.10.0/js/jquery-ui.custom.min.js"></script>
	
	<link rel="stylesheet" href="/javascript/jqueryui/1.10.0/css/ui-lightness/jquery-ui-1.10.0.custom.css" />
	<link rel="stylesheet" href="/user/includes/font-awesome/3.0.0/css/font-awesome.css" />
	
    <script type="text/javascript">
        $(document).ready(function () {
            var theme = 'defaultsmarteru';
			var url = '/javascript/jqwidgets/demos/sampledata/groupsdashboard.xml';
            
			var source = {
				cache: false,
				datatype: "xml", 
				datafields: [
					{name: 'ID', map: 'ID', type: 'number'},	
					{name: 'Name', map: 'Name', type: 'string'},
					{name: 'Status', map: 'Status', type: 'string'},
					{name: 'Courses', map: 'Courses', type: 'number'},
					{name: 'Users', map: 'Users', type: 'number'},
					{name: 'Active', map: 'Active', type: 'number'},
					{name: 'Warning', map: 'Warning', type: 'number'},
					{name: 'Overdue', map: 'Overdue', type: 'number'},
					{name: 'Completed', map: 'Completed', type: 'number'},
					{name: 'Met', map: 'CertMet', type: 'number'},
					{name: 'CertWarning', map: 'CertWarning', type: 'number'},
					{name: 'NotMet', map: 'CertNotMet', type: 'number'},
					{name: 'TotalRows', map: 'TotalRows', type: 'number'}
				], 
				root: "Groups", 
				record: "Group",
				id: 'ID', 
				url: url, 
				sort: function(params) { $("#groupsGrid").jqxGrid('updatebounddata'); },
				filter: function(params, data) { $("#groupsGrid").jqxGrid('updatebounddata'); },
				beforeprocessing: function (data) {
					var totalrows = $(data).find('TotalRows');
					if (totalrows.length==0){
						source.totalrecords = 0;
					}
					else {
						source.totalrecords = totalrows.first().text();
					}
				}						 
			};
          	
			var dataAdapter = new $.jqx.dataAdapter(source);
			
			var rendergridrows = function (params) { return dataAdapter.records; }
			
			var rcr_hidden = false;
			
            //create grid
			$("#groupsGrid").jqxGrid ({
				width: '100%', 
				source: dataAdapter, 
				theme: theme,
				altrows: true, 
				autoheight: true, 
				columnsresize: true,
				selectionmode: 'none', 
				sortable: true, 
				filterable: true, 
				enablebrowserselection: true,
				pageable: true,
				virtualmode: true,	
				rendergridrows: rendergridrows,	
				showdefaultloadelement: false,
				pagesize: 20, 
				pagesizeoptions: ['20', '50', '100', '200', '400'],
				columns: [
					{text: 'Group', datafield: 'Name', width: '30%'},
					{text: 'Status', datafield: 'Status', width: '10%'},
					{text: 'Courses', datafield: 'Courses', width: '10%', cellsalign: 'right', filterable: false, sortable: false},
					{text: 'Users', datafield: 'Users', width: '8%', cellsalign: 'right', filterable: false, sortable: false},
					{text: 'Active', datafield: 'Active', width: '6%', cellsalign: 'right', columngroup: 'Assignments', filterable: false, sortable: false},
					{text: 'Warning', datafield: 'Warning', width: '6%', cellsalign: 'right', columngroup: 'Assignments', filterable: false, sortable: false},
					{text: 'Overdue', datafield: 'Overdue', width: '6%', cellsalign: 'right', columngroup: 'Assignments', filterable: false, sortable: false},
					{text: 'Completed', datafield: 'Completed', width: '6%', cellsalign: 'right', columngroup: 'Assignments', filterable: false, sortable: false},
					{text: 'Met', datafield: 'Met', width: '6%', cellsalign: 'right', columngroup: 'Certifications', hidden: rcr_hidden, filterable: false, sortable: false},
					{text: 'Warning', datafield: 'CertWarning', width: '6%', cellsalign: 'right', columngroup: 'Certifications', hidden: rcr_hidden, filterable: false, sortable: false},
					{text: 'Not Met', datafield: 'NotMet', width: '6%', cellsalign: 'right', columngroup: 'Certifications', hidden: rcr_hidden, filterable: false, sortable: false}
				], 
				columngroups: [
					{text: 'Assignments', align: 'center', name: 'Assignments'},
					{text: 'Certifications', align: 'center', name: 'Certifications'}
				],
				ready: function() {
					$('#groupsGrid').jqxGrid('content').unbind('selectstart.jqxgrid');
				}
			});
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
        <div id="groupsGrid">
        </div>
     </div>
</body>
</html>

As provided, the code results in the column group siblings error. If you comment out/remove the Completed column, it works fine.

August 16, 2013 at 5:13 pm Status of "Stacked Columns" aka Multi-line Columns #27006

Peter Stoev

Keymaster

Hi shimmoril,

Could you please post your sample to support@jqwidgets.com? By doing that we will test it and if there’s an issue on our side, we will send you a link to a build.

Best Regards,
Peter Stoev

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

August 16, 2013 at 5:23 pm Status of "Stacked Columns" aka Multi-line Columns #27007

Greytrix

Participant

Hi Peter,

I am also facing same issue with my code then i have tried with your hierarchical sample. I have added 2 more column in your hierarchical code sample (without changing any other properties) and giving same error. May be this information can help you.

Awaiting for some work around from your side.

Regards,
Abdul

August 16, 2013 at 5:28 pm Status of "Stacked Columns" aka Multi-line Columns #27008

Peter Stoev

Keymaster

Hi Abdul,

That is actually not an issue. The Exception is raised by us on purpose during the Validation of your Grid settings. It is not possible to Group columns which are not siblings. In the shimmoril’s scenario, we will test and if our Validation is more stricter than necessary, we will update the build.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

August 16, 2013 at 6:20 pm Status of "Stacked Columns" aka Multi-line Columns #27009

shimmoril

Participant

Email sent to support.

August 29, 2013 at 11:49 am Status of "Stacked Columns" aka Multi-line Columns #27956

Priya

Member

Hello Shimmoril,

DId you fixed your issue..

Even I am getting the same issue…

If it is fixed for you could you please provide the solution for it..

Regards,
Priya.

August 29, 2013 at 11:52 am Status of "Stacked Columns" aka Multi-line Columns #27958

Peter Stoev

Keymaster

Hi Priya,

If your columns are initialized correctly, you will not experience any issue. Make sure your column groups are siblings. The issue in this topic is already resolved even in 3.0.1.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

August 29, 2013 at 12:17 pm Status of "Stacked Columns" aka Multi-line Columns #27961

Priya

Member

Hello Peter,

Thanks for your quick reply and time.

Will check my code…

Regards,
Priya.

Author

Posts

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

You must be logged in to reply to this topic.