Rendering json object to template not working

[Mark]

Hello,

I'm trying to integrate Bootstrap menu through Kendo UI template.

I'm getting JSON values from MVC controller and rendering it's values to the template but I'm getting ReferenceError:  MenuText is not defined.

I tried using #: data.MenuText # / #: MenuText # but I still get same result, when I dot this #: data # it returns [object, Object]


Please advise
D

MVC controller

public ActionResult GetMenu()
     {
         _menu = GenerateMenuValues();

         return Json(_menu, JsonRequestBehavior.AllowGet);

     }

     private List<MenuValues> GenerateMenuValues()
     {
         return new List<MenuValues>()
         {
             new MenuValues(){Active = "active", MenuText = "Home", Url = "\\#"},
             new MenuValues(){MenuText = "Web widget", Url="\\#", SubMenu = new List<MenuValues>()
             {
                 new MenuValues(){MenuText = "Grid widget", Url = Url.Action("GridWidget","Home")},
                 new MenuValues(){MenuText = "Auto complete", Url = Url.Action("AutoCompleteWidget","Home")},
                 new MenuValues(){MenuText = "Combo box", Url = Url.Action("ComboBoxWidget","Home")},
                 new MenuValues(){MenuText = "Dropdown List", Url = Url.Action("DropdownListWidget","Home")},
                 new MenuValues(){MenuText = "Numeric text", Url = Url.Action("NumericTextbox","Home")},
                 new MenuValues(){MenuText = "Window", Url = Url.Action("WindowWidget","Home")},
                 new MenuValues(){MenuText = "Tree view", Url = Url.Action("TreeViewWidget","Home")},
                 new MenuValues(){MenuText = "Tab strip", Url = Url.Action("TabStrip","Home")}
             }},
             new MenuValues(){MenuText = "Data Source", Url = Url.Action("DataSource","Home")},
             new MenuValues(){MenuText = "MVVM", Url = Url.Action("Mvvm","Home")}


         };
     }

HTML markup / template

<script type="text/x-kendo-template" id="menuTemplate">
        <div class="col-md-12">
            <nav class="navbar navbar-static-top" role="navigation">

            <div class="navbar-header">
                <a class="navbar-brand" href="\#">Learning Kendo</a>
            </div>

                <ul class="nav navbar-nav">

              <li> #= MenuText # </li> // just to test that values are rendering

    </ul>
        </nav>
        </div>
</script>
<script type="text/javascript">

    $(document).ready(function () {
        var dataService = '/DataServices/';
        var menuData = $.getJSON(dataService + 'GetMenu');
        var menuTemplate = kendo.template($('#menuTemplate').html())(menuData);
        $('#templateMenu').html(menuTemplate);

    });


</script>

[Atanas Korchev]

Hello Mark,

 The problem is caused by the fact that $.getJSON is asynchronous. This means that menuData is never set to a valid value. You can verify that by debugging your JavaScriqpt code. 
 The linked API reference of getJSON contains a few examples which you can use as a basis of your implementation.

Regards,
Atanas Korchev
Telerik

[Mark]

Hello Atanas, 

Thank you for your response.

Does this mean that I have to implement my own DOM manipulation instead of using Kendo Template?

I tried using Kendo DataSource but I'm still getting the same result :(

Are there any work-around on this?

Thanks

[Atanas Korchev]

Hello Mark,

 No, you can still use kendo templates. You just need to use $.getJSON as it is supposed to. The jQuery documentation that I've linked shows the correct usage of $.getJSON. Did you try that?

Regards,
Atanas Korchev
Telerik

[Mark]

Hello Atanas, 

I was able to get to it work. 

Thanks
M

<script type="text/javascript">

    $(document).ready(function () {
        var dataService = '/DataServices/';

        var menuTemplate = kendo.template($('#menuTemplate').html());

        var menu = function () {

            var bindMenu = function () {
                $.getJSON(dataService + 'GetMenu', function (data) {

                    bindTemplate(data);
                });
            };

            var bindTemplate = function (data) {

                $('#templateMenu').find('ul:first').html(menuTemplate(data));
            };

            return {
                bindMenu: bindMenu
            };
        }();

        menu.bindMenu();


    });


</script>