How do you open a kendo drop down popup on page load?

Question

I have several uses for kendo drop-downs in my application (DDL, ComboBox, etc.).

I want them to open up on page load, but Kendo's documentation doesn't indicate that is possible.

I am using the MVC server variables.

This is my view coding:

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

I want the lists to both be open when the page loads, and I want to be able to use unobstrusive jQuery or javascript to control it if I have to.

Does anyone have any suggestions?

Timothy Dooling · Answer 1 · 2016-04-05T21:29:30.180

1

It took a little digging, but I finally figured out the answer. It was actually pretty simple.

The following should be added to the unobstrusive javascript code file:

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

You add the following code to your event listing:

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

This can be done with any of the lists that have popups like Kendo DropDownList or ComboBox or MultiSelect.

I would check for the list length to make sure the list has members so you don't get an ugly empty list shown, but otherwise the result is actually pretty simple.

edited Apr 05 '16 at 21:29

answered Apr 05 '16 at 21:21

Timothy Dooling

470
1
4
17

I was thinking if you put this dropdown menu template into a Kendo.Window object you could have it open by default on the page for the user without any need for script like that? – Dinglemeyer NeverGonnaGiveUUp Apr 20 '16 at 22:03
Timothy Dooling, I added a new answer with an example you may try? :) Good luck! – Dinglemeyer NeverGonnaGiveUUp Apr 22 '16 at 15:50

score 0 · Answer 2 · answered Apr 22 '16 at 15:50

This answer is dependent upon the code example at: http://demos.telerik.com/aspnet-mvc/window/index

I took that example from the Index.cshtml version of their example and simply replaced the Content value of the @ with your table template from the original question:

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

I hope this helps!

I will take a look at it. Using javascript with Kendo is tricky because they seem to like to change their javascript objects in radical ways with every update. This, of course, has a tendency to make existing javascript code break when you update the interface. I think that is why they update to a new directory each time a new update is released. — Timothy Dooling, Apr 22 '16 at 15:59
If your existing javascript method is workin', this might just be unnecessary. This would however alleviate your concern on the constant changing methods/variables in JS that telerik seems to do with updates to kendo ui. Good luck! Happy Friday! — Dinglemeyer NeverGonnaGiveUUp, Apr 22 '16 at 16:38

How do you open a kendo drop down popup on page load?

2 Answers2