DDL not working inside dialog

[Дмитрий]

I use 

        @(Html.Kendo().DropDownList()
              .Name("size")
              .BindTo(new List<string>() {
                  "S - 6 3/4\"",
                  "M - 7 1/4\"",
                  "L - 7 1/8\"",
                  "XL - 7 5/8\""
              })
              .HtmlAttributes(new { style = "width: 100%" })
              )

on Index page and it working

The same I use in dialog but unsuccesfully

Code of dialog:

    <div id="popup_assignAnOrder" style="display: none; z-index: 10; background-color: white; position: absolute; left: 0; top: 0; width: 100%; height: 100%"></div>
    <script>

        function click_assignAnOrder() {
            var grid = $("#grid").data("kendoGrid");
            var data = {
                selectedIds: Object.keys(grid._selectedIds)
            };
            $.ajax({
                type: "post",
                url: "/Grid/PopupAsignPrikazi",
                data: data,
                success: function (data) {
                    var dialog = document.getElementById("popup_assignAnOrder");
                    dialog.innerHTML = data;
                    $(dialog).show('fast');

 

action

        [HttpPost]
        public ActionResult PopupAsignPrikazi(string[] selectedIds)
        {
            ViewBag.Tip = _db.Prikazs.Select(p => new SelectListItem(){ Value = p.Tipp.Kod_tipp.ToString(), Text = p.Tipp.Tipp1 }).Distinct().ToList();
            ViewBag.Osnovanie = _db.Prikazs.Select(p => p.Osnovanie).Distinct().ToList();
            ViewBag.SelectedIds = selectedIds.Select(Int32.Parse);
            return PartialView("~/Views/Home/_PopupAddPrikazi.cshtml");
        }

 

 

[Neli]

Hi,

In the following link you will find an example of TreeView nested in a Dialog. The Demo is available for both - Kendo for jQuery, as well as for Telerik UI for ASP.NET MVC in case you prefer to use the wrappers. As you could see in the Demos, the TreeView widget is placed in the Dialog`s content. You could use the same approach in order to have the DropDownList inside the Dialog.

Here is a Dojo example where the DropDownList inside Dialog is demonstrated when using the Kende UI for jQuery. As you will see the DropdownList is initialized in the open event handler of the Dialog. 

In case you are using the wrappers your view could be similar to the example below:

@(Html.Kendo().Dialog()
   .Name("myDialog")
   .Title("Do you confirm?")
   .Content(Html.Kendo().DropDownList()
          .Name("fabric")
          .Filter("contains")
          .DataTextField("Text")
          .DataValueField("Value")
          .BindTo(new List<SelectListItem>()
          {
                new SelectListItem() {
                Text = "Cotton", Value = "1"
                },
                new SelectListItem() {
                Text = "Polyester", Value = "2"
                },
                new SelectListItem() {
                Text = "Cotton/Polyester", Value = "3"
                },
                new SelectListItem() {
                Text = "Rib Knit", Value = "4"
                }
          }).ToHtmlString()
     )
   .MinHeight(140)
   .MinWidth(250)
   .Closable(false)
   .Actions(a =>
   {
       a.Add().Text("Cancel");
       a.Add().Text("OK").Primary(true);
   })
   .HtmlAttributes(new { style = "width:100%; background: red", @class = "TEST", my_custom_attribute = "my-custom-value" })
)

Note, that the usage of .ToHtmlString() method is needed. 


Regards,
Neli
Progress Telerik

[Дмитрий]

Thank you. I will use it. But now I use html + js and partial view inside. Before was jquery ajax.

[Neli]

Hello Дмитрий, 

If you need to load the content from partial view, the threads from the Forum below would be helpful. In the linked threads loading partial views in Kendo Dialog or Kendo Window is discussed:
- https://www.telerik.com/forums/window()-with-partial-view-containing-dropdownlist
- https://www.telerik.com/forums/how-to-render-a-partialview-as-the-content-of-the-dialog

In the following Demo loading content with Ajax in Window is demonstrated:
- https://demos.telerik.com/aspnet-mvc/window/ajax

Regards,
Neli
Progress Telerik

[Umer]

Hi Neli, 
I am also facing a similar problem with blazor controls.

I am working on a blazor project in which I am using combobox/multiselect atmultiple places. I have a popup in which there is a form containing these combobox and multiselect. I am unable to select item from these components when they used inside a popup. Can you please guide me how I can resolve this issue. Combobox works fine when use in a page but not work in a modal.

[Marin Bratanov]

Hello Umer,

Let me start by asking that you post in the dedicated UI for Blazor forums, because these are the Kendo for jQuery forums, and the components are completely separate.

As for the issue you are facing - the most likely problem is wrong context and values not being properly carried over to the parent component. You can check the three articles linked from the Important Notes section at the end of this article for a few similar cases: https://docs.telerik.com/blazor-ui/components/window/overview#important-notes. If they don't help you move forward, please post a new thread in the Blazor forums that showcases the problem in a simple runnable snippet.

 

Regards,
Marin Bratanov
Progress Telerik