21

I'm new in using Kendo Grid and Kendo UI . My question is how can i resolve this Error

Uncaught TypeError: Cannot read property 'replace' of undefined 

This is my Code on my KendoGrid

$("#Grid").kendoGrid({
            scrollable: false,
            sortable: true,
            pageable: {
                refresh: true,
                pageSizes: true
            },
            dataSource: {
                transport: {
                    read: {
                        url: '/Info/InfoList?search=' + search,
                        dataType: "json",
                        type: "POST"
                    }

                },
                pageSize: 10
            },
            rowTemplate: kendo.template($("#rowTemplate").html().replace('k-alt', '')),
            altRowTemplate: kendo.template($("#rowTemplate").html())
        });

Line that Causes the Error

rowTemplate: kendo.template($("#rowTemplate").html().replace('k-alt', '')),

HTML of rowTemplate

 <script id="rowTemplate" type="text/x-kendo-tmpl">   
        <tr class='k-alt'>
            <td>
                ${ FirstName } ${ LastName }
            </td>
        </tr>
            </script>
3
  • 2
    the only reason I can see is that jQuery is not able to find the element with id rowTemplate... can you log the value of $("#rowTemplate").length and see what is returned Apr 29, 2014 at 2:46
  • @ArunPJohny it returns 0
    – Ren Tao
    Apr 29, 2014 at 6:21
  • that is the reason... there are no element with id rowTemplate in your page Apr 29, 2014 at 6:26

5 Answers 5

26

I think jQuery cannot find the element.

First of all find the element

var rowTemplate= document.getElementsByName("rowTemplate");

or

var rowTemplate = document.getElementById("rowTemplate"); 

or

var rowTemplate = $('#rowTemplate');

Then try your code again

rowTemplate.html().replace(....)
2

It could be because of the property pageable -> pageSizes: true.

Remove this and check again.

1

Please try with the below code snippet.

<!DOCTYPE html>
<html>
<head>
    <title>Test</title>
    <link href="http://cdn.kendostatic.com/2014.1.318/styles/kendo.common.min.css" rel="stylesheet" />
    <link href="http://cdn.kendostatic.com/2014.1.318/styles/kendo.default.min.css" rel="stylesheet" />
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://cdn.kendostatic.com/2014.1.318/js/kendo.all.min.js"></script>
    <script>
        function onDataBound(e) {
            var grid = $("#grid").data("kendoGrid");
            $(grid.tbody).find('tr').removeClass('k-alt');
        }

        $(document).ready(function () {
            $("#grid").kendoGrid({
                dataSource: {
                    type: "odata",
                    transport: {
                        read: "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"
                    },
                    schema: {
                        model: {
                            fields: {
                                OrderID: { type: "number" },
                                Freight: { type: "number" },
                                ShipName: { type: "string" },
                                OrderDate: { type: "date" },
                                ShipCity: { type: "string" }
                            }
                        }
                    },
                    pageSize: 20,
                    serverPaging: true,
                    serverFiltering: true,
                    serverSorting: true
                },
                height: 430,
                filterable: true,
                dataBound: onDataBound,
                sortable: true,
                pageable: true,
                columns: [{
                    field: "OrderID",
                    filterable: false
                },
                            "Freight",
                            {
                                field: "OrderDate",
                                title: "Order Date",
                                width: 120,
                                format: "{0:MM/dd/yyyy}"
                            }, {
                                field: "ShipName",
                                title: "Ship Name",
                                width: 260
                            }, {
                                field: "ShipCity",
                                title: "Ship City",
                                width: 150
                            }
                        ]
            });
        });
    </script>
</head>
<body>
    <div id="grid">
    </div>
</body>
</html>

I have implemented same thing with different way.

0

In my case, I was using a View that I´ve converted to partial view and I forgot to remove the template from "@section scripts". Removing the section block, solved my problem. This is because the sections aren´t rendered in partial views.

0

It is important to define an id in the model

.DataSource(dataSource => dataSource
        .Ajax()
        .PageSize(20)
        .Model(model => model.Id(p => p.id))
    )
1
  • 2
    Please only english, do not add translation for other languages. Nov 25, 2016 at 12:10

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.