Question

enter image description here 以下是我的html视图。我在html上有以下内容1）文本框（供用户输入关键词）2）应用按钮：点击后获取文本框内输入的文本和其他过滤器（未显示），进行ajax调用如图所示将数据绑定到网格。

我的问题：在kendo网格上，我的一个列是模板列，如下所示。编辑器模板是为该列定义的，如下所示。当他/她在文本区域内（在网格内）键入时，尝试向用户建议“建议/建议标签”。例如当用户输入A; B; C时输入分号我想建议标签;在这种情况下是“A”然后是“B”等等。为了做到这一点，我会喜欢在编辑器模板中的文本区域添加一个文本更改事件类事件。可能吗？如果是这样，我可以知道如何去做吗？

       <input type="text" id="tb_Search" />
       <input type="button" value="Apply" style="width: 140px" onclick="ApplyFiltersToFetch()" />

       @(Html.Kendo().Grid<CurationModuleV3.Models.Model1>()
                    .Name("TGrid").Pageable
                     ().EnableCustomBinding(true)
                    .DataSource(dataSource =>
                    {
                        dataSource.Ajax()
                        .Update(update => update.Action("RefreshGrid", "Home"))
                        .PageSize(10)
                          .Model(model =>
                          {
                              model.Id(t =>t.UserID);
                          }
                     ).Batch(true).ServerOperation(false);
                    })
                    .Columns(columns =>
                    {
                        columns.Bound(t => t.UserID).Visible(false);
                        columns.Bound(t => t.Tags).Title("Tags").EditorTemplateName("TagColumnTemplate").ClientTemplate("<pre name='Tags' id='#=UserID#' style='height: 60px;overflow: auto;margin-top: 0px;margin-bottom: 0px;'>#= Tags#</pre>").Width(180).HtmlAttributes(new { style = "padding:0;top:0;" });
                    }).ToolBar(toolbar =>
                    {
                        toolbar.Save().SaveText("Save all changes");
                    })
            .Editable(editable => editable.Mode(GridEditMode.InCell)).HtmlAttributes(new { style = "height:450px;" }).Scrollable().Sortable().ClientDetailTemplateId("templateForInnerUserGrid"))
    <script>
    function ApplyFiltersToFetch() {
    var searchTextValue;
    var grid = $('#TGrid').data("kendoGrid");
     searchTextValue = document.getElementById("tb_Search").value;
     if (!(searchTextValue == "")){ $('#TGrid').show();
        $.ajax({
            url: '@Url.Action("FetchT", "Home")',
            data: { searchText: searchTextValue},
            type: 'POST',
            dataType: "json",
            success: function (result) {
                grid.dataSource.data(result);
                grid.refresh();
                grid.dataSource.page(1);
            },
            error: function (xhr, ajaxOptions, thrownError) {
                alert(xhr.status);
                alert(thrownError);
            }
        });}
       </script>

      /*****Editor Template*********/
      @model string
      @Html.TextAreaFor(t => t, new {rows = 4, wrap = "hard",style = "text-overflow:ellipsis; display:block; width:94%; height:100%;font-family:Segoe UI , Verdana, Helvetica, Sans-Serif;font-size: 0.85em;" }
                       )

编辑：可能是我不够清楚。我没有尝试在此处为我的搜索文本框绑定任何事件。我只是用我的代码来展示如何将数据绑定到网格中。我不想在我的搜索文本框中使用en事件，但是我希望将一个事件处理程序绑定到网格内的文本区域（显示在编辑中）。在我的网格中输入时，我想向用户建议标签。

Answer 1

将类型添加到脚本标记

<script type="text/javascript">

然后将您的功能更改为

$('#tb_Search').on('keyup', function(){
    //put the function here
});

Answer 2

感谢马特，为我提供了一个开始。因此，我在编辑器模板中包含了类名，如下所示

@model string
@Html.TextAreaFor(t => t, new {rows = 4,*@class="tagColEdit"*,wrap = "hard",style = "text-overflow:ellipsis; display:block; width:94%; height:100%;font-family:Segoe UI , Verdana, Helvetica, Sans-Serif;font-size: 0.85em;"}

）

然后我按照Matt

的建议添加了事件处理程序

$(function () {
    $('#TGrid').on('keypress', '.tagColEdit', function () {
        alert('Hello');
    })
})

将文本更改事件绑定到Kendo Grid - MVC中的编辑器模板中的文本区域

2 个答案: