This is a migrated thread and some comments may be shown as answers.

Fix the documentation for Core

1 Answer 136 Views
Spreadsheet
This is a migrated thread and some comments may be shown as answers.
serge
Top achievements
Rank 2
Bronze
Iron
Iron
serge asked on 22 Apr 2021, 03:00 PM

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>

1 Answer, 1 is accepted

Sort by
0
Neli
Telerik team
answered on 27 Apr 2021, 11:38 AM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
Spreadsheet
Asked by
serge
Top achievements
Rank 2
Bronze
Iron
Iron
Answers by
Neli
Telerik team
Share this question
or