RadSpreadsheet manipulation

[Kyle]

I essentially would like users to paste in their data to a RadSpreadsheet and then click a button. Once Clicked I can process the data and save the data to a database.  However, I would also like to manipulate the spreadsheet and rename the columns from ABC to a heading I choose.

Can you point me on how to change the column headings?

Can you point me into how to process the pasted data into a datatable or object when a button is clicked on the page?

Thanks!

[Vasko]

Hello Kyle,

The column headers (A, B, C, etc.) in RadSpreadsheet are built-in and cannot be changed programmatically through the API. There is no direct way to set custom column header names. As a workaround, you can visually replace the default headers using JavaScript or CSS. For example, to display "First", "Second", and "Third" instead of "A", "B", and "C", you can use:

function onClientRender(sender, args) {
    let columnTitles = document.querySelectorAll(".RadSpreadsheet .rssColumnHeader div .k-vertical-align-center"); // A, B, C...
    columnTitles.forEach(title => title.textContent = ""); // remove the letters entirely

    columnTitles[0].textContent = "My Custom Title";
}

CSS approach (you will still need to remove the original text content):

.RadSpreadsheet .rssColumnHeader div:nth-of-type(1) .k-vertical-align-center:before {
    content: "First";
}

.RadSpreadsheet .rssColumnHeader div:nth-of-type(2) .k-vertical-align-center:before {
    content: "Second";
}

.RadSpreadsheet .rssColumnHeader div:nth-of-type(3) .k-vertical-align-center:before {
    content: "Third";
}

Note that the CSS approach only affects the visible columns and will always label the first three visible columns as "First", "Second", and "Third", regardless of horizontal scrolling. The labels do not move with the data and may repeat if you scroll.

As for processing pasted data, you could use a similar approach shown in the Programmatic Binding article.

Regards,
Vasko
Progress Telerik