We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

SPREADSHEET Control Dynamic Columns headers

Hello all,

We are trying to use Spreadsheet control.

Our model columns are dynamic and nested.  They are changed are runtime.  A list within a list.


List<ui_fct_results_grouped> ui_fct_results_grouped contains

 public List<CompareModeHeaders> CompareModeHeaders { get; set; }

IS there anyway to traverse this in the spreadsheet.

3 Replies

SP Sangeetha Priya Murugan Syncfusion Team December 9, 2022 09:43 AM UTC

Hi Stephen,


Before we proceed further, please share a detailed description of your issue with screenshots or a video demonstration. How you need to update the data in the spreadsheet, share dummy data with us, or provide a reproducible sample. Based on that, we will check and provide you with a better solution quickly.

SW Stephen Welborn December 12, 2022 01:52 PM UTC

Here is a code snip it.  We do not know until runtime what columns headers will be.  At the @for loop.  Can we use the spreadsheet to populate these headers as the column headers.

                  <table id="tblCustomers" cellpadding="0" cellspacing="0" border="1" style="border-collapse:collapse">



                                <th>@Html.DisplayFor(model => model.drp_vw_Row_Option.RC_ItemType, new { @class = "form-control" })</th>



                                @for(int i = 0;i< Model.ui_fct_results_groupedColAcross.Count;i++)



                                @Html.DisplayFor(model => model.ui_fct_results_groupedColAcross[i].axis_col_desc)</th>


                                                        <th> Customer Id </th>

                                                        <th> Name </th>

                                                        <th> City </th>

                                                        <th> Country </th>

                                                        <th> Test Static Text</th>





SP Sangeetha Priya Murugan Syncfusion Team December 13, 2022 01:42 PM UTC

Hi Stefan,


You can update the dynamically created data in the spreadsheet by using the range dataSource property, as shown below.


function updateCollection() {

        var spreadsheetObj = ej.base.getComponent(document.getElementById('spreadsheet'), 'spreadsheet');

        var dynamicData = [


                "Customer Name": "Romona Heaslip",

                "Model": "Taurus",

                "Color": "Aquamarine",

                "Payment Mode": "Debit Card",

                "Delivery Date": "07/11/2015",

                "Amount": "8529.22"




        spreadsheetObj.sheets[0].ranges = [{ dataSource: dynamicData, startCell: "A1" }]; // update data in 1st sheet




We have prepared a sample that binds the dynamically created data in a button click event for your convenience.Please find the link below.


Live Chat Icon For mobile
Up arrow icon