Fix the documentation for Core

[serge]

I try to implement a simple databinding in the Spreadseet, in an ASP.NETCore MVC application.

I read this article, "Specific behavior"

There it says in the first point : "Column headers are inferred from the data item fields. Configure the column headers and ordering by using the sheet setDataSource method."

The link on setDataSource goes to DataSource method of the jQuery (?!) component ...I didn't find any setDataSource in exemple code from github, there is a DataSource method, however it does not work locally...

please bring some clearly on how to bind the datasource with a simpler example maybe?

I can put my example here, I just try to bind to a datasource to display a "name" and "id", but it does not work, it reads the data from the server, but does not display that json collection that I return in the sheet. 

001.        <div class="row">
002.            <div class="col-sm-12">
003.                <div id="example">
004.                    <script src="https://kendo.cdn.telerik.com/2021.1.330/js/jszip.min.js"></script>
005.
006.                    <div class="configurator">
007.                        <div class="header">Configurator</div>
008.                        <div class="box-col">
009.                            <h4>Save data changes</h4>
010.                            <ul class="options">
011.                                <li>
012.                                    <button id="save">Save changes</button>
013.                                    <button id="cancel">Cancel changes</button>
014.                                </li>
015.                            </ul>
016.                        </div>
017.                    </div>
018.
019.                    @(Html.Kendo().Spreadsheet()
020.    .Name("spreadsheet")
021.    .HtmlAttributes(new { style = "width:100%" })
022.    .Toolbar(false)
023.    .Sheetsbar(false)
024.    .Events(e => e
025.        .DataBinding("onDataBinding")
026.        .DataBound("onDataBound")
027.    )
028.    .Excel(excel => excel
029.        .ProxyURL(Url.Action("Index_Save", "Entreprises"))
030.    )
031.    .Pdf(pdf => pdf
032.        .ProxyURL(Url.Action("Index_Save", "Entreprises"))
033.    )
034.    .Sheets(sheets =>
035.    {
036.        sheets.Add()
037.            .Name("Products")
038.            .DataSource<EntrepriseDTO>(ds => ds
039.                .Custom()
040.                .Batch(true)
041.                .Transport(t => t
042.                    .Read("onRead")
043.                    .Submit("onSubmit")
044.                )
045.                .Events(e => e.Change("onChange"))
046.                .Schema(s => s
047.                    .Model(m =>
048.                    {
049.                        m.Id(p => p.Id);
050.                    })
051.                )
052.            )
053.            .Columns(columns =>
054.            {
055.                columns.Add().Width(100);
056.                columns.Add().Width(415);
057.                columns.Add().Width(145);
058.                columns.Add().Width(145);
059.                columns.Add().Width(145);
060.                columns.Add().Width(145);
061.            })
062.            .Rows(rows =>
063.            {
064.                rows.Add().Height(40).Cells(cells =>
065.                {
066.                    cells.Add()
067.                        .Bold(true)
068.                        .Background("#9c27b0")
069.                        .TextAlign(SpreadsheetTextAlign.Center)
070.                        .Color("white");
071.
072.                    cells.Add()
073.                        .Bold(true)
074.                        .Background("#9c27b0")
075.                        .TextAlign(SpreadsheetTextAlign.Center)
076.                        .Color("white");
077.
078.                    cells.Add()
079.                        .Bold(true)
080.                        .Background("#9c27b0")
081.                        .TextAlign(SpreadsheetTextAlign.Center)
082.                        .Color("white");
083.
084.                    cells.Add()
085.                        .Bold(true)
086.                        .Background("#9c27b0")
087.                        .TextAlign(SpreadsheetTextAlign.Center)
088.                        .Color("white");
089.
090.                    cells.Add()
091.                        .Bold(true)
092.                        .Background("#9c27b0")
093.                        .TextAlign(SpreadsheetTextAlign.Center)
094.                        .Color("white");
095.
096.                    cells.Add()
097.                        .Bold(true)
098.                        .Background("#9c27b0")
099.                        .TextAlign(SpreadsheetTextAlign.Center)
100.                        .Color("white");
101.                });
102.            });
103.    })
104.)
105.                </div>
106.            </div>
107.        </div>

[Neli]

Hello,

In order to configure the headers and use the setDataSource method, you need to get a reference to the Spreadsheet sheet. You could find an example below:

var sheet = $("#spreadsheet").data("kendoSpreadsheet").activeSheet();
sheet.setDataSource(dataSource, [
              { field: Id, title:"ID "},
              { field: Name, title: "Name"}
   ]);

Regarding the data not loaded to the Spreadsheet, the provided configuration seems correct. Could you please check for any errors in the browser console? 

I see that you are following the example provided in our DataSource binding demo. I would suggest you review also the read endpoint in the demo by clicking on the 'View source' - 'DataSourceController.cs'. On the screencast linked here, you could find the format of the returned response. 

You could also run the demos locally. By default, the demos solution is available in the following directory after you install UI for ASP.NET Core on your computer:

C:\Program Files (x86)\Progress\Telerik UI for ASP.NET Core [version]\wrappers\aspnetcore\Examples\AspNet.Core\VS2019

You could read more regarding how to run the demos locally on the link below:

- https://docs.telerik.com/aspnet-core/installation/msi-install#sample-application

Regards,
Neli
Progress Telerik