客户端模板按钮事件未触发

时间:2014-12-11 11:33:29

标签: javascript kendo-ui kendo-grid

我正在尝试在用户点击按钮时显示弹出窗口,但我似乎无法使其工作。我可以在使用自定义命令时触发事件,但我需要在同一列中彼此相邻的文本框和按钮。

为什么这不起作用?

@(Html.Kendo().Grid(Model)
.Name("gridPopup")
.Columns(columns =>
{
    columns.Bound(p => p.ProductName).Width(120);

    columns.Template(@<text></text>).Title("").Width(110).ClientTemplate(
        Html.Kendo().TextBox()
        .Name("search_textfield")
        .Value("").ToClientTemplate().ToString()
        + " " +
        Html.Kendo().Button()
        .Name("search_button")
        .HtmlAttributes(new { type = "button", @class = "k-primary" })
        .Events(e =>
            e.Click("SearchButton")
        )
        .Content("...").ToClientTemplate().ToString()
    );
})

.Editable(editable => editable.Mode(GridEditMode.InCell))
.Pageable()
.Scrollable()
.HtmlAttributes(new { style = "height:320px;" })
.DataSource(dataSource => dataSource
    .Ajax()
    .Batch(true)
    .PageSize(20)
    .ServerOperation(false)
    .Events(events => events.Error("errorHandler"))
    .Model(model =>
    {
        model.Id(p => p.ProductID);
        model.Field(p => p.ProductID).Editable(true);
        model.Field(p => p.CategoryID).DefaultValue(1);
    })

    .Read(read => read.Action("ForeignKeyColumn_Read", "Home"))
    .Update(update => update.Action("ForeignKeyColumn_Update", "Home"))
    .Create(create => create.Action("ForeignKeyColumn_Create", "Home"))
    .Destroy(destroy => destroy.Action("ForeignKeyColumn_Destroy", "Home"))

)
)

<script type="text/javascript">


    function errorHandler(e) {
        if (e.errors) {
            var message = "Errors:\n";
            $.each(e.errors, function (key, value) {
                if ('errors' in value) {
                    $.each(value.errors, function () {
                        message += this + "\n";
                    });
                }
            });
            alert(message);
        }
    }

    function SearchButton(e)
    {
        alert("Search Button Clicked");
    }


</script>

1 个答案:

答案 0 :(得分:0)

奇怪!如果在ClientTemplate()

中使用.Events(e => e.Click("SearchButton")),则不会生成onclick属性

试试这个,它会对你有用,但我会等人来解释它:)

.HtmlAttributes(new { type = "button", @class = "k-primary", onclick = "SearchButton()" })

修改: 我找到的解释是:How do I use a Kendo UI widget inside a Grid client column template?。它说script tags are not automatically evaluated inside a Grid client column template, so any included widgets will not be initialized.

因此在.Events(e => e.DataBound("onDatabound"))

中初始化嵌套控件
function onDatabound()
{
    jQuery("#gridPopup tbody [class='k-primary']").each(function () {
        $(this).kendoButton({ "click": SearchButton });
    })
}