Kendo MVC Grid - 未触发 NumericTextBox 更改事件

Question

我有一个剑道网格，每行都包含一个数字文本框。

我想检测这些数字文本框的变化和旋转事件，但由于某种原因这些事件没有触发。

剑道网格代码，

@(Html.Kendo().Grid<ContactLenseViewModel>()
    .Name("contactLensesGridOs")
    .Columns(columns =>
    {
        columns.Bound(p => p.Id).Title("Id").Hidden();
        columns.Bound(p => p.Description).Title("Description");

        columns.Bound(p => p.CostPrice).Title("Cost Price");
        columns.Bound(p => p.SellingPrice).Title("Selling Price");


        //numeric increment
        columns.Bound(p => p.ItemQuantity).ClientTemplate(Html.Kendo().NumericTextBox()
        .Name("clItemQuantityOs_#=Id#")
        .HtmlAttributes(new { value = "#=ItemQuantity #" })
        .Min(0)
        .Max(5)
        .Step(1)
        .Decimals(0)

        .Events(e => e
            .Change("change")
            .Spin("spin")
        )
        .ToClientTemplate().ToHtmlString());


    })
    .ToolBar(toolbar =>
    {
        toolbar.Template(@<text>
        <div class="toolbar">
            <div class="row">
                <div class="col-md-3">
                    <div class="input-group">
                        <span class="input-group-addon"><span class="glyphicon glyphicon-search" aria-hidden="true"></span></span>
                        <input type="text" class="form-control" id='FieldFilterOs' placeholder="Search for...">

                    </div>
                </div>                  
            </div>
        </div>
        </text>);

            })
.Events(e =>
{
    e.DataBound("GridBound");
    e.Change("Grid_OnRowSelect");
})
.Pageable()
.Sortable() 
.Scrollable()
.HtmlAttributes(new { style = "height:400px;" })
.DataSource(dataSource => dataSource
    .Ajax()
    .PageSize(5)
    .Events(events => events.Error("error_handler"))
    .Model(model => model.Id(p => p.Id))

    .Read(read => read.Action("SearchData", "Cls").Data("searchInputsOs"))
)
)

使用的 Change 和 spin 事件是，

<script type="text/javascript">

        $(document).ready(function () {
            //....
        });           


        function change() {

            alert("Change :: " + this.value());
        }

function spin() {
            alert("Spin :: " + this.value());
        }
</script>

如果我在剑道网格之外使用相同类型的数字文本框，它会按预期工作并在更改时触发旋转和更改事件（选择数字、输入数字）。

所以，我遇到的问题是 - 为什么当数字文本框位于网格内时不会触发更改、旋转事件？任何帮助都感激不尽。谢谢。

Answer 1

我不确定您的问题到底是什么，但您可以尝试创建 NumericText 的编辑器模板并将其放入：Shared/EditorTemplates。 看起来像这样：

 @Html.Custom_DropdownList("ArticleId", ViewData["articles"] as SelectList, new { @class = "form-control validate[required]  ", style = "width:100%" })

<script>
    $(function () {
        $('#ArticleId').select2();

    });
</script>

然后您可以使用元素的 ID（在 js 脚本中）访问更改和旋转事件。 最后你可以像这样在网格中调用你的 editorTemplate ：

:columns.Bound(p => p.ArticleId).EditorTemplateName("DossierListe").Title("Catégorie").ClientTemplate("#= Article#");

Answer 2

为此，当在 kendo MVC 网格中使用时，我找不到解决 NumericTextBox 问题的方法。

作为一种解决方法，我使用了剑道网格的内联单元格编辑模式，并仅在 ItemQuantity 列中启用了编辑功能。由于 ItemQuantity 是一个数字，因此在编辑模式中，网格会自动添加一个 type="number" 的输入字段，这有助于实现与使用 NumericTextBox 相同的效果。

新的剑道网格代码如下。

@(Html.Kendo().Grid<ContactLenseViewModel>()
                                    .Name("contactLensesGridOd")
                                    .Columns(columns =>
                                    {
                                        columns.Bound(p => p.Id).Title("Id").Hidden();
                                        columns.Bound(p => p.Description).Title("Description");
                                        columns.Bound(p => p.Daily).Title("Daily").Hidden();
                                        columns.Bound(p => p.Daily).ClientTemplate("#= Daily ? 'Yes' : 'No'#").Title("Daily");
                                        columns.Bound(p => p.Stigimatism).Title("Stigimatism").Hidden();
                                        columns.Bound(p => p.Stigimatism).ClientTemplate("#= Stigimatism ? 'Yes' : 'No'#").Title("Stigimatism");
                                        columns.Bound(p => p.NumberOfLensesInBox).Title("Number Of Lenses In Box");
                                        columns.Bound(p => p.NameOfLenses).Title("Name Of Lenses").Width(125);
                                        columns.Bound(p => p.Brand).Title("Brand");
                                        columns.Bound(p => p.CostPrice).Title("Cost Price");
                                        columns.Bound(p => p.SellingPrice).Title("Selling Price");
                                        columns.Bound(p => p.ItemQuantity).Title("Quantity").HtmlAttributes(new {@class = "numericIncrementer" });

                                        //columns.Bound(p => p.ItemQuantity).ClientTemplate("<input type='number' name='quantity' min='1' max='5'>");

                                        //columns.Bound(p => p.ItemQuantity).ClientTemplate(Html.Kendo().NumericTextBox()
                                        //    .Name("clItemQuantityOs_#=Id#")
                                        //    .HtmlAttributes(new { value = "#=ItemQuantity #" })
                                        //    .Min(0)
                                        //    .Max(5)
                                        //    .Step(1)
                                        //    .Decimals(0)
                                        //    .ToClientTemplate().ToHtmlString());

                                    })
                                    .ToolBar(toolbar =>
                                    {
                                    toolbar.Template(@<text>
                                        <div class="toolbar">
                                            <div class="row">
                                                <div class="col-md-3">
                                                    <div class="input-group">
                                                        <span class="input-group-addon"><span class="glyphicon glyphicon-search" aria-hidden="true"></span></span>
                                                        <input type="text" class="form-control" id='FieldFilterOd' placeholder="Search for...">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </text>);

                                    })
                                    .Events(e =>
                                    {
                                        e.Save("CellChangedRight");
                                        e.DataBound("GridBoundRight");
                                    })
                                    .Editable(editable => editable.Mode(GridEditMode.InCell))
                                    .Pageable(pageable => pageable.Refresh(false))
                                    .Sortable()
                                    .Selectable()
                                    .Scrollable()
                                    .HtmlAttributes(new { style = "height:400px;" })
                                    .DataSource(dataSource => dataSource
                                        .Ajax()
                                        .PageSize(5)
                                        .Events(events => events.Error("error_handler"))
                                        .ServerOperation(false)
                                    .Model(model =>
                                    {
                                        model.Id(p => p.Id);
                                    })
                                    .Model(model =>
                                    {
                                        model.Id(p => p.Id);
                                        model.Field(p => p.Description).Editable(false);
                                        model.Field(p => p.Daily).Editable(false);
                                        model.Field(p => p.Stigimatism).Editable(false);
                                        model.Field(p => p.NumberOfLensesInBox).Editable(false);
                                        model.Field(p => p.NameOfLenses).Editable(false);
                                        model.Field(p => p.Brand).Editable(false);
                                        model.Field(p => p.CostPrice).Editable(false);
                                        model.Field(p => p.SellingPrice).Editable(false);

                                    })
                                    .Read(read => read.Action("SearchContactLensesUnpaged", "Cls").Data("searchInputsOd"))
                                )
                    )

我这样从JS文件中读取项目数量值的变化，

function CellChangedRight(e) {

  if (e.values != null && e.model.Id != null) {
     var grid = e.sender;
     var changedProperty = Object.getOwnPropertyNames(e.values)[0];
     var currentId = e.model.Id;  // Edited columns Id value
     var currentQty = e.values[changedProperty];   // New value inserted by user     

  }    
}

请注意，上面的代码是在网格中编辑单元格时触发的，因为网格具有以下配置。

.Events(e =>
      {
           e.Save("CellChangedRight");
           e.DataBound("GridBoundRight");
      })

希望这项工作对面临类似情况的人有所帮助。

Answer 3

要使更改事件起作用，网格需要是可选的。 因此，将 .Selectable() 添加到您的网格中。