Kendo UI Grid 获取当前元素 javascript 的 ID

Kendo UI Grid get id of current element javascript

本文关键字:元素 javascript ID UI Grid 获取 Kendo      更新时间:2023-09-26

我正在使用Kendo UI apsnet,我在第三列中有一个带有自动组件作为模板的Gird,我想使用javascript函数"onAutoCompleteX"发送数据,在这个函数中,我想获取活动自动完成的id,以将文本作为参数发送到操作"GetArticle",但我的问题是如何获取此id,尝试了许多方法总是得到"未定义"或错误

@using KendoUIMvcApplication2.Areas.Gescom.Models.Achat

<style>
    .k-widget .templateCell
    {
        overflow: visible;
    }
</style>
 <script> 
    function initMenus(e) {
        $(".templateCell").each(function () {
            eval($(this).children("script").last().html());
        });
    }
    function onAutoCompleteSelectX(e) {
        var dataItem = this.dataItem(e.item.index());
        var url = '@Url.Action("GetArticle", "Fiche")';
        $.ajax({
            url: url,
            data: { code: dataItem.Code }, //parameters go here in object literal form
            type: 'GET',
            datatype: 'json',
            success: function (data) {
                if (data == null)
                    document.getElementById('labelx').innerHTML = "null";
                else
                    document.getElementById('labelx').innerHTML = data.Code;
            },
            error: function () {
                document.getElementById('labelx').innerHTML = "error";
            }
        });
    }

     function onAutoCompleteX() {
         var currentId = $(this).attr('id');
         //var currentId = $(this).id;
         //document.getElementById('labelx').innerHTML = $(this).className; //$obj.attr('id');
         return {
             text: document.getElementById(currentId).value
             //text: $("#id_of_another_autocomplete").val() works fine when i set static id manually
         };
     }
</script>
<div class="lines-tab-doc">
    @(Html.Kendo().Grid<LineAppelOffre>()
        .Name("grid-lines-doc")
        // Declare grid column
        .Columns(columns =>
        {
            // Cretae all the columns base on Model
            columns.Bound(l => l.Document);
            columns.Bound(l => l.LigneOriginale);
            columns.Template(l => { }).Title(@Resources.Resource.Article)
                .HtmlAttributes(new { @class = "templateCell" })
                .ClientTemplate(
                    Html.Kendo().AutoComplete()
                    .Name("Article")
                    .HtmlAttributes(new { id = "#=LigneOriginale#", style = "width:100%;" })
                    .DataTextField("Code")
                    .Filter(FilterType.Contains)
                    .DataSource(source =>
                        {
                            source.Read(read =>
                                {
                                    read.Action("GetArticles", "Fiche").Data("onAutoCompleteX");
                                })
                            .ServerFiltering(true);
                        })
                    .Events(e => { e.Select("onAutoCompleteSelectX"); }).ToClientTemplate().ToHtmlString()
            );
            columns.Bound(l => l.Fournisseur);
            columns.Bound(l => l.RefArtFrs);
            // Edit and Delete button column
            columns.Command(command =>
            {
                command.Edit();
                command.Destroy();
            }).Width(200);
        })
        .Events(ev => ev.DataBound("initMenus"))
        // Declare ajax datasource.
        // CRUD operation are wired back to ASP MVC Controller/Action e.g. HomeController, GetAll
        // Set the model Id
        .DataSource(datasoure => datasoure.Ajax()
                                    .Model(model => 
                                        {
                                            //model.Id(l => l.Document);
                                            model.Id(l => l.LigneOriginale);
                                        })
                                    .Read(read => read.Action("LinesAppelOffre_Read", "Achat"))
                                    .Create(create => create.Action("LinesAppelOffre_Add", "Achat"))
                                    .Update(update => update.Action("LinesAppelOffre_Update", "Achat"))
                                    .Destroy(delete => delete.Action("LinesAppelOffre_Delete", "Achat"))
                                    .PageSize(10)
        )
        // Add tool bar with Create button
        .ToolBar(toolbar => toolbar.Create())
        // Set grid editable.
        .Editable(editable => editable.Mode(GridEditMode.InCell))
        .Scrollable(scr=>scr.Height(327))
        .Sortable()
        .Selectable()
        .Navigatable()
        .Pageable(pageable =>
                      {
                          pageable.Refresh(true);
                          pageable.PageSizes(true);
                          pageable.Messages(msg => msg.Empty(null));
                      })
    )
</div>
您可以

像这样获取自动完成 ID:

 function onAutoCompleteX(e) {
     var currentId = e.sender.element.attr('id');
     ...
 }

但是我不确定您是否将显式名称设置为"文章".Name("Article")即使您使用属性设置它,您也不会总是将"Artilcle"作为 id .HtmlAttributes

如果是这样,只需尝试使用不同的属性,然后 id 和 get 是相同的方式。

我使用了document.activeElement

浏览器兼容性

铬 2

火狐(壁虎)3.0

IE浏览器 4

歌剧 9.6

野生动物园 4.0