使用带有ajax表单的自定义窗口添加新的网格行

Question

我需要创建一个更新的方法来向kendo网格添加新元素，所以简而言之，我已经复制了以下示例，因为它完全符合我的需要：https://github.com/telerik/ui-for-aspnet-mvc-examples/tree/master/window/KendoWindow-Ajax-Form

它工作得很好。唯一的区别是新行被添加到网格中的正确位置，而不是按照惯例添加到顶部。我如何使用链接的示例将新行放在顶部？

（我认为没有必要在这里显示我的代码，因为它非常类似于上面链接中给出的代码）

Answer 1

因此，如果您想在顶部添加一行，我想您可以使用自定义模板。我可能不太清楚你在做什么，但我会尽力帮助你。这是代码中的网格：`

     @(Html.Kendo().Grid<OrderViewModel>()

                    .Name("grid")
                    .Columns(columns =>
                     {
                      columns.Bound(c => c.Message).EditorTemplateName("MessageEditor");
                     }
                    .DataSource(datasource => datasource

                        .Ajax()

                        .Read(read => read.Action("GetOrders", "OrdersData"))



                )

                )`

然后像这样写模板：

<script type="text/x-kendo-template" id="MessageEditor">
    <div class="k-header k-grid-toolbar">

        <div style="display: inline-block; font-size:1.25em; padding: 
        </div>
    </div>

</script>

嗯，这可能不是最好的解决方案，但这是我知道在Kendo网格中创建自定义列的唯一方法

Answer 2

最后我自己找到了解决方案。通过我在原帖中所做的链接中的示例，这就是我所做的：首先，当新的“订单”生成时，我确保在OrdersDataController的“Create”方法中返回的模型具有从何时开始的ID该模型已添加到DB中。所以当这个部分在“_OrdersCreate.cshtml”中执行时：

@if (Model != null && ViewData.ModelState.IsValid)
{
    <script>
        closeCreatePopup();
    </script>
}

我发送有关新订单的信息。所以为此我修改了“closeCreatePopup（）”来处理参数。因此，对于完成的结果，我将使用我自己的项目中的一段代码，以下是我的“closeCreatePopup（）”的实现：

function closeCreateEmployeeWindow(name, rHPersonID, personID, organizationID) {
    if (name !== undefined
        && rHPersonID !== undefined
        && personID !== undefined
        && organizationID !== undefined) {

        var grid = $("#grid").data("kendoGrid");
        grid.dataSource.insert({ Name: name, RHPersonID: rHPersonID, PersonID: personID, OrganizationID: organizationID });
        grid.dataSource.sync();
    }

    var wnd = $("#createEmployeeModal").data("kendoWindow");
    wnd.refresh({ url: '@Url.Action("CreateEmployee", "Employee", new { Area = "Administration" })' });
    wnd.close();
}

重要的是这个：

var grid = $("#grid").data("kendoGrid");
grid.dataSource.insert({ Name: name, RHPersonID: rHPersonID, PersonID: personID, OrganizationID: organizationID });
grid.dataSource.sync();

这里发生的是我使用网格中的“插入”方法，并添加一个新对象。 “插入”将新对象插入网格的最顶部。记得立即调用“同步”方法。

通过这样做，复制了网格中内置的常规“创建”方法。