SPREADSHEET Control Dynamic Columns headers

[Stephen Welborn]

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.

Model

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.

[Sangeetha Priya Murugan]

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.

[Stephen Welborn]

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">

                        <thead>

                            <tr>

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

                                <th>Metric</th>

                                <th>Scenario</th>

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

                {

                            <th>

                                @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>

                                                    </tr>

                                                </thead>

                                                <tbody></tbody>

                                            </table>

[Sangeetha Priya Murugan]

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

spreadsheetObj.refresh()

    }

 

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

https://www.syncfusion.com/downloads/support/directtrac/general/ze/core-sample-44561173