KendoUI ASP.Net MVC網格-如何添加行客戶端？

Question

我試圖實現一個非常簡單的網格，能夠通過工具欄按鈕添加新行。 文檔中提供的所有示例似乎均未達到預期的效果。

@model Models.MyModel

@{
    ViewBag.Title = "Simple Grid";
}

<div class="container-fluid">
    <div class="row"></div>
    <div class="row">
        <div class="col-xs-11">
            @(Html.Kendo().Grid<Models.MyModel>()
            .Name("myGrid")
            .ToolBar(toolbar => {
                toolbar.Create().Text("Add New Row");
            })
            .Columns(columns => {
                columns.Bound(p => p.Name).Width(200);
                columns.Bound(p => p.Header1).Width(100);
                columns.Bound(p => p.Header2).Width(100);
            })
            .Scrollable()
            .Editable(ed => ed.Mode(GridEditMode.InLine).CreateAt(GridInsertRowPosition.Bottom))
            .HtmlAttributes(new { style = "height:350px;" })
            .DataSource(ds => ds
                .Custom()
                .Schema(schema => schema
                        .Model(model => {
                            model.Id("Id");
                            model.Field("Name", typeof(string));
                            model.Field("Header1", typeof(string));
                            model.Field("Header2", typeof(string));
                        })
                    )
                )
            )
        </div>
    </div>
</div>

上面是一個簡單的index.chtml頁面，它使用布局頁面並注入所有jQuery和KendoUI腳本。

加載頁面時出現JS錯誤無法獲取未定義或空引用的屬性“ nodeName”

不確定為什么會發生這種情況，但是單擊繼續，將顯示預期的空白網格。

單擊“添加新行”工具欄按鈕會導致另一個JS錯誤（與上面相同）

問題：我是否在網格上缺少配置選項？ 根據文檔，這應該是“開箱即用”的。 我要實現的只是一個簡單的網格，每次單擊“添加”按鈕時，該網格都會添加一個新的空行。

Answer 1

雖然一開始很難看，但是使用Custom()配置不僅僅需要設置.Schema()配置。 您可以參考“ 自定義數據源”文檔文章中的示例以獲取對此的引用。 每個樣本至少具有定義為read配置集的傳輸字段，以便數據源知道從何處讀取數據。

由於您在此處執行CRUD操作，因此我還建議您設置其他傳輸字段（創建，讀取，更新，銷毀），以確保您可以使用控制器並與后端正確通信。

快速說明一下，如果您在Telerik站點附近搜索unable to get property 'nodeName' of undefined or null reference錯誤，則會開始提示該錯誤是由於組件配置錯誤所致。 它不是特定於Grid的，但確實會不時彈出，並且問題幾乎總是歸結為配置選項。

現在，要解決此特定問題，我建議您使用Ajax綁定而不是自定義綁定。 Ajax綁定非常易於使用，非常適合這種情況，在這種情況下，您希望將簡單的Grid添加到頁面中，而無需使用更高級的功能來獲得更高級的配置。 另外，您可以與客戶端模型一起為服務器端設置驗證等（無需手動設置架構）。

或者，也可以僅將傳輸字段配置設置為有效的ActionResults或URL，以正確地來回推送信息。

首次實施任何新產品時，我總是建議您仔細閱讀以下文檔，並從較小的示例開始並在那里建立表單。 如果您要使用自定義數據源，那么我想說的是從更大的配置開始，然后刪除片段，直到獲得所需的最小片段。