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.

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