我有一个剑道网格,每行包含一个数字文本框。
我想检测这些数字文本框的更改和旋转事件,但是由于某种原因这些事件不会触发。
剑道网格代码,
@(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网格之外使用相同类型的数字文本框,则它会按预期工作,并在更改(选择数字,键入数字)时触发旋转和更改事件。
因此,我的问题是-为什么当数字文本框位于网格内时不触发更改,旋转事件?任何帮助都感激不尽。谢谢。
答案 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()添加到网格中。