jQWidgets Forums

jQuery UI Widgets › Forums › Grid › Stacked Column Header Overlapping Issue

Tagged: ,

This topic contains 1 reply, has 2 voices, and was last updated by  Peter Stoev 11 years, 5 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Stacked Column Header Overlapping Issue Posts
  • December 9, 2013 at 1:18 pm Stacked Column Header Overlapping Issue #46213

    Greytrix
    Participant

    Hi,

    We are using the stacked column feature of JQWidgets 3.0.2 with more than 55 columns, out of which first four columns are pinned, while scrolling the grid using horizontal scrollbar, we found that the headers of the stacked columns are getting overlapped on pinned columns.

    Below is the sample code…

    
<!DOCTYPE html>
<html lang="en">
<head>
	<link rel="stylesheet" href="jqwidgets302/jqwidgets/styles/jqx.base.css" type="text/css" />
	<script type="text/javascript" src="jqwidgets302/scripts/jquery-1.10.2.min.js"></script>    
	<script type="text/javascript" src="jqwidgets302/jqwidgets/jqxcore.js"></script>
	<script type="text/javascript" src="jqwidgets302/jqwidgets/jqxdata.js"></script>
	<script type="text/javascript" src="jqwidgets302/jqwidgets/jqxmenu.js"></script> 
	<script type="text/javascript" src="jqwidgets302/jqwidgets/jqxsplitter.js"></script> 
	<script type="text/javascript" src="jqwidgets302/jqwidgets/jqxbuttons.js"></script>
	<script type="text/javascript" src="jqwidgets302/jqwidgets/jqxlistbox.js"></script>
	<script type="text/javascript" src="jqwidgets302/jqwidgets/jqxtabs.js"></script>    
	<script type="text/javascript" src="jqwidgets302/jqwidgets/jqxscrollbar.js"></script>      
	<script type="text/javascript" src="jqwidgets302/jqwidgets/jqxgrid.js"></script>
	<script type="text/javascript" src="jqwidgets302/jqwidgets/jqxgrid.sort.js"></script>
	<script type="text/javascript" src="jqwidgets302/jqwidgets/jqxgrid.filter.js"></script>
	<script type="text/javascript" src="jqwidgets302/jqwidgets/jqxgrid.columnsresize.js"></script>
	<script type="text/javascript" src="jqwidgets302/jqwidgets/jqxgrid.columnsreorder.js"></script> 
	<script type="text/javascript" src="jqwidgets302/jqwidgets/jqxgrid.aggregates.js"></script> 
	<script type="text/javascript" src="jqwidgets302/jqwidgets/jqxgrid.pager.js"></script>
	<script type="text/javascript" src="jqwidgets302/jqwidgets/jqxgrid.edit.js"></script>
	<script type="text/javascript" src="jqwidgets302/jqwidgets/jqxgrid.selection.js"></script>
	<script type="text/javascript" src="jqwidgets302/jqwidgets/jqxpanel.js"></script> 
	<script type="text/javascript" src="jqwidgets302/jqwidgets/jqxdata.export.js"></script>
	<script type="text/javascript" src="jqwidgets302/jqwidgets/jqxgrid.export.js"></script>
	<script type="text/javascript" src="jqwidgets302/jqwidgets/jqxcheckbox.js"></script>
	<script type="text/javascript" src="jqwidgets302/jqwidgets/jqxdropdownlist.js"></script>
	<script type="text/javascript" src="jqwidgets302/jqwidgets/jqxcalendar.js"></script>    
	<script type="text/javascript" src="jqwidgets302/jqwidgets/jqxdatetimeinput.js"></script>
	<script type="text/javascript" src="jqwidgets302/jqwidgets/jqxradiobutton.js"></script>
	<script type="text/javascript" src="jqwidgets302/jqwidgets/jqxexpander.js"></script> 
	<script type="text/javascript" src="jqwidgets302/jqwidgets/jqxtooltip.js"></script> 
	<script type="text/javascript" src="jqwidgets302/jqwidgets/jqxvalidator.js"></script> 
	<script type="text/javascript" src="jqwidgets302/jqwidgets/jqxcombobox.js"></script> 
	<script type="text/javascript" src="jqwidgets302/jqwidgets/jqxnumberinput.js"></script> 
	<script type="text/javascript" src="jqwidgets302/jqwidgets/globalization/globalize.js"></script> 
	<script type="text/javascript" src="jqwidgets302/jqwidgets/jqxdropdownbutton.js"></script> 
	<script type="text/javascript" src="jqwidgets302/jqwidgets/jqxinput.js"></script>
	<script type="text/javascript" src="jqwidgets302/jqwidgets/jqxtree.js"></script> 
	<script type="text/javascript" src="jqwidgets302/jqwidgets/jqxwindow.js"></script>
	<script type="text/javascript" src="jqwidgets302/scripts/gettheme.js"></script>

	<style>
        .PurpleClass
        {
            background-color: rgb(204,192,218) !important;
        }
    </style>
	<script type="text/javascript">
		$(document).ready(function () {
			var theme = getDemoTheme();
			// prepare the data
			var source =
			{
				datatype: "xml",
				datafields: [
					 { name: 'SupplierName', type: 'string' },
					 { name: 'Quantity', type: 'number' },
					 { name: 'OrderDate', type: 'date' },
					 { name: 'OrderAddress', type: 'string' },
					 { name: 'Freight', type: 'number' },
					 { name: 'Price', type: 'number' },
					 { name: 'City', type: 'string' },
					 { name: 'ProductName', type: 'string' },
					 { name: 'Address', type: 'string' }
				], 
				url: '../sampledata/orderdetailsextended.xml',
				root: 'DATA',
				record: 'ROW'
			};
			var dataAdapter = new $.jqx.dataAdapter(source, {
				loadComplete: function () {
				}
			});
			// create jqxgrid.
			$("#jqxgrid").jqxGrid(
			{
				width: 690,
				source: dataAdapter,
				theme: theme,
				pageable: true,
				autorowheight: true,
				altrows: true,
				columnsresize: true,
				showfilterrow: true,
				filterable: true,
				showaggregates: true,
				showstatusbar: true,
				statusbarheight: 25,
				autoshowfiltericon: true,
				columns: [
				  { text: 'Supplier Name', cellsalign: 'center', align: 'center', datafield: 'SupplierName1', width: 60 ,pinned:true},
				  { text: 'Supplier Name', cellsalign: 'center', align: 'center', datafield: 'SupplierName2', width: 60  ,pinned:true},
				  { text: 'Supplier Name', cellsalign: 'center', align: 'center', datafield: 'SupplierName3', width:60  ,pinned:true},
				  { text: 'Supplier Name', cellsalign: 'center', align: 'center', datafield: 'SupplierName4', width: 60  ,pinned:true},
				  { text: 'Supplier Name', cellsalign: 'center', align: 'center', datafield: 'SupplierName5', width: 60 },
				  { text: 'Supplier Name', cellsalign: 'center', align: 'center', datafield: 'SupplierName6', width: 60 },
				  { text: 'Supplier Name', cellsalign: 'center', align: 'center', datafield: 'SupplierName7', width:60 },
				  { text: 'Supplier Name', cellsalign: 'center', align: 'center', datafield: 'SupplierName8', width: 60 },
				  { text: 'Supplier Name', cellsalign: 'center', align: 'center', datafield: 'SupplierName9', width: 60 },
				  { text: 'Supplier Name', cellsalign: 'center', align: 'center', datafield: 'SupplierName10', width: 60 },
				  { text: 'Supplier Name', cellsalign: 'center', align: 'center', datafield: 'SupplierName11', width: 60 },
				  { text: 'Supplier Name', cellsalign: 'center', align: 'center', datafield: 'SupplierName12', width: 60 },
				  { text: 'Supplier Name', cellsalign: 'center', align: 'center', datafield: 'SupplierName13', width: 60 },
				  { text: 'Supplier Name', cellsalign: 'center', align: 'center', datafield: 'SupplierName14',classname :'PurpleClass', width: 60 },
				  { text: 'Name', columngroup: 'ProductDetails', cellsalign: 'center', align: 'center', datafield: 'ProductName', width: 120 ,filtertype:'none'},
				  { text: 'Quantity', columngroup: 'ProductDetails', datafield: 'Quantity', cellsformat: 'd', cellsalign: 'center', align: 'center', width: 80 },
				  { text: 'Freight', columngroup: 'OrderDetails', datafield: 'Freight', cellsformat: 'd', cellsalign: 'center', align: 'center', width: 100 ,cellclassname :'PurpleClass'},
				  { text: 'Order Date', columngroup: 'OrderDetails', cellsalign: 'center', align: 'center', cellsformat: 'd', datafield: 'OrderDate', width: 100 },
				  { text: 'Order Address', columngroup: 'OrderDetails', cellsalign: 'center', align: 'center', datafield: 'OrderAddress', width: 100 ,cellclassname :'PurpleClass'},
				  { text: 'Order Address', columngroup: 'OrderDetails', cellsalign: 'center', align: 'center', datafield: 'OrderAddress1', width: 100 ,cellclassname :'PurpleClass'},
				  { text: 'Order Address', columngroup: 'OrderDetails', cellsalign: 'center', align: 'center', datafield: 'OrderAddress2', width: 100 ,cellclassname :'PurpleClass'},
				  { text: 'Order Address', columngroup: 'OrderDetails', cellsalign: 'center', align: 'center', datafield: 'OrderAddress3', width: 100 ,cellclassname :'PurpleClass'},
				  { text: 'Order Address', columngroup: 'OrderDetails', cellsalign: 'center', align: 'center', datafield: 'OrderAddress4', width: 100 ,cellclassname :'PurpleClass'},
				  { text: 'Order Address', columngroup: 'OrderDetails', cellsalign: 'center', align: 'center', datafield: 'OrderAddress5', width: 100 ,cellclassname :'PurpleClass'},
				  { text: 'Order Address', columngroup: 'OrderDetails', cellsalign: 'center', align: 'center', datafield: 'OrderAddress6', width: 100 ,cellclassname :'PurpleClass'},
				  { text: 'Order Address', columngroup: 'OrderDetails', cellsalign: 'center', align: 'center', datafield: 'OrderAddress7', width: 100 ,cellclassname :'PurpleClass'},
				  { text: 'Order Address', columngroup: 'OrderDetails', cellsalign: 'center', align: 'center', datafield: 'OrderAddress8', width: 100 ,cellclassname :'PurpleClass'},
				  { text: 'Order Address', columngroup: 'OrderDetails', cellsalign: 'center', align: 'center', datafield: 'OrderAddress9', width: 100 ,cellclassname :'PurpleClass'},
				  { text: 'Order Address', columngroup: 'OrderDetails', cellsalign: 'center', align: 'center', datafield: 'OrderAddress10', width: 100 ,cellclassname :'PurpleClass'},
				  { text: 'Order Address', columngroup: 'OrderDetails', cellsalign: 'center', align: 'center', datafield: 'OrderAddress11', width: 100 ,cellclassname :'PurpleClass'},
				  { text: 'Order Address', columngroup: 'OrderDetails', cellsalign: 'center', align: 'center', datafield: 'OrderAddress12', width: 100 ,cellclassname :'PurpleClass'},
				  { text: 'Price', columngroup: 'ProductDetails', datafield: 'Price', cellsformat: 'c2', align: 'center', cellsalign: 'center', width: 70 },
				  { text: 'Address', columngroup: 'Location', cellsalign: 'center', align: 'center', datafield: 'Address', width: 120 ,cellclassname :'PurpleClass'},
				  { text: 'City', columngroup: 'Location', cellsalign: 'center', align: 'center', datafield: 'City', width: 80 },
				  { text: 'City', columngroup: 'Location', cellsalign: 'center', align: 'center', datafield: 'City1', width: 80 },
				  { text: 'City', columngroup: 'Location', cellsalign: 'center', align: 'center', datafield: 'City2', width: 80 },
				  { text: 'City', columngroup: 'Location', cellsalign: 'center', align: 'center', datafield: 'City3', width: 80 },
				  { text: 'City', columngroup: 'Location', cellsalign: 'center', align: 'center', datafield: 'City4', width: 80 },
				  { text: 'City', columngroup: 'Location', cellsalign: 'center', align: 'center', datafield: 'City5', width: 80 },
				  { text: 'City', columngroup: 'Location', cellsalign: 'center', align: 'center', datafield: 'City6', width: 80 },
				  { text: 'City', columngroup: 'Location', cellsalign: 'center', align: 'center', datafield: 'City7', width: 80 },
				  { text: 'City', columngroup: 'Location', cellsalign: 'center', align: 'center', datafield: 'City8', width: 80 },
				  { text: 'City', columngroup: 'Location', cellsalign: 'center', align: 'center', datafield: 'City9', width: 80 },
				  { text: 'City', columngroup: 'Location', cellsalign: 'center', align: 'center', datafield: 'City10', width: 80 },
				  { text: 'City', columngroup: 'Location', cellsalign: 'center', align: 'center', datafield: 'City11', width: 80 },
				  { text: 'City', columngroup: 'Location', cellsalign: 'center', align: 'center', datafield: 'City12', width: 80 },
				  { text: 'City', columngroup: 'Location', cellsalign: 'center', align: 'center', datafield: 'City13', width: 80 },
				  { text: 'City', columngroup: 'Location', cellsalign: 'center', align: 'center', datafield: 'City14', width: 80 },
				  { text: 'City', columngroup: 'Location', cellsalign: 'center', align: 'center', datafield: 'City15', width: 80 },
				  { text: 'City', columngroup: 'Location', cellsalign: 'center', align: 'center', datafield: 'City16', width: 80 },
				  { text: 'City', columngroup: 'Location', cellsalign: 'center', align: 'center', datafield: 'City17', width: 80 },
				  { text: 'City', columngroup: 'Location', cellsalign: 'center', align: 'center', datafield: 'City18', width: 80 },
				  { text: 'City', columngroup: 'Location', cellsalign: 'center', align: 'center', datafield: 'City19', width: 80 },
				  { text: 'City', columngroup: 'Location', cellsalign: 'center', align: 'center', datafield: 'City20', width: 80 },
				  { text: 'City', columngroup: 'Location', cellsalign: 'center', align: 'center', datafield: 'City21', width: 80 },
				  { text: 'City', columngroup: 'Location', cellsalign: 'center', align: 'center', datafield: 'City22', width: 80 },
				  { text: 'City', columngroup: 'Location', cellsalign: 'center', align: 'center', datafield: 'City23', width: 80 }

				],
				columngroups: 
				[
				  { text: 'Product Details', align: 'center', name: 'ProductDetails' },
				  { text: 'Order Details', parentgroup: 'ProductDetails', align: 'center', name: 'OrderDetails' },
				  { text: 'Location', align: 'center', name: 'Location' }
				]
			});
		});
	</script>
</head>
<body class='default'>
    <div id="jqxgrid">
    </div>
</body>
</html>

    Please advise.

    Regards,
    Abdul

    December 9, 2013 at 2:02 pm Stacked Column Header Overlapping Issue #46214

    Peter Stoev
    Keymaster

    Hi Abdul,

    Thank you for the feedback.

    Unfortunately, workaround is not available. I will add a work item about that behavior.

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com

  • Author
    Posts
Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.