Uncaught TypeError: kan eigenschap ‘replace’ van undefined In Grid niet lezen

Ik ben nieuw in het gebruik van Kendo Grid en Kendo UI. Mijn vraag is hoe ik deze fout kan oplossen

Uncaught TypeError: Cannot read property 'replace' of undefined 

Dit is mijn code op mijn 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())
        });

Lijn die de fout veroorzaakt

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

HTML van rowTemplate

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

Antwoord 1, autoriteit 100%

Ik denk dat jQuery het element niet kan vinden.

Zoek eerst het element

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

of

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

of

var rowTemplate = $('#rowTemplate');

Probeer vervolgens uw code opnieuw

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

Antwoord 2, autoriteit 8%

Het kan zijn vanwege de eigenschap pageable -> pageSizes: true.

Verwijder dit en controleer opnieuw.


Antwoord 3, autoriteit 4%

Probeer het met het onderstaande codefragment.

<!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="https://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="https://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>

Ik heb hetzelfde op een andere manier geïmplementeerd.


Antwoord 4

In mijn geval gebruikte ik een weergave die ik heb geconverteerd naar een gedeeltelijke weergave en ik vergat de sjabloon uit “@section-scripts” te verwijderen. Door het sectieblok te verwijderen, is mijn probleem opgelost. Dit komt omdat de secties niet in gedeeltelijke weergaven worden weergegeven.


Antwoord 5

Het is belangrijk om een ​​id in het model te definiëren

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

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Other episodes