it-swarm.com.de

Nicht abgerufener TypeError: Die Eigenschaft 'replace' von undefined In Grid kann nicht gelesen werden

Ich bin neu in Kendo Grid und Kendo UI. Meine Frage ist, wie ich diesen Fehler beheben kann

Uncaught TypeError: Cannot read property 'replace' of undefined 

Dies ist mein Code auf meinem 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())
        });

Zeile, die den Fehler verursacht

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

HTML von rowTemplate

 <script id="rowTemplate" type="text/x-kendo-tmpl">   
        <tr class='k-alt'>
            <td>
                ${ FirstName } ${ LastName }
            </td>
        </tr>
            </script>
13
Ren Tao

Ich denke, dass jQuery das Element nicht finden kann.

Finden Sie zuerst das Element

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

oder

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

oder

var rowTemplate = $('#rowTemplate');

Dann versuchen Sie es noch einmal

rowTemplate.html().replace(....)
22
Dr.Nyanpasu

Es könnte an der Eigenschaft pageable -> pageSizes: true liegen. 

Entfernen Sie das und überprüfen Sie es erneut.

2
user3724031

Bitte versuchen Sie es mit dem folgenden 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>

Ich habe dasselbe auf unterschiedliche Weise umgesetzt.

1
Jayesh Goyani

In meinem Fall habe ich eine Ansicht verwendet, die ich in eine Teilansicht konvertiert habe, und ich habe vergessen, die Vorlage aus "@section-Skripts" zu entfernen. Das Entfernen des Abschnittsblocks hat mein Problem gelöst. Dies liegt daran, dass die Abschnitte nicht in Teilansichten gerendert werden.

0
Vinícius Rosa

Es ist wichtig, eine ID im Modell zu definieren

.DataSource(dataSource => dataSource
        .Ajax()
        .PageSize(20)
        .Model(model => model.Id(p => p.id))
    )
0
M. Loza