Question

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

Kendo UI网格只不过是一个'Glorified table' - 它最终是一个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);

        }
    });

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

这必须在InCell编辑模式下完成。内联编辑可以使用，但这不是必需的。

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

我想知道无论如何我可以捕获发送到控制器的新行的细节，这基本上是视图模型？

非常感谢。

Answer 1

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

你可以循环遍历这些行：

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

获得行后，您需要获取每个dataItem（ grid.dataItem（currentRows [i]）），然后检查一个属性，确定插入的行不会尚未分配。

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

从这里开始，您可以为行设置自己的验证，或者可以为行添加可编辑的内容，并使用kendo建议的方法进行验证。

Answer 2

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

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

//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

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

2 个答案: