This is a migrated thread and some comments may be shown as answers.

DDL not working inside dialog

5 Answers 365 Views
DropDownList
This is a migrated thread and some comments may be shown as answers.
Дмитрий
Top achievements
Rank 1
Дмитрий asked on 16 Apr 2018, 07:11 AM

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");
        }

 

 

5 Answers, 1 is accepted

Sort by
0
Neli
Telerik team
answered on 17 Apr 2018, 12:00 PM
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
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Дмитрий
Top achievements
Rank 1
answered on 17 Apr 2018, 06:21 PM
Thank you. I will use it. But now I use html + js and partial view inside. Before was jquery ajax.
0
Neli
Telerik team
answered on 19 Apr 2018, 11:23 AM
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
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Umer
Top achievements
Rank 1
answered on 05 Aug 2020, 09:54 AM
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.
0
Marin Bratanov
Telerik team
answered on 06 Aug 2020, 07:20 AM

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

Tags
DropDownList
Asked by
Дмитрий
Top achievements
Rank 1
Answers by
Neli
Telerik team
Дмитрий
Top achievements
Rank 1
Umer
Top achievements
Rank 1
Marin Bratanov
Telerik team
Share this question
or