Setup a grid with Kendo UI using ASP.NET MVC

Question

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 me 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.Net MVC - Tutorial 1 (until 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 Studio 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")" rel="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(model => model.RFC)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.RazonSocial)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Telefonos)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.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>

@PeturSubev As you can see I already solved the problem. But as I am a beginner, can you tell me where I can see JS errors? Is it in Visual Studio or in the browser (Chrome)? It will be useful in the future. — amp
– amp, Commented Mar 9, 2013 at 10:14
At your browser's console. I suggest you to check this video , i think you will find it useful. kendoui.com/blogs/teamblog/posts/13-01-02/… — Petur Subev
– Petur Subev, Commented Mar 10, 2013 at 19:38

amp · Accepted Answer · 2013-03-09 10:11:25Z

My problem was in the Views/Shared/_Layout.cshtml:

The file was generated like this:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>@ViewBag.Title</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
</head>
<body>
    @RenderBody()

    @Scripts.Render("~/bundles/jquery")
    @RenderSection("scripts", required: false)
</body>
</html>

So I changed to:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>@ViewBag.Title</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
    @Scripts.Render("~/bundles/jquery")
</head>
<body>
    @RenderBody()

    @RenderSection("scripts", required: false)
</body>
</html>

(I put the @Scripts.Render("~/bundles/jquery") at the header)

The problem is now solved.

Collectives™ on Stack Overflow

Setup a grid with Kendo UI using ASP.NET MVC

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related