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

Question

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

知道为什么这不起作用吗？

@(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>

Answer 1

奇怪! .Events(e => e.Click("SearchButton")) 如果在 ClientTemplate() 中使用则不会生成 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 标签不会在 Grid 客户端列模板中自动评估，因此不会初始化任何包含的小部件。

因此在.Events(e => e.DataBound("onDatabound"))中初始化嵌套控件

function onDatabound()
{
    jQuery("#gridPopup tbody [class='k-primary']").each(function () {
        $(this).kendoButton({ "click": SearchButton });
    })
}