New to Kendo UI for jQuery? Start a free 30-day trial

SetDataSource

methods

Binds the sheet to a DataSource instance. For more information on the data-binding Spreadsheet functionality, refer to the article on binding the Spreadsheet to a data source.

setDataSource

Parameters:dataSourcekendo.data.DataSource

The DataSource instance.

<div id="spreadsheet"></div>
<script>

  var dataSource = new kendo.data.DataSource({
    transport: {
      read:  {
        url: "https://demos.telerik.com/service/v2/core/Products"
      }
    }
  });

  $("#spreadsheet").kendoSpreadsheet();

  var spreadsheet = $("#spreadsheet").data("kendoSpreadsheet");
  var sheet = spreadsheet.activeSheet();
  sheet.setDataSource(dataSource);

</script>

columns `Array` optional

Columns configuration.

Example

<div id="spreadsheet"></div>
<script>

  var dataSource = new kendo.data.DataSource({
    transport: {
      read:  {
        url: "https://demos.telerik.com/service/v2/core/Products"
      }
    }
  });

  $("#spreadsheet").kendoSpreadsheet();

  var spreadsheet = $("#spreadsheet").data("kendoSpreadsheet");
  var sheet = spreadsheet.activeSheet();
  sheet.setDataSource(dataSource, [ "ProductName", "UnitPrice" ]);

</script>

Example - reorder columns and change column titles

<div id="spreadsheet"></div>
<script>
  var dataSource = new kendo.data.DataSource({
    transport: {
      read:  {
        url: "https://demos.telerik.com/service/v2/core/Products"
      }
    }
  });

  $("#spreadsheet").kendoSpreadsheet();

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

</script>

SetDataSource

setDataSource

columns Array optional

Example

Example - reorder columns and change column titles

columns `Array` optional