Completed
Last Updated: 17 Oct 2019 11:54 by ADMIN
Andrew
Created on: 27 Sep 2019 23:55
Category: Spreadsheet
Type: Bug Report
0
multiple row header or headertemplate for kendo spreadsheet

I am using kendo spreadsheet binding to a datasource... very similar to the demo: https://demos.telerik.com/kendo-ui/spreadsheet/datasource

Is there a way to add a two row header while binding to a data source?  For example, my first row would be a merged cell spanning all columns and would contain some text.  I can see how to do two row headers and to merge cells.. but it doesn't work when the spreadsheet is bound to a datasource as it starts the data in row 2.... where I want row 2 to be my actual field name headers.  I don't see any options to fix that.

If there is no way to do that... is there a way to alter my header style?  For example, I want a column header to be

MY FIELD NAME HERE
additional text (smaller font and color)

I know in kendo grid there is headerTemplate... but this doesn't seem to be available in kendo spreadsheet.

Thank you.

 

4 comments
Missing User
Posted on: 17 Oct 2019 11:54

Hello Andrew,

In R3 2019 SP1 this issue where upon inserting a row the data in cell A1 is removed will be resolved with the introduction of a second parameter to the insertRow method:

skipDataSourceInsert Boolean optional
If passed true, the method does not delete item from the DataSource.

Thus, in databound scenarios when inserting rows outside the databound rows, insertRow()'s parameter skipDataSourceInsert should be set to true to avoid the issue from the KB.
sheet.insertRow(0, true);  -  the second parameter skips the update of the dataSource

We will update the documentation and KB article once R3 2019 SP1 is released.

Regards,
Aleksandar
Progress Telerik

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Missing User
Posted on: 01 Oct 2019 14:09

Hello Andrew,

This behavior is expected when setting the dataSource while handling the requestEnd event as this causes an endless loop. You can set the dataSource via the setDataSource() method outside of the event handler, but still add the header rows in the requestEnd event handler.

I modified the example to set the dataSource via the setDataSource() method, to match your scenario. Note that a bug was identified where upon insertion of a row causes the first cell of the column titles to be removed thus the following  was added as a temporary solution:

function onRequestEnd(e) {
      // Check the request type
      if (e.type === 'read') {
        setTimeout(function() {
          var spread = $("#spreadsheet").getKendoSpreadsheet();
          var sheet = spread.activeSheet();
          // Insert the custom header row
          sheet.insertRow(0);
          sheet.insertRow(0);
          sheet.range('A1:C1').merge().value("My Custom Header").textAlign("center").fontSize(50);
          sheet.range('A2:C2').merge().value("some other data").textAlign("center").fontSize(20);
          sheet.range('A1:C2').background('#cccccc')
          sheet.range('A3').value(sheet.dataSourceBinder.columns[0].title)         
        },0);
      }
    }

I have converted this thread to a "Bug Report" in our Public Feedback Portal from where you could track it. Also, the following GitHub issue can also be monitored. 

As a token of gratitude for helping us identify this bug I have updated your Telerik Points accordingly.

Regards,
Aleksandar
Progress Telerik

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Andrew
Posted on: 30 Sep 2019 19:53

Hi Aleksander,

 

Thank you for the reply and example.  That would work but the problem is I am using setDataSource to specify specific columns and update the titles.  I got that information from this post:

https://www.telerik.com/forums/datasource---specify-columns

So I when I try and insert the header row on requestEnd, I get this error:

Shifting nonblank cells off the worksheet is not supported!

How am I able to both bind specific columns/alter column titles AND add the custom header?  

Thanks,

Andrew

Missing User
Posted on: 30 Sep 2019 14:04

Hello Andrew,

You can add a custom header by handling the requestEnd event of the dataSource object and manually inserting the header by handling the Spreadsheet client-side API, as described in this knowledge base article. Note however that if you need to have different styling in the header you would need to add a second merged row. In this dojo I have modified the example from the article to meet your requirements.

I hope this solves your issue. Let me know if you have further questions. 

Regards,
Aleksandar
Progress Telerik

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.