Kendo Web TabStrip - load grid into tab

Load Kendo Grid into Kendo Tabstrip using the Kendo Web framework.

by sparksterz

HTML

<script src="http://cdn.kendostatic.com/2012.1.322/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.blueopal.min.css">
  <div id="tabstrip">
    <ul>
      <li>Grid</li>
      <li>Tab 2</li>
      <li>Tab 3</li>
    </ul>
    <div><div id="grid"></div></div>
    <div><div id="tab2"></div></div>
    <div><div id="tab3"></div></div>
  </div>

JavaScript

var tabstrip = $("#tabstrip").kendoTabStrip().data("kendoTabStrip");
tabstrip.select(0);

$("#grid").kendoGrid({
  columns: [
    { field: "FirstName", title: "First Name" },
    { field: "LastName", title: "Last Name" }
  ],
  dataSource: {
    data: [
      { FirstName: "Joe", LastName: "Smith" },
      { FirstName: "Jane", LastName: "Smith" }
    ]
  }
});

$("#tab2").kendoGrid({
  columns: [
    { field: "FirstName", title: "First Name" },
    { field: "LastName", title: "Last Name" }
  ],
  dataSource: {
    data: [
      { FirstName: "Joe", LastName: "Smith" },
      { FirstName: "Jane", LastName: "Smith" }
    ]
  }
});

$("#tab3").kendoGrid({
  columns: [
    { field: "FirstName", title: "First Name" },
    { field: "LastName", title: "Last Name" }
  ],
  dataSource: {
    data: [
      { FirstName: "Joe", LastName: "Smith" },
      { FirstName: "Jane", LastName: "Smith" }
    ]
  }
});