MVC Kendo Spreadsheet local data bidding Create/Update/Delete

0 Answers 73 Views
Spreadsheet
Norbert
Top achievements
Rank 1
Norbert asked on 02 Mar 2023, 07:13 PM
0

I use Kendo Spreadsheet widget with local data binding in MVC. How can I set the datasource to the spreadsheet to do create, update and delete operation?

I know this example,

https://demos.telerik.com/aspnet-mvc/spreadsheet/datasource

but ajax remote binding is not fine for me, because the excel file has a realy complex header with many merged cells. And remote data fills the first row which overwrite header files. So I use this example:

https://www.telerik.com/forums/loading-data-into-a-specific-row-in-kendo-spreadsheet

After using it data liested in the proper rows, but it's very slow.

So please give me some information to resolve this issue. A have to save modifications of the spreadsheet.

Here I list a simple example of how I bind the data:

ViewModel:

public int ID { get; set; }
    public int Name { get; set; }
    public string Status { get; set; }
}

Action in controller:

public ActionResult Index()
{
    List<ViewModel> model = service.GetData();
    return View(model);
}

View cshtml:

@model List<Namespace.Model.ViewModel>

@section body {

    @(Html.Kendo().Spreadsheet()
        .Columns(3)
        .Name("DataExcel")
        .HtmlAttributes(new { style = "width:auto; height: 770px;" })
        .Toolbar(false)
        .Sheetsbar(false)
        .Events(e => e
            .Select("Scripts.onSelect"))
        .Sheets(sheets =>
        {
            sheets.Add()
            .Name("DataSheet")
            .Columns(columns =>
            {
                // Megbízott neve és státusza + Tantárgy neve
                columns.Add().Width(50);
                columns.Add().Width(100);
                columns.Add().Width(100);
            }).Rows(rows =>
            {
                foreach (var dataRow in Model)
                {
                    rows.Add().Height(50).Cells(cells =>
                    {
                        // Megbízott státusza
                        cells.Add()
                            .Value(dataRow.ID)
                            .VerticalAlign(SpreadsheetVerticalAlign.Center)
                            .Color("black");

                        // Tantárgy neve
                        cells.Add()
                            .Value(dataRow.Name)
                            .VerticalAlign(SpreadsheetVerticalAlign.Center)
                            .Color("black");

                        // Órakeret
                        cells.Add()
                            .Value(dataRow.Status)
                            .VerticalAlign(SpreadsheetVerticalAlign.Center)
                            .Color("black")
                            .Bold(true);
                    }
                }
            });
        })
    )
}

No answers yet. Maybe you can help?

Tags
Spreadsheet
Asked by
Norbert
Top achievements
Rank 1
Share this question
or