How to display the content of grid to show also the Header?

Suite and Optimus Suite 5
#1

The following code

console.log(myGrid.serialize());

didn’t display the content of .

#2

Unfortunately it is not available to serialize the afterInit section.
You may serialize header structure with the data usiog the setSerializationLevel() method:
docs.dhtmlx.com/api__link__dhtml … level.html

#3

if I have the following HTML code:

<div id="myGridContainer" width="799px" height="799px"></div>

and the following .xml (second column is hidden!):

<rowset>

  <head>
    <column width="60" hidden="false" type="ro">Col A</column>
    <column width="60" hidden="true" type="ro">Col B</column>
    <column width="60" hidden="false" type="ro">Col C</column>
    <column width="60" hidden="false" type="ro">Col D</column>

  </head>

  <row id="1">
    <cell>value1</cell>
    <cell>value2</cell>
    <cell>value3</cell>
    <cell>value4</cell>
  </row>
  <row id="2">
    <cell>value5</cell>
    <cell>value6</cell>
    <cell>value7</cell>
    <cell>value8</cell>
  </row>
  <row id="3">
    <cell>value-11</cell>
    <cell>value-12</cell>
    <cell>value-13</cell>
    <cell>value-14</cell>
  </row>

</rowset>

and the following grid:

myGrid = new dhtmlXGridObject('myGridContainer');
myGrid.setSkin("xp");
myGrid.xml.top="rowset";
myGrid.attachHeader("A,B,C,D",["color:green","color:red;","color:blue;","color:yellow;"]); //this line will be created with a program
myGrid.load("my.xml");

so what will be in the afterInit section? I need to create the whole .xml with a program, and if it is finished, I will assign it to a grid.

So, something like this?

    <afterInit>
      <call command="attachHeader">
        <param>A,B,C,D</param>
        <param>color:green;,color:red;,color:blue;,color:yellow;</param>
      </call>
    </afterInit>

But this sample is not working in the same way in IE and FF (Firefox displays the hidden B column).

#4

So if I put the section manually to the .xml, I will receive the following grids in Firefox and Internet Explorer. The second lines of the headers differ. How to put items to the section in order to have the same result as with .attachHeader() function?

#5

Could someone help me on this? Thx

#6

I apologize for the delay with your issue.
Unfortunately the pointed problem cannot be reproduced locally.
If it’s still occurs for you please, open ticket at support.dhtmlx.com and provide with a complete demo or a demo link, where the problem can be reconstructed.
Here you can find a tutorial about creating a complete demo:
docs.dhtmlx.com/tutorials__auxil … pport.html

#7

okay, so step by step tutorial:

  1. dowload this dhtmlx.com/x/download/regular/dhtmlxSuite.zip

  2. unzip it

  3. create “my.xml” and “my.html” files in the root folder of the unpacked archive

my.xml

<rowset>

  <head>
    <column width="60" hidden="false" type="ro">Col A</column>
    <column width="60" hidden="true" type="ro">Col B</column>
    <column width="60" hidden="false" type="ro">Col C</column>
    <column width="60" hidden="false" type="ro">Col D</column>

    <afterInit>
      <call command="attachHeader">
        <param>A,B,C,D</param>
        <param>color:green;,color:red;,color:blue;,color:yellow;</param>
      </call>
    </afterInit>

  </head>

  <row id="1">
    <cell>value1</cell>
    <cell>value2</cell>
    <cell>value3</cell>
    <cell>value4</cell>
  </row>
  <row id="2">
    <cell>value5</cell>
    <cell>value6</cell>
    <cell>value7</cell>
    <cell>value8</cell>
  </row>
  <row id="3">
    <cell>value-11</cell>
    <cell>value-12</cell>
    <cell>value-13</cell>
    <cell>value-14</cell>
  </row>

</rowset>

my.html

<html>
<head>
    <link rel="STYLESHEET" type="text/css" href="codebase/dhtmlx.css">
    <script src="sources/dhtmlxCommon/codebase/dhtmlxcommon.js"></script>
    <script src="sources/dhtmlxGrid/codebase/dhtmlxgrid.js"></script>
</head>
<body>
    <p>something...</p>
    <div id="myGridContainer" width="799px" height="799px"></div>
</body>
<script>
    myGrid = new dhtmlXGridObject('myGridContainer');
    myGrid.setSkin("xp");
    myGrid.xml.top="rowset";
    myGrid.attachHeader("A,B,C,D",["color:green","color:red;","color:blue;","color:yellow;"]);
    myGrid.load("my.xml");
</script>
</html>

you will see different headers in FF, where column “B” will be shown in the 3rd row (image attached)
Now hope it is clear enough and can be reproduced locally

#8

here is the link to a server where you can launch the “my.html” file

tiborzsitva.szm.com/download/my.html

#9

I can’t explain my problem more into detail. At least tell me, that it is a problem in DHTMLX library because until now I supposed that the problem is on my side.

#10

Please, try to attach your header in the beforeInit section

<rowset>

  <head>
    <column width="60" hidden="false" type="ro">Col A</column>
    <column width="60" hidden="true" type="ro">Col B</column>
    <column width="60" hidden="false" type="ro">Col C</column>
    <column width="60" hidden="false" type="ro">Col D</column>

    <beforeInit>
      <call command="attachHeader">
        <param>A,B,C,D</param>
        <param>color:green;,color:red;,color:blue;,color:yellow;</param>
      </call>
    </beforeInit>

  </head>

  <row id="1">
    <cell>value1</cell>
    <cell>value2</cell>
    <cell>value3</cell>
    <cell>value4</cell>
  </row>
  <row id="2">
    <cell>value5</cell>
    <cell>value6</cell>
    <cell>value7</cell>
    <cell>value8</cell>
  </row>
  <row id="3">
    <cell>value-11</cell>
    <cell>value-12</cell>
    <cell>value-13</cell>
    <cell>value-14</cell>
  </row>

</rowset>
#11

thx