All Components

Grid / Initialization from table

Car Make Car Model Year Category Air Conditioner
Volvo S60 2010 Saloon Yes
Audi A4 2002 Saloon Yes
BMW 535d 2006 Saloon Yes
BMW 320d 2006 Saloon No
VW Passat 2007 Saloon No
VW Passat 2008 Saloon Yes
Peugeot 407 2006 Saloon Yes
Honda Accord 2008 Saloon No
Alfa Romeo 159 2008 Saloon No
Nissan Almera 2001 Saloon Yes
Mitsubishi Lancer 2008 Saloon Yes
Opel Vectra 2008 Saloon Yes
Toyota Avensis 2006 Saloon No
Toyota Avensis 2008 Saloon Yes
Toyota Avensis 2008 Saloon Yes
Audi Q7 2007 SUV Yes
Hyundai Santa Fe 2012 SUV Yes
Hyundai Santa Fe 2013 SUV Yes
Nissan Qashqai 2007 SUV Yes
Mercedez B Class 2007 Hatchback Yes
Lancia Ypsilon 2006 Hatchback Yes

HTML5/JavaScript 源码

<!DOCTYPE html>
<html>
 <head> 
  <title>Initialization from table</title> 
  <meta charset="utf-8"> 
  <link href="../content/shared/styles/examples-offline.css" rel="stylesheet"> 
  <link href="../../styles/kendo.common.min.css" rel="stylesheet"> 
  <link href="../../styles/kendo.rtl.min.css" rel="stylesheet"> 
  <link href="../../styles/kendo.default.min.css" rel="stylesheet"> 
  <link href="../../styles/kendo.dataviz.min.css" rel="stylesheet"> 
  <link href="../../styles/kendo.dataviz.default.min.css" rel="stylesheet"> 
  <script src="../../js/jquery.min.js"></script> 
  <script src="../../js/kendo.all.min.js"></script> 
  <script src="../content/shared/js/console.js"></script> 
  <script>
        
    </script> 
 </head> 
 <body> 
  <a class="offline-button" href="../index.html">Back</a> 
  <div id="example"> 
   <table id="grid"> 
    <colgroup> 
     <col> 
     <col> 
     <col style="width:110px"> 
     <col style="width:120px"> 
     <col style="width:130px"> 
    </colgroup> 
    <thead> 
     <tr> 
      <th data-field="make">Car Make</th> 
      <th data-field="model">Car Model</th> 
      <th data-field="year">Year</th> 
      <th data-field="category">Category</th> 
      <th data-field="airconditioner">Air Conditioner</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td>Volvo</td> 
      <td>S60</td> 
      <td>2010</td> 
      <td>Saloon</td> 
      <td>Yes</td> 
     </tr> 
     <tr> 
      <td>Audi</td> 
      <td>A4</td> 
      <td>2002</td> 
      <td>Saloon</td> 
      <td>Yes</td> 
     </tr> 
     <tr> 
      <td>BMW</td> 
      <td>535d</td> 
      <td>2006</td> 
      <td>Saloon</td> 
      <td>Yes</td> 
     </tr> 
     <tr> 
      <td>BMW</td> 
      <td>320d</td> 
      <td>2006</td> 
      <td>Saloon</td> 
      <td>No</td> 
     </tr> 
     <tr> 
      <td>VW</td> 
      <td>Passat</td> 
      <td>2007</td> 
      <td>Saloon</td> 
      <td>No</td> 
     </tr> 
     <tr> 
      <td>VW</td> 
      <td>Passat</td> 
      <td>2008</td> 
      <td>Saloon</td> 
      <td>Yes</td> 
     </tr> 
     <tr> 
      <td>Peugeot</td> 
      <td>407</td> 
      <td>2006</td> 
      <td>Saloon</td> 
      <td>Yes</td> 
     </tr> 
     <tr> 
      <td>Honda</td> 
      <td>Accord</td> 
      <td>2008</td> 
      <td>Saloon</td> 
      <td>No</td> 
     </tr> 
     <tr> 
      <td>Alfa Romeo</td> 
      <td>159</td> 
      <td>2008</td> 
      <td>Saloon</td> 
      <td>No</td> 
     </tr> 
     <tr> 
      <td>Nissan</td> 
      <td>Almera</td> 
      <td>2001</td> 
      <td>Saloon</td> 
      <td>Yes</td> 
     </tr> 
     <tr> 
      <td>Mitsubishi</td> 
      <td>Lancer</td> 
      <td>2008</td> 
      <td>Saloon</td> 
      <td>Yes</td> 
     </tr> 
     <tr> 
      <td>Opel</td> 
      <td>Vectra</td> 
      <td>2008</td> 
      <td>Saloon</td> 
      <td>Yes</td> 
     </tr> 
     <tr> 
      <td>Toyota</td> 
      <td>Avensis</td> 
      <td>2006</td> 
      <td>Saloon</td> 
      <td>No</td> 
     </tr> 
     <tr> 
      <td>Toyota</td> 
      <td>Avensis</td> 
      <td>2008</td> 
      <td>Saloon</td> 
      <td>Yes</td> 
     </tr> 
     <tr> 
      <td>Toyota</td> 
      <td>Avensis</td> 
      <td>2008</td> 
      <td>Saloon</td> 
      <td>Yes</td> 
     </tr> 
     <tr> 
      <td>Audi</td> 
      <td>Q7</td> 
      <td>2007</td> 
      <td>SUV</td> 
      <td>Yes</td> 
     </tr> 
     <tr> 
      <td>Hyundai</td> 
      <td>Santa Fe</td> 
      <td>2012</td> 
      <td>SUV</td> 
      <td>Yes</td> 
     </tr> 
     <tr> 
      <td>Hyundai</td> 
      <td>Santa Fe</td> 
      <td>2013</td> 
      <td>SUV</td> 
      <td>Yes</td> 
     </tr> 
     <tr> 
      <td>Nissan</td> 
      <td>Qashqai</td> 
      <td>2007</td> 
      <td>SUV</td> 
      <td>Yes</td> 
     </tr> 
     <tr> 
      <td>Mercedez</td> 
      <td>B Class</td> 
      <td>2007</td> 
      <td>Hatchback</td> 
      <td>Yes</td> 
     </tr> 
     <tr> 
      <td>Lancia</td> 
      <td>Ypsilon</td> 
      <td>2006</td> 
      <td>Hatchback</td> 
      <td>Yes</td> 
     </tr> 
    </tbody> 
   </table> 
   <script>
                $(document).ready(function() {
                    $("#grid").kendoGrid({
                        height: 550,
                        sortable: true
                    });
                });
            </script> 
  </div>   
 </body>
</html>