Question

我的应用程序（DDL，ComboBox等）中有多种用于kendo下拉列表的功能。

我希望他们在页面加载时打开，但是Kendo的文档并没有表明这是可能的。

我正在使用MVC服务器变量。

这是我的观点编码：

    <script id="itemTemplate" type="text/x-kendo-template">
    # var index=FullName.indexOf(" *****"); 
     if (index > 0)
    {
    #
    <span style="font-weight:bold;">
        #: FullName.substring(0, index)#
    </span>
    #
    } else {
    #
    <span style="font-weight:normal;">
        #: FullName#
    </span>
    #
    }
    #
</script>
<table class="form-horizontal table-condensed" style="width:100%;">
    <tr style="height:400px;">
        <td style="width:40%;vertical-align:top;">
            <h4 style="width:100%;text-align:center;">Available Members</h4>
            <h4 style="width:100%;text-align:center;font-size:smaller;">Current Cancer Center Members are highlighted in Bold.</h4>
          @(Html.Kendo()
            .MultiSelect()
            .Name("AvailableWGMembers")
            .DataTextField("FullName")
            .DataValueField("id")
            .ItemTemplateId("itemTemplate")
            .TagTemplateId("itemTemplate")
            .BindTo((System.Collections.IEnumerable)ViewBag.AvailableWGMembers)
            .AutoBind(true)
            .Placeholder("Click here to select one or more members to add, ...")
            .AutoClose(false)
            .HtmlAttributes(new { style = "width:100%;", @class = "Roles" })
            .Events(events => { events.Change("doRoles");})
            .Value(new int[0])
            .Height(650)
            )
        </td>
        <td style="width:20%;text-align:center;vertical-align:top;">
            <input id="btnAdd" type="submit" value="Select" class="btn btn-default" disabled="disabled" />
        </td>
        <td style="width:40%;vertical-align:top;">
            <h4 style="width:100%;text-align:center;">@Model.WGTitle</h4>
            <h4 style="width:100%;text-align:center;font-size:smaller;">Current Cancer Center Members are highlighted in Bold.</h4>
            @(Html.Kendo()
            .MultiSelect()
            .Name("ExistingWGMembers")
            .AutoBind(false)
            .DataTextField("FullName")
            .DataValueField("id")
            .ItemTemplateId("itemTemplate")
            .TagTemplateId("itemTemplate")
            .BindTo((System.Collections.IEnumerable)ViewBag.ExistingWGMembers)
            .Placeholder("Click here to select one or more members to remove, ...")
            .AutoClose(true)
            .HtmlAttributes(new { style = "width:100%;", @class = "UnusedRoles" })
            .Events(events => { events.Change("doRoles"); })
            .Value(new int[0])
            .Height(650)
            )
        </td>
    </tr>
</table>

我希望列表在页面加载时都打开，我希望能够使用不引人注意的jQuery或javascript来控制它，如果必须的话。

有人有任何建议吗？

Answer 1

花了一点时间，但我终于找到了答案。实际上非常简单。

以下内容应添加到不引人注目的javascript代码文件中：

function openPopup(e)
{
    if (e.sender.list[0].childNodes['1'].childNodes['0'].childElementCount > 0) {
    e.sender.popup.open();
    }
}

您可以将以下代码添加到活动列表中：

.Events（events =＆gt; {...; events.DataBound（＆＃34; openPopup＆＃34;）;}）

这可以使用任何具有Kendo DropDownList或ComboBox或MultiSelect等弹出窗口的列表来完成。

我会检查列表长度，以确保列表中有成员，这样您就不会显示一个丑陋的空列表，但结果实际上非常简单。

Answer 2

此答案取决于以下代码示例：http://demos.telerik.com/aspnet-mvc/window/index

我从他们示例的Index.cshtml版本中获取了该示例，并简单地用原始问题中的表格模板替换了@的Content值：

@(Html.Kendo().Window()
    .Name("window")
    .Title("Your modal popup with dropdown menus")
    .Content(@<text>
        <table class="form-horizontal table-condensed" style="width:100%;">
          <tr style="height:400px;">
             <td style="width:40%;vertical-align:top;">
             <h4 style="width:100%;text-align:center;">Available Members</h4>
             <h4 style="width:100%;text-align:center;font-size:smaller;">Current Cancer Center Members are highlighted in Bold.</h4>
          @(Html.Kendo()
            .MultiSelect()
            .Name("AvailableWGMembers")
            .DataTextField("FullName")
            .DataValueField("id")
            .ItemTemplateId("itemTemplate")
            .TagTemplateId("itemTemplate")
            .BindTo((System.Collections.IEnumerable)ViewBag.AvailableWGMembers)
            .AutoBind(true)
            .Placeholder("Click here to select one or more members to add, ...")
            .AutoClose(false)
            .HtmlAttributes(new { style = "width:100%;", @class = "Roles" })
            .Events(events => { events.Change("doRoles");})
            .Value(new int[0])
            .Height(650)
            )
        </td>
        <td style="width:20%;text-align:center;vertical-align:top;">
            <input id="btnAdd" type="submit" value="Select" class="btn btn-default" disabled="disabled" />
        </td>
        <td style="width:40%;vertical-align:top;">
            <h4 style="width:100%;text-align:center;">@Model.WGTitle</h4>
            <h4 style="width:100%;text-align:center;font-size:smaller;">Current Cancer Center Members are highlighted in Bold.</h4>
            @(Html.Kendo()
            .MultiSelect()
            .Name("ExistingWGMembers")
            .AutoBind(false)
            .DataTextField("FullName")
            .DataValueField("id")
            .ItemTemplateId("itemTemplate")
            .TagTemplateId("itemTemplate")
            .BindTo((System.Collections.IEnumerable)ViewBag.ExistingWGMembers)
            .Placeholder("Click here to select one or more members to remove, ...")
            .AutoClose(true)
            .HtmlAttributes(new { style = "width:100%;", @class = "UnusedRoles" })
            .Events(events => { events.Change("doRoles"); })
            .Value(new int[0])
            .Height(650)
            )
         </td>
      </tr>
    </table>
    </text>)
    .Draggable()
    .Resizable()
    .Width(600)
    .Actions(actions => actions.Pin().Minimize().Maximize().Close())
    .Events(ev => ev.Close("onClose"))
)

我希望这有帮助！

如何在页面加载时打开一个kendo下拉弹出窗口？

2 个答案: