Kendo MVC网格-未触发NumericTextBox更改事件

时间:2018-09-02 13:01:49

标签: javascript asp.net-mvc kendo-ui kendo-grid kendonumerictextbox

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

我想检测这些数字文本框的更改和旋转事件,但是由于某种原因这些事件不会触发。

剑道网格代码,

@(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网格之外使用相同类型的数字文本框,则它会按预期工作,并在更改(选择数字,键入数字)时触发旋转和更改事件。

因此,我的问题是-为什么当数字文本框位于网格内时不触发更改,旋转事件?任何帮助都感激不尽。谢谢。

2 个答案:

答案 0 :(得分:2)

我不确定您到底出了什么问题,但是您可以尝试创建NumericText的Editor模板并将其放在其中:Shared / EditorTemplates。 看起来像这样:

dateutil

,然后您可以使用元素的ID(在js脚本内部)访问更改和旋转事件。 最后,您可以像这样在网格内调用editorTemplate:

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

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

    });
</script>

答案 1 :(得分:0)

要使更改事件生效,网格必须是可选的。 因此,将.Selectable()添加到网格中。