Rendering json object to template not working

5 posts, 1 answers
  1. Mark
    Mark avatar
    3 posts
    Member since:
    Aug 2013

    Posted 12 Sep 2013 Link to this post

    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>

  2. Answer
    Atanas Korchev
    Admin
    Atanas Korchev avatar
    8462 posts

    Posted 13 Sep 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
  4. Mark
    Mark avatar
    3 posts
    Member since:
    Aug 2013

    Posted 13 Sep 2013 Link to this post

    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
  5. Atanas Korchev
    Admin
    Atanas Korchev avatar
    8462 posts

    Posted 13 Sep 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  6. Mark
    Mark avatar
    3 posts
    Member since:
    Aug 2013

    Posted 14 Sep 2013 Link to this post

    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>
Back to Top
Kendo UI is VS 2017 Ready