Table- Parsing（Kendo UI Grid）：捕获从 View 发送到 Controller 的模型的详细信息

Question

这里的主要问题是使用 InCell 编辑设置验证 Kendo Grid。

Kendo UI 网格不过是一个“美化表格”——它最终是一个 Html 表格，因此我将 JQuery 和 JavaScript 标记到这个问题中！

这是网格：

@(Html.Kendo().Grid<Timeshet.Web.Models.UserModel>()
    .Name("Grid")
    .Editable(editable => editable.Mode(GridEditMode.InCell).DisplayDeleteConfirmation("This user will now be removed from the grid. \n\n To commit this delete make sure you click Save Changes button !"))
    .Sortable(sortable => sortable.AllowUnsort(false))
    .ToolBar(toolbar =>
        {
            toolbar.Create();
            toolbar.Save();
        })
                    .Columns(columns =>
                                 {
                                     //columns.Bound(p => p.UserId);
                                     columns.Bound(p => p.Forename);
                                     columns.Bound(p => p.Surname);
                                     columns.Bound(p => p.Email);
                                     columns.Bound(p => p.Txtname);
                                     columns.Bound(p => p.Mobile);
                                     columns.Bound(p => p.HolidayEntitlement);
                                     columns.Bound(p => p.Password);
                                     columns.Bound(p => p.Level);
                                     columns.Bound(p => p.Active).ClientTemplate("<input type='checkbox' class='chkboxActive' #= Active ? checked='checked' : '' # ></input>");
                                     columns.Bound(p => p.UserAccess);
                                     columns.Command(command => command.Destroy()).Width(100).Visible(User.IsInRole(Constants.Admin)).Hidden();
                                 })
   // .Events(events => events.SaveChanges("validateInputOnSaveChanges"))
    .DataSource(dataSource => dataSource.Ajax()
        .Model(model => model.Id(p => p.UserId))
        .Batch(true)
        //.Events(events=>events.Change("validateInputOnSaveChanges"))
        .Events(events => events.Error("error"))
//        .Events(events => events.RequestStart("requestStart"))
        .Events(events =>  events.RequestEnd("onRequestEnd"))
        .Create(update => update.Action("UserCreate", "User"))
        .Read(read => read.Action("UserRead", "User").Data("ExtraData"))
        .Update(update => update.Action("UserUpdate", "User"))
        .Destroy(update => update.Action("UserDelete", "User"))
                )
      )

如您所见，它具有 inCell 编辑模式，其验证被证明是困难的。

我试图解析网格并寻找在这样的编辑单元格上启用的 k-dirty-class。我在网格的 saveChanges 事件上执行此操作，单击保存更改按钮时会触发该事件：

$("#Grid tbody").find('td').each(
    function () {
        debugger;

        // run for specific columns - where validation is needed
      //  var isDirty = cellToValidate.hasClass('k-dirty-cell');

       var isDirty = $(this).hasClass('k-dirty-cell');
        if (isDirty == true) {

            var cellContent = $(this).context.innerText;
            var cellIndex = $(this).context.cellIndex;

            alert(cellContent + cellIndex);

        }
    });

我要解决的问题是，当用户创建新用户（行）并输入名字和姓氏并保存时 - 网格不会验证 TxtName 列，因为它设置为 InCell 编辑模式，其中只有单击的单元格会根据视图模型进行验证。

这必须在 InCell 编辑模式下完成。内联编辑有效，但这不是这里的要求。

我的计划是验证脏单元格上的输入，但这也很困难，因为并非所有脏单元格都需要验证，只有 TextName 列！

我想知道我是否可以捕获发送到控制器的新行的详细信息，这基本上是视图模型？

非常感谢。

Answer 1

我会为遍历网格行的 saveChanges 事件编写一个验证方法

你可以像这样遍历行：

var currentRows = grid.tbody.find("tr");

一旦你有了你的行，你需要获取每个数据项 (grid.dataItem(currentRows[i]))，然后检查一个属性，你可以确定插入的行不会尚未分配。

对于我们的特定模型，我们使用了一个名为 model.ticketID 的属性，因为票证 ID 仅在数据库插入后创建。

从这里，您可以为行设置自己的验证，或者您可以为行打开可编辑，并使用 kendo 推荐的方法进行验证。

Answer 2

对于那些可能有/或可能有这个问题的人；这就是我最终解决它的方式：

我使用网格的 saveChanges 事件来查找脏单元格，然后从那里到达父行，然后从那里导航到需要验证的单元格；获取其文本并进行验证 - 在我的情况下，我只想验证输入值是否为空：

//On Kendo UI grid: 

.Events(events => events.SaveChanges("validateInputOnSaveChanges"))

// JavaScript 函数：

function validateInputOnSaveChanges(e) {
    //Validate TxtName field
    var columnIndex = 3; // Index of the column to validate

    $("#Grid tr td").each(function () {

        var dirty = $(this).hasClass('k-dirty-cell');

        if (dirty == true) {
            var TxtName = $(this).parent().children()[columnIndex].innerText; // Get the text input in this field

            if (TxtName === "") { // validate
                e.preventDefault(true); // halt the Create function of DataSource
                alert("Txt Name Cannot be Blank.");
                return false; // quit the loop
            }
        }
        return true;
    });
}

亲切的问候， t_plusplus