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

Question

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

而且效果很好。唯一的区别是新行添加在网格中的正确位置，而不是像往常一样在顶部。我如何使用 linked 的示例将新行放在顶部？

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

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

最终我自己找到了解决方案。按照我在原始 post 中制作的 link 中的示例，这就是我所做的：首先，当创建一个新的 "order" 时，我确保在 OrdersDataController 的 "Create" 方法中返回的模型具有从模型添加到数据库时的 ID。所以当这部分在“_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();

这里发生的事情是我使用网格中的 "insert" 方法，并添加一个新对象。 "Insert" 将新对象插入到网格的最顶部。记得紧接着调用"sync"方法。

通过这样做，复制了网格中内置的正常 "create" 方法。

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

Using a custom window with ajax form to add new grid row

kendo-ui

kendo-grid

kendo-asp.net-mvc

kendo-window