First column of grid footer display wrong way

Suite and Optimus Suite 7
#1

Code as below:
const product_grid = new dhx.Grid(null, {
columns: [
{ id: “ProductModel”, width: 160, header: [{ text: “Model” }, { content: “inputFilter” }], footer: [{ text: “Records Num：” }] },
…
],
…
leftSplit: 1,
}
If add “leftSplit:1”, the footer will looks like:
image

#2

Unfortunately the problem could not be reconstructed locally.
The following snippet works well for me:
https://snippet.dhtmlx.com/g2rldv02
If the problem still occurs for you please provide a complete demo or a demo link, where the problem could be reconstructed.

#3

The snippet works well for me too. But my code still has the issue, here is it. With Chrome V89.0.4389.90

DHTMLX Suite 
	<script type="text/javascript" src="https://cdn.dhtmlx.com/suite/edge/suite.js"></script>
	<link rel="stylesheet" href="https://cdn.dhtmlx.com/suite/edge/suite.css">
	
	<style type="text/css">
		html, body {width: 100%; height: 100%; margin: 0px; overflow: hidden;}

		.main-container {
			display: -webkit-box;
			display: -ms-flexbox;
			display: flex;
			min-width: 1280px;
			min-height: 600px;
			width: 100%;
			height: 100%;
			margin-left: auto;
			margin-right: auto;
			justify-content: center;
		}	
	</style>
</head>

<body>
	<div class="main-container" id="main_layout_container"></div>
	<script>
		const main_layout = new dhx.Layout("main_layout_container", {
			type: "line",
			rows: [
				{
					id: "menu",
					height: "36px",
				},
				{
					type: "wide",
					cols: [
						{
							id: "sidebar",
							width: "200px",
						},
						{
							id: "content",
							resizable:true,
						}
					]
				},
			]
		});

		const grid_data = [
			{"ProductModel":"003L7616","CategoryCode":"APZ","CategoryName":"DN32","ProductName":"DN32 ASV-PV Valve","Description":"-10~120℃, pressure 35~75kPa, PN16, Kvs6.3, Cast iron body"},
			{"ProductModel":"003L7617","CategoryCode":"APZ","CategoryName":"DN40","ProductName":"DN40 ASV-PV Valve","Description":"-10~120℃, pressure 35~75kPa, PN16, Kvs10.0, Cast iron body"},
			{"ProductModel":"003L7617","CategoryCode":"APZ","CategoryName":"DN50","ProductName":"DN50 ASV-PV Valve","Description":"-10~120℃, pressure 35~75kPa, PN16, Kvs16.0, Cast iron body"}
		];
		
		const product_grid = new dhx.Grid(null, {
			columns: [
				{ id: "ProductModel",				width: 160,	header: [{ text: "Model" }, 	{ content: "inputFilter" }], 	footer: [{ text: "Records Num：" }], type: "string", },
				{ id: "CategoryCode",				hidden: true, header: [{ text: "Code" }, 	{ content: "inputFilter" }], 	type: "string" },
				{ id: "CategoryName",				width: 150,	header: [{ text: "Category Name" }, 	{ content: "inputFilter" }], 	footer: [{ content: "count" }],	type: "string" },
				{ id: "ProductName",				width: 200,	header: [{ text: "Product Name" }, 	{ content: "inputFilter" }], 	type: "string" },
				{ id: "Description",				width: 500,	header: [{ text: "Description" }, 			{ content: "inputFilter" }], 	type: "string" },
			],
			leftSplit: 1,
			data: grid_data
		});
			
		main_layout.getCell("content").attach(product_grid);
	</script>
</body>
#4

Thank you for your provided code snippet. The porblem is confirmed. We’ll try to fix it in future updates.

#5

Having same issue…but why would it work with your code DHX snippet but not locally?

local_chrome_dhx_suite_7_footer_leftsplit_issue

#6

in your case, most probably, you have several header rows.
That issue is already known, as you casn see, and we’ll try to fix it in the future udpates. I’ll inform here abourt any progress.

#7

Appreciate the feedback and good catch…yes, I have 2 columns in the header (title/filter) …which i see now is different from your example online with 1 header row - thanks for that! … Looking forward to the fix

#8

Hello everyone.

We have fixed that problem in the latest (7.1.3) dhtmlxSuite udpate.
Now it should display correctly in this case:
https://snippet.dhtmlx.com/0nxsyu64