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 に答える