This is a migrated thread and some comments may be shown as answers.

JS kendoGrid applied to MVC grid, problem.

4 Answers 152 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Phil
Top achievements
Rank 2
Phil asked on 12 Jun 2012, 12:34 AM
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;'

4 Answers, 1 is accepted

Sort by
0
Jeremiah
Top achievements
Rank 1
answered on 09 Jul 2012, 03:41 PM
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.
0
Paul
Top achievements
Rank 1
answered on 10 Jul 2012, 08:19 PM
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>


0
Phil
Top achievements
Rank 2
answered on 18 Jul 2012, 12:55 AM
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
0
shankar parshimoni
Top achievements
Rank 1
answered on 30 Nov 2012, 05:35 AM
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.
Tags
Grid
Asked by
Phil
Top achievements
Rank 2
Answers by
Jeremiah
Top achievements
Rank 1
Paul
Top achievements
Rank 1
Phil
Top achievements
Rank 2
shankar parshimoni
Top achievements
Rank 1
Share this question
or