How to add column headers to sheet and not column coordinate area

How to add column headers to sheet and not column coordinate area

Posted by: georgeg on 13 March 2025, 1:19 pm EST

• 

  georgeg

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 13 March 2025, 1:19 pm EST - Updated 13 March 2025, 1:24 pm EST

  HI,

  I will be loading arrays of JSON objects with a schema similar to:

  When I use the sheet.setDataSource() and bind the headers I see the headers cover up the letters of the column coordinate section :

  Here is a code snippit of what I am doing:

                  var spread = GC.Spread.Sheets.findControl(document.getElementById('spreadJs'));
  
                  if (!spread) {
                      spread = new GC.Spread.Sheets.Workbook(document.getElementById('spreadJs'));
                  }
                  var sheet = spread.getActiveSheet();
  
                  // Clear existing data
                  sheet.clear(0, 0, sheet.getRowCount(), sheet.getColumnCount(), GC.Spread.Sheets.SheetArea.viewport);
  
                  // Set the data source
                  sheet.setDataSource(spreadJsData);
  
                  // Set the columns
                  //sheet.autoGenerateColumns = false;
                  sheet.bindColumns(spreadJSColumnDef);
                  sheet.name("Queue Data Report");
  
                  // Ensure column headers are visible after binding columns
                  sheet.options.colHeaderVisible = true;

  I don’t want the columns in this area:

  SpreadJSWithKendoButtons.zip

  

  962×436 111 KB

  Would prefer to see the columns in the spreadsheet area like this:
  
  

  

  921×311 24 KB

  
  
  How to acheive this using the functions in the snippet above?
  
  I also included a zip of my testbed project

  Thanks!
  
  George

• 

  priyam.kushwaha

  

  • Post Options:
  • Link
    Copy

  Posted 17 March 2025, 5:15 am EST

  Hi,

  There is no way to retain the default column names and add the column names in the first row of the viewport sheet area. To accomplish the required, it is necessary to convert the data source into an array with column headers as the first row and add the data to the sheet using the setArray method or setDataSource method of the Worksheet class.

  Please refer to the code snippet below, which illustrates the above:

  const dataArray = [
    spreadJSColumnDef.map((h) => h.displayName),
    ...spreadJsData.map((row) =>
      spreadJSColumnDef.map((h) => row[h.name])
    ),
  ];
  sheet.setDataSource(dataArray);

  You can further refer to the attached sample that uses the above code snippet and binds the data to the sheet: SpreadJSWithKendoButtons.zip. Please note that this approach will work as expected to display the data but does not work according to the intended data source features.

  Please feel free to reach out if you encounter any further issues or require additional guidance.

  Best Regards,