Dhtmlxgrid - Column span for main header

We are using the Dhtmlxgrid. We need to show the column span for the main header & show normal values in the attached header using XML. We wanted to show the grid like the attached image:

We tried it with the below codes:

<?xml version="1.0" encoding="UTF-8"?><rows>
<head>
<column id="Type" width="110" editable="false" type="ro" align="left" sort="str" hidden="false"> SubHead1 </column>
<column id="ID" editable="false" type="ro" align="center" sort="str" hidden="false"> SubHead2 </column>
<column id="Name" width="200" editable="false" type="ro" align="left" sort="str" > SubHead3 </column>
<column id="StartDate" width="100" editable="true" type="dhxCalendar" align="center" sort="str" > SubHead4 </column>
<afterInit>
  <call command="attachHeader">
	<param>Head 1,Head 2,#cspan,Head 3</param>
  </call>
</afterInit>
</head>
</rows>

When I tried the above code, it renders the main headers first & then rendered the attached header. But I want to display attached header first & then the normal header.

Is it possible? If yes, can you please provide any sample code.


I found the solution for it. The code as below as:

<?xml version="1.0" encoding="UTF-8"?><rows>
<head>
<column id="Type" width="110" editable="false" type="ro" align="left" sort="str" hidden="false">Head 1</column>
<column id="ID" editable="false" type="ro" align="center" sort="str" hidden="false">Head 2</column>
<column id="Name" width="200" editable="false" type="ro" align="left" sort="str" >#cspan</column>
<column id="StartDate" width="100" editable="true" type="dhxCalendar" align="center" sort="str" >Head 3</column>
<afterInit>
  <call command="attachHeader">
	<param>SubHead1,SubHead2,SubHead3,SubHead4</param>
  </call>
</afterInit>
</head>
</rows>

It works for me.