JS kendoGrid applied to MVC grid, problem.

[Phil]

Hi:

I am trying the following approach:

@model IEnumerable<Mvc3App.Models.Employee>

@{

    ViewBag.Title = "Index";

}

<script type="text/javascript">

    $(document).ready(function () {

        alert('stopped');

        $("#kjsimpleGrid").kendoGrid({

            groupable: true,

            scrollable: true,

            sortable: true,

            pageable: true

        });

    });

</script>

<p>

    @Html.ActionLink("Add", "Create")

</p>

<table id="kjsimpleGrid">

  <thead>

    <tr>

        <th></th>

        <th>Id</th>

        <th>Last</th>

        <th>First</th>

        <th>Title</th>

        <th>City</th>

        <th>Region</th>

        <th></th>

    </tr>

  </thead>

  <tbody>

 

@foreach (var item in Model) {

    <tr>

        <td>

            @Html.ActionLink("Edit", "Edit", new { id=item.EmployeeID }) |

            @Html.ActionLink("Details", "Details", new { id=item.EmployeeID })

        </td>

        <td>@Html.DisplayFor(modelItem => item.EmployeeID)</td>

        <td>@Html.DisplayFor(modelItem => item.LastName)</td>

        <td>@Html.DisplayFor(modelItem => item.FirstName)</td>

        <td>@Html.DisplayFor(modelItem => item.Title)</td>

        <td>@Html.DisplayFor(modelItem => item.City)</td>

        <td>@Html.DisplayFor(modelItem => item.Region)</td>

        <td>@Html.ActionLink("Delete", "Delete", new { id=item.EmployeeID })</td>

    </tr>

}

 

  </tbody>

</table>

And I am getting the following js error:
  Microsoft JScript runtime error: Invalid template:

I would like to use as much js as possible and not depend on helper extension methods.

Phil
The error message is:
Microsoft JScript runtime error: Invalid template:'<tr data-uid="#=uid#"><td>#=#</td><td>#=Id#</td><td>#=Last#</td><td>#=First#</td><td>#=Title#</td><td>#=City#</td><td>#=Region#</td><td>#=#</td></tr>' Generated code:'var o,e=kendo.htmlEncode;with(data){o='<tr data-uid="'+(uid)+'"><td>'+()+'</td><td>'+(Id)+'</td><td>'+(Last)+'</td><td>'+(First)+'</td><td>'+(Title)+'</td><td>'+(City)+'</td><td>'+(Region)+'</td><td>'+()+'</td></tr>';}return o;'

[Jeremiah]

I am having a similar problem. I'm still researching but I have to wonder if the issue is the json or the way it is plugged into the grid.

[Paul]

The issue is that you are using "static" HTML and applying the kendo grid to it.  I have found this to be very difficult to work with (and lightly documented) in the current version of Kendo UI.  One issue that you are experiencing is that you have blank column headers (<th></th>) and you do not have a "data-field" attribute defined either.  This results in some sort of "add row" function to mess up and pass a blank variable name to a string concatenation string " + () + " to add new rows (even if you never intent to).

Solution is to add a dummy "data-field" attribute to the blank column header tags such as:

<th data-field="dummy1"></th>

[Phil]

Hi All:

I ended up with going away from the <table> route and went with the <div> implementation as follows:

<script type="text/javascript">

    $(document).ready(function () {

        $("#kjsimpleGrid").kendoGrid({

            groupable: true, scrollable: true,

            sortable: true, pageable: true, filterable: true,

            dataSource: {

                transport: { read: { url: "/Grid/GetEmployees"} },

                pageSize: 5

            },

            columns: [

                { title: "Id", field: "EmployeeID", width: 80 },

                { title: "Last", field: "LastName", width: 100 },

                { title: "First", field: "FirstName", width: 100 },

                { title: "Title", field: "Title", width: 200 },

                { title: "City", field: "City", width: 200 },

                { title: "Region", field: "Region"}]

        });

    });

</script>

<div id="kjsimpleGrid">

</div>

And the datasource /Grid/GetEmployees returns Json.

Phil

[shankar parshimoni]

Hi Phil,

Thanks for your reply but i have tried the same thing what you posted but i'm getting the error  like "Microsoft JScript runtime error: Invalid template".

Thanks and Regards,
Parsanamoni.