DropdownListFor - Template within a template does not expand the list options.

[Christos]

Hello,

I am using a template within a template and I would like to use DropdownListFor. Although everything is rendered properly and the values are shown correctly, when I click on the right arrow it does not expand the list options. 

Example:

@(Html.Kendo().DropdownListFor(m => m.IsPrincipal)
              .DataTextField("Text")
             .DataValueField("Value")
             .BindTo(new List<SelectListItem>() {
                   new SelectListItem() {
                           Text = "Yes",
                           Value = "1"
                             },
                   new SelectListItem() {
                            Text = "No",
                             Value = "0"
                               },
                    new SelectListItem() {
                             Text = "Test",
                            Value = "2"
                              }
                                  })
                  .HtmlAttributes(new { style = "width: 100%" })
                    )

[Christos]

I think the problem is similar with these:

https://www.telerik.com/forums/dropdownlist-in-window-issue

https://www.telerik.com/forums/dropdownlist-and-modal-window

Do you know how to solve it for ASP.NET Core?

The DropdownListFor is in a modal within a modal.

 

[Ianko]

Hi Christos,

The threads linked are from 2012 and the code has changed a lot since then. Thus, I doubt the same z-index issue to be reproduced now. Unless, you are using the a Knedo UI version from 2012. 

Can you provide a simple, locally runnable solution so that I can take a look at the problem and examine what exactly is the problem so that I can probably suggest a fix? 

Regards,
Ianko
Progress Telerik

[Christos]

Dear Ianko,

thank you for your post. I believe that there is a bug in the last version of Kendo UI for ASP.NET Core. Specifically, if you try to create a panelbar within a panelbar and then try to create a grid inside the 2nd panelbar with a "Edit Pop-up" template and finally to create a dropdown list inside this " Edit Pop-up ", you will find out that the options will be shown under the popup. You can easily replicate this to check the problem.

 

e.g.

panelbar.Add().Text("1st Option")
    .Expanded(false)
.Content(@<div>test</div>)
panelbar.Add().Text("2nd Option")
    .Items(projects =>
{
projects.Add().Text("People")
.Content(@<div id="PersonsBasicFunctions" style="align-content:center;">
                    <script>
                        function additionalData() {
                            return {
                                companyId: ${ CompanyID }
                        };
                                                                                                                }
                    </script>
                    @(Html.Kendo().Grid<TestArea.Models.RoleBasicFunctions>()
                                                .Name("RoleBasicFunctions")
                                               .Columns(columns =>
                                               {
                                                           columns.Bound(p => p.RoleBasicFunctionsID).Title("ID").Visible(false);
                                                           columns.Bound(p => p.EntityBasicInformation.EntityType.EntityTypeName).Title("Name").HeaderHtmlAttributes(new { style = "white-space: normal" });
                                                           columns.Command(command => { command.Edit().Text(" "); }).Width(80);
                                                       })
                                                .Pageable()
                                                .Sortable()
                                                .Scrollable()
                                                .Editable(editable => editable.Mode(GridEditMode.PopUp).DisplayDeleteConfirmation(false).TemplateName("EditMidasRoleBasicFunctions").Window(ww => ww.Title("Edit").Width(1800)))
                                                .ToolBar(toolbar => toolbar.Create())
                                                .Filterable()
                                                .DataSource(dataSource => dataSource.Ajax()
                                                .Model(model =>
                                                {
                                                            model.Id(p => p.RoleBasicFunctionsID);
                                                        })
                                                .Read(read => read.Action("RoleBasicFunctionsGrid_Read", "Midas").Data("additionalData"))) )
                </div>);

 

and in the EditMidasRoleBasicFunctions template try a simple dropdown:

@(Html.Kendo().DropDownListFor(m => m.IsPrincipal)
                                                                                .DataTextField("Text")
                                                                                .DataValueField("Value")
                                                                                .BindTo(new List<SelectListItem>() {
                                                                                                                new SelectListItem() {
                                                                                                                    Text = "Yes",
                                                                                                                    Value = "0"
                                                                                                                },
                                                                                                                new SelectListItem() {
                                                                                                                    Text = "No",
                                                                                                                    Value = "3"
                                                                                                                },
                                                                                                                 new SelectListItem() {
                                                                                                                    Text = "Test",
                                                                                                                    Value = "1"
                                                                                                                }
                                                                                })
                                                                                .OptionLabel("Select User")
                                                                                .Popup(p => p.AppendTo("[content]"))
                                                                                .HtmlAttributes(new { style = "width: 100%" })
                    )

 

 

 

 

[Ianko]

Hello Christos,

There is an ongoing support communication on the same topic with your colleague Manousos. Please, follow the conversation there for further details. 

Regards,
Ianko
Progress Telerik