Wie öffne ich ein Kendo Drop-Down-Popup beim Laden der Seite?

Question

Ich habe mehrere Anwendungen für Kendo Dropdown in meiner Anwendung (DDL, ComboBox, etc.).

Ich möchte, dass sie beim Laden der Seite öffnen, aber die Dokumentation von Kendo zeigt nicht an, dass das möglich ist.

Ich verwende die MVC-Server-Variablen.

Dies ist meiner Ansicht nach Codierung:

<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> 

Ich möchte die Listen sowohl offen sein, wenn die Seite geladen wird, und ich möchte in der Lage sein, es zu benutzen unobstrusive jQuery oder JavaScript zu steuern, wenn ich muss.

Hat jemand irgendwelche Vorschläge?

Answer 1

Es dauerte ein wenig zu graben, aber ich fand schließlich die Antwort. Es war eigentlich ziemlich einfach.

Die folgende Beschreibung ist auf die unaufdringliche Javascript-Code-Datei hinzugefügt werden:

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

Sie fügen den folgenden Code in der Veranstaltungsliste:

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

Dies kann mit jeder der Listen, die Popups wie Kendo DropDownList oder ComboBox oder MultiSelect haben getan werden.

Ich würde nach der Listenlänge suchen, um sicherzustellen, dass die Liste Mitglieder hat, so dass Sie nicht eine hässliche leere Liste angezeigt bekommen, aber ansonsten ist das Ergebnis eigentlich ziemlich einfach.

Answer 2

Diese Antwort ist abhängig von dem Codebeispiel an: http://demos.telerik.com/aspnet-mvc/window/index

nahm ich dieses Beispiel aus der Index.cshtml Version ihres Beispiels und einfach ersetzt den Inhalt Wert des @ mit Ihrem Tabellenvorlage aus der ursprünglichen Frage:

@(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")) 
) 

Ich hoffe, das hilft!