javascript - Kendo MVC Grid - 未触发 NumericTextBox Change 事件

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>

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

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

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#");