0

我的应用程序中的剑道下拉菜单有多种用途（DDL、ComboBox 等）。

我希望它们在页面加载时打开，但 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 来控制它。

有没有人有什么建议？

4

2 回答 2

1

我花了一点时间挖掘，但我终于找到了答案。其实很简单。

应将以下内容添加到不显眼的 javascript 代码文件中：

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

您将以下代码添加到您的事件列表中：

.Events(events => { ...; events.DataBound("openPopup"); })

这可以通过任何具有弹出窗口的列表来完成，例如 Kendo DropDownList 或 ComboBox 或 MultiSelect。

我会检查列表长度以确保列表有成员，这样你就不会得到一个丑陋的空列表，但否则结果实际上很简单。

于 2016-04-05T21:21:01.083 回答
0

这个答案取决于代码示例：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"))
)

我希望这有帮助！

于 2016-04-22T15:50:31.887 回答