包含有唯一ID的用户控件的分层网格

Question

我有一个嵌套的Kendo Grid，它包含一个TabStrip控件，该控件包含从初始div元素生成的多个kendoComboBox。

网格在Javascript中生成：

$("#configAddGrid").kendoGrid({
        dataSource: gridConfigDataSourceAdd,
        height: 550,
        detailTemplate: kendo.template($("#templateAdd").html()),
        detailInit: detailAddInit,
        navigatable: true,
        autoBind: false,
        editable: {
            mode: "incell"
        },
        toolbar: ["create"],
        columns: columnSchemaAdd
    });

下面定义了kendo-template。TabStrip是使用每行的ID字段唯一标识的：

@(Html.Kendo().TabStrip()
        .Name("tabStripAdd_#=ID#")
        .SelectedIndex(0)
        .Animation(animation => animation.Open(open => open.Fade(FadeDirection.In)))
        .Items(items =>
        {
                items.Add().Text((string)ViewBag.ControlSetLots[0].LotNumber).Content(@<text>

                    <p>StandardComment: </p>
                    <div id='Lot1StandardCommentDropDownAdd_#=ID#' class='Lot1StandardCommentDropDownAdd'>    
                    </div> 
                    <p>Review Comment: </p>
                    <div id='Lot1ReviewCommentDropDownAdd_#=ID#' class='Lot1ReviewCommentDropDownAdd'>        
                    </div>

                   </text>
                );
            }...

我的计划是通过ComboBox函数初始化每个Kendo ComboBox，也就是说，一旦发送了扩展行的请求。ComboBox的创建将基于div的唯一ID。但是，分配给div的div在使用检查器窗口(emptyID.png)检查时是空的，即使它被附加到TabStrip控件中。

function detailAddInit(e) {
    var closestCB = e.detailRow.find('.Lot1StandardCommentDropDownAdd');        

    createStandardCommentDropDown("#Lot1StandardCommentDropDownAdd");
    createReviewCommentDropDown("#Lot1ReviewCommentDropDownAdd");            
    kendo.bind(e.detailRow, e.data);
}

有什么方法可以将相同的ID附加到我的div的末尾，使它成为唯一的？

​

此外，如果有人能想出一个更好的方法来实现同样的结果，请随时评论，因为我是开放的建议。

Answer 1

我找到了一个解决方案，以确保每个ComboBox都分配一个唯一的ID。

1)删除了在ID中分配的cshtml

@(Html.Kendo().TabStrip()
        .Name("tabStripEdit_#=ID#")
        .SelectedIndex(0)
        .Animation(animation => animation.Open(open => open.Fade(FadeDirection.In)))
        .Items(items =>
        {                
            items.Add().Text((string)ViewBag.ControlSetLots[0].LotNumber).Content(@<text>

                <p>Standard Comment: </p>
                <div class='Lot1StandardCommentDropDownEdit'>
                </div>
                <p>Review Comment: </p>
                <div class='Lot1ReviewCommentDropDownEdit'>
                </div>

                </text>
            );
        }

2)修改了detailAddInit(e)函数，使用从Grid请求嵌套detailTemplate的当前时间分配惟一的detailTemplate ID

function detailAddInit(e) {
    var time = new Date().getTime().toString();
    // find combo box associated with current row
    var closestSCCB = e.detailRow.find('.Lot1StandardCommentDropDownAdd');            
    // assign a unique ID to the div
    var SCID = 'Lot1StandardCommentDropDownAdd_' + time;
    closestSCCB.attr('id', SCID);
    var closestSCCB2 = e.detailRow.find('.Lot1StandardCommentDropDownAdd');            

    var closestRCCB = e.detailRow.find('.Lot1ReviewCommentDropDownAdd');
    var RCID = 'Lot1ReviewCommentDropDownAdd_' + time;
    closestRCCB.attr('id', RCID);
    var closestRCCB2 = e.detailRow.find('.Lot1ReviewCommentDropDownAdd');

    createStandardCommentDropDown(closestSCCB2[0]);
    createReviewCommentDropDown(closestRCCB2[0]);   
}

虽然这是我的利基场景，但我希望这能使未来的某一天！