Edit this page

Spreadsheet HtmlHelper Overview

The Spreadsheet HtmlHelper extension is a server-side wrapper for the Kendo UI Spreadsheet widget. It allows you to configure the Kendo UI Spreadsheet from server-side code.

Getting started

Configuration

Below are listed the steps for you to follow when configuring the Kendo UI Spreadsheet for ASP.NET MVC to bind to inline data.

  1. Create a new ASP.NET MVC 5 application using any of the following templates:

  1. Add a Kendo UI Spreadsheet to the Index view in Views/Home/Index.cshtml.

    Example
    
          <%:Html.Kendo().Spreadsheet()
              .Name("spreadsheet")
              .Sheets(sheets => {
                  sheets.Add()
                      .Name("Food Order")
                      .MergedCells("A1:F1", "C15:E15")
                      .Columns(columns =>
                      {
                          columns.Add().Width(100);
                          columns.Add().Width(215);
                          columns.Add().Width(115);
                          columns.Add().Width(115);
                          columns.Add().Width(115);
                          columns.Add().Width(155);
                      })
                      .Rows(rows =>
                      {
                          rows.Add().Height(50).Cells(cells =>
                          {
                              cells.Add()
                                  .Value("My Company")
                                  .FontSize(25)
                                  .Background("rgb(142,196,65)")
                                  .TextAlign(SpreadsheetTextAlign.Center)
                                  .Color("white");
                          });
    
                          rows.Add().Height(25).Cells(cells =>
                          {
                              cells.Add()
                                  .Value("ID")
                                  .Background("rgb(212,223,50)")
                                  .TextAlign(SpreadsheetTextAlign.Center);
    
                              cells.Add()
                                  .Value("Product")
                                  .Background("rgb(212,223,50)")
                                  .TextAlign(SpreadsheetTextAlign.Center);
    
                              cells.Add()
                                  .Value("Quantity")
                                  .Background("rgb(212,223,50)")
                                  .TextAlign(SpreadsheetTextAlign.Center);
    
                              cells.Add()
                                  .Value("Price")
                                  .Background("rgb(212,223,50)")
                                  .TextAlign(SpreadsheetTextAlign.Center);
    
                              cells.Add()
                                  .Value("Tax")
                                  .Background("rgb(212,223,50)")
                                  .TextAlign(SpreadsheetTextAlign.Center);
    
                              cells.Add()
                                  .Value("Amount")
                                  .Background("rgb(212,223,50)")
                                  .TextAlign(SpreadsheetTextAlign.Center);
                          });
                      });
                  })
          %>
    
          @(Html.Kendo().Spreadsheet()
          .Name("spreadsheet")
          .Sheets(sheets => {
              sheets.Add()
                  .Name("Food Order")
                  .MergedCells("A1:F1", "C15:E15")
                  .Columns(columns =>
                  {
                      columns.Add().Width(100);
                      columns.Add().Width(215);
                      columns.Add().Width(115);
                      columns.Add().Width(115);
                      columns.Add().Width(115);
                      columns.Add().Width(155);
                  })
                  .Rows(rows =>
                  {
                      rows.Add().Height(50).Cells(cells =>
                      {
                          cells.Add()
                              .Value("My Company")
                              .FontSize(25)
                              .Background("rgb(142,196,65)")
                              .TextAlign(SpreadsheetTextAlign.Center)
                              .Color("white");
                      });
    
                      rows.Add().Height(25).Cells(cells =>
                      {
                          cells.Add()
                              .Value("ID")
                              .Background("rgb(212,223,50)")
                              .TextAlign(SpreadsheetTextAlign.Center);
    
                          cells.Add()
                              .Value("Product")
                              .Background("rgb(212,223,50)")
                              .TextAlign(SpreadsheetTextAlign.Center);
    
                          cells.Add()
                              .Value("Quantity")
                              .Background("rgb(212,223,50)")
                              .TextAlign(SpreadsheetTextAlign.Center);
    
                          cells.Add()
                              .Value("Price")
                              .Background("rgb(212,223,50)")
                              .TextAlign(SpreadsheetTextAlign.Center);
    
                          cells.Add()
                              .Value("Tax")
                              .Background("rgb(212,223,50)")
                              .TextAlign(SpreadsheetTextAlign.Center);
    
                          cells.Add()
                              .Value("Amount")
                              .Background("rgb(212,223,50)")
                              .TextAlign(SpreadsheetTextAlign.Center);
                      });
                  });
              })
          )
    
  2. Build and run the application.

    Figure 1. The final result

    Final result

Event Handling

You can subscribe to all Spreadsheet events.

By Handler Name

The following example demonstrates how to subscribe to events by a handler name.

Example

      <%:Html.Kendo().Spreadsheet()
          .Name("spreadsheet")
          .Events(e => e
              .Render("spreadsheetRender")
          )
      %>

      <script>
          function spreadsheetRender() {
              //Handle the render event.
          }
      </script>

      @(Html.Kendo().Spreadsheet()
          .Name("spreadsheet")
          .Events(e => e
              .Render("spreadsheetRender")
          )
      )

      <script>
          function spreadsheetRender() {
              //Handle the render event.
          }
      </script>

By Template Delegate

The following example demonstrates how to subscribe to events by a template delegate.

Example

      @(Html.Kendo().Spreadsheet()
          .Name("spreadsheet")
          .Events(e => e
              .Render(@<text>
                  function() {
                      //Handle the render event inline.
                  }
              </text>)
          )
      )

Reference

Existing Instances

To reference an existing Kendo UI Spreadsheet instance, use the jQuery.data() configuration option. Once a reference is established, use the Spreadsheet API to control its behavior.

Example
  @(Html.Kendo().Spreadsheet()
      .Name("spreadsheet")
  )
  <script>
  $(function() {
      //Notice that the Name() of the Spreadsheet is used to get its client-side instance.
      var spreadsheet = $("#spreadsheet").data("kendoSpreadsheet");
  });
  </script>

See Also