There is an issue with the Kendo UI button group - it does not display in a partial view contained within a parent page that is contained within a layout page.

[Acadia]

If I place a simple Kendo Button in the partial page it shows fine, but the button group does not show at all.  The developer tools and debugging shows everything to be correct and the partial view is being returned via return PartialView(partialViewName); from the controller.

This is driving me crazy.  Is this a known issue?  There are no errors in the console/developer tools.  It is specific to the Kendo Button GROUP.

Please help...thanks!

The view that contains the partial view:

@using Kendo.Mvc.UI

@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<div style="max-width:45rem;">
    <div>Administrative Areas</div>
    <div id="buttonGroup">
        @(Html.Kendo().ButtonGroup()
            .Name("adminButtonGroup")
            .Items(t =>
            {
                t.Add().Text("Personal").HtmlAttributes(new { onclick = "loadPartial('_Admin')" });
                t.Add().Text("Predefined").HtmlAttributes(new { onclick = "loadPartial('_Admin')" });
                t.Add().Text("Regions").HtmlAttributes(new { onclick = "loadPartial('_Admin')" });
                t.Add().Text("Flags").HtmlAttributes(new { onclick = "loadPartial('_Admin')" });
            })
            )
    </div>
</div>

<div id="adminPartial" class="mt-2">

</div>

<script>

    $(function () {
        // Set the first button as active by default
        $("#adminButtonGroup").data("kendoButtonGroup").select(0);

    });

    function loadPartial(partialViewName) { //clickedElement
        var targetDiv = document.getElementById("adminPartial");

        console.log(targetDiv.innerHTML);

        fetch('/Home/LoadPartialView?partialViewName=' + partialViewName)
            .then(response => response.text())
            .then(html => {
                targetDiv.innerHTML = html;
                console.log("partial view html:" + html);
            })
            .catch(error => {
                console.log('Error:', error);
            });
    }
</script>

 

Contents of the _Admin partial View: (does not display):

@using Kendo.Mvc.UI

<div>
@(Html.Kendo().ButtonGroup()
            .Name("adminPartialButtonGroup")
            .Items(t =>
            {
                t.Add().Text("Test 1");
                t.Add().Text("Test 2");
                t.Add().Text("Test 3");
                t.Add().Text("Test 4");
            })
            )
</div>

<script>

Home Controller Action:

 public IActionResult LoadPartialView(string partialViewName)
 {
     if (string.IsNullOrEmpty(partialViewName))
     {
         return BadRequest();
     }

     return PartialView(partialViewName);
 }

 

[Tsvetomila]

Hi Justin,

Thanks for the source code, it proved helpful. Based on that, I suggest slightly changing the JavaScript in the view. 

#1 Add default partial view:

<script>
    $(function () {
        // Set the first button as active by default
        $("#adminButtonGroup").data("kendoButtonGroup").select(0);

        // Set the partial of the first button as the default
        $("#adminPartial").load('/Home/LoadPartialView?partialViewName=' + '_Admin');
    });  

#2 Change fetch to load function:

    function loadPartial(partialViewName) { //clickedElement
        var targetDiv = document.getElementById("adminPartial");

        //Loads the partial view from the controller
        $("#adminPartial").load('/Home/LoadPartialView?partialViewName=' + partialViewName);
        // the fetch function is removed
    }
</script>

These amendments should accomplish the task and allow you to keep most of your existing code.

Let me know if that suggestion works for you.

Regards,
Tsvetomila
Progress Telerik

[Acadia]

Thanks for your response Tsvetomila,  I actually solved tis a different way, although Im still not sure why it was necessary.  I changed .innerHTML to .html.

 

fetch('/Home/LoadPartialView?partialViewName=' + partialViewName)
                 .then(response => response.text())
                 .then(html => {
                     targetDiv.HTML = html;

                })
                 .catch(error => {
                    console.log('Error:', error);
                });

 

Thanks!

[Tsvetomila]

Hello Justin,

It's great to see the issue has been resolved!

As demonstrated in practice, script manipulations over a component may differ, it is the result that is important.

I conducted a further check and here is what I discovered:

https://stackoverflow.com/questions/3563107/jquery-html-vs-innerhtml

"Given the general support of .innerHTML these days, the only effective difference now is that .html() will execute code in any <script> tags if there are any in the html you give it. .innerHTML, under HTML5, will not."

Regards,
Tsvetomila
Progress Telerik

[Acadia]

Thanks for the extra info Tsvetomila!  Very useful!