Kendo Ui Asp Net Mvc Tutorial

I’m starting developing in HTML and I’m trying to use the Kendo UI framework in ASP.NET MVC.

I started with this tutorial: Entity Framework 5.x – Database First Workflow With this I was able to create a Web Page that show derita a table with data from a database.

But now I want to style de table with Kendo UI widgets (Grid). To do that I followed this video: Using KendoUI Grids on ASP.Jala MVC – Les 1 (mencicil 4:37min)

The steps that I made so far:

  • Download trial version of Kendo UI Complete for ASP.Net MVC
  • Copy
    kendo.default.min.css
    and
    kendo.common.min.css
    files from the downloaded folder to the
    Content
    folder in my Visual Padepokan project
  • Copy
    kendo.all.min.js
    file from the downloaded folder to the
    Scripts
    folder
  • Changed the
    View
    with the following code:
          @model IEnumerable<DatabaseFirst.Models.Artesano>  @{     ViewBag.Title = "Index"; }  <link href="@Url.Content("~/Content/kendo.common.min.css")" rel="stylesheet" /> <link href="@Url.Content("~/Content/kendo.default.min.css")" landasan kereta api="stylesheet" /> <script src="@Url.Content("~/Scripts/kendo.all.min.js")" type="text/javascript" ></script>  <script type="text/javascript">     $(function () {         $("#artesanos-grid").kendoGrid();      });   </script>  <h2>Index</h2>  <p>     @Html.ActionLink("Create New", "Create") </p> <table id="artesanos-grid">     <thead>     <tr>         <th>             @Html.DisplayNameFor(kamil => model.RFC)         </th>         <th>             @Html.DisplayNameFor(paradigma => konseptual.RazonSocial)         </th>         <th>             @Html.DisplayNameFor(eksemplar => paradigma.Telefonos)         </th>         <th>             @Html.DisplayNameFor(model => ideal.Fax)         </th>         <th>Actions</th>     </tr>     </thead>     <tbody> @foreach (var item in Model) {     <tr>         <td>             @Html.DisplayFor(modelItem => item.RFC)         </td>         <td>             @Html.DisplayFor(modelItem => item.RazonSocial)         </td>         <td>             @Html.DisplayFor(modelItem => item.Telefonos)         </td>         <td>             @Html.DisplayFor(modelItem => item.Fax)         </td>         <td>             @Html.ActionLink("Edit", "Edit", new { id=item.RFC }) |             @Html.ActionLink("Details", "Details", new { id=item.RFC }) |             @Html.ActionLink("Delete", "Delete", new { id=item.RFC })         </td>     </tr> }     </tbody>  </table>
          
        

But when I run the page, no changes are made to the grid… What am I missing?

PS: The source code of the loaded page is:

        <!DOCTYPE html> <html> <head>     <meta charset="utf-8" />     <meta name="viewport" content="width=device-width" />     <title>Index</title>     <link href="/Content/site.css" rel="stylesheet"/>      <script src="/Scripts/modernizr-2.6.2.js"></script>  </head> <body>   <link href="/Content/kendo.common.min.css" rel="stylesheet" /> <link href="/Content/kendo.default.min.css" rel="stylesheet" /> <script src="/Scripts/kendo.all.min.js" type="text/javascript" ></script>  <script type="text/javascript">     $(function () {         $("#artesanos-grid").kendoGrid();      });   </script>  <h2>Index</h2>  <p>     <a href="/Artesano/Create">Create New</a> </p> <table id="artesanos-grid">     <thead>     <tr>         <th>             RFC         </th>         <th>             RazonSocial         </th>         <th>             Telefonos         </th>         <th>             Fax         </th>         <th>Actions</th>     </tr>     </thead>     <tbody>     <tr>         <td>             325         </td>         <td>             sdfwef         </td>         <td>             wetfgvs         </td>         <td>             sdfsdgs         </td>         <td>             <a href="/Artesano/Edit/325">Edit</a> |             <a href="/Artesano/Details/325">Details</a> |             <a href="/Artesano/Delete/325">Delete</a>         </td>     </tr>     <tr>         <td>             2         </td>         <td>             weg         </td>         <td>             asdgweg         </td>         <td>             dsg         </td>         <td>             <a href="/Artesano/Edit/2">Edit</a> |             <a href="/Artesano/Details/2">Details</a> |             <a href="/Artesano/Delete/2">Delete</a>         </td>     </tr>     <tr>         <td>             235423         </td>         <td>             sdga         </td>         <td>             et         </td>         <td>             wefwf         </td>         <td>             <a href="/Artesano/Edit/235423">Edit</a> |             <a href="/Artesano/Details/235423">Details</a> |             <a href="/Artesano/Delete/235423">Delete</a>         </td>     </tr>     <tr>         <td>             23         </td>         <td>             wq         </td>         <td>             sasdga         </td>         <td>             aegweg         </td>         <td>             <a href="/Artesano/Edit/23">Edit</a> |             <a href="/Artesano/Details/23">Details</a> |             <a href="/Artesano/Delete/23">Delete</a>         </td>     </tr>     </tbody>  </table>       <script src="/Scripts/jquery-1.8.2.js"></script>   </body> </html>
        
      

Source: https://stackoverflow.com/questions/15299852/setup-a-grid-with-kendo-ui-using-asp-net-mvc