DDL not working inside dialog

4 posts, 0 answers
  1. Дмитрий
    Дмитрий avatar
    2 posts
    Member since:
    Oct 2013

    Posted 16 Apr Link to this post

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

     

     

  2. Neli
    Admin
    Neli avatar
    194 posts

    Posted 17 Apr Link to this post

    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.
  3. Дмитрий
    Дмитрий avatar
    2 posts
    Member since:
    Oct 2013

    Posted 17 Apr Link to this post

    Thank you. I will use it. But now I use html + js and partial view inside. Before was jquery ajax.
  4. Neli
    Admin
    Neli avatar
    194 posts

    Posted 19 Apr Link to this post

    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.
Back to Top