This is a migrated thread and some comments may be shown as answers.

Rendering json object to template not working

4 Answers 232 Views
Templates
This is a migrated thread and some comments may be shown as answers.
Mark
Top achievements
Rank 1
Mark asked on 13 Sep 2013, 02:31 AM
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>

4 Answers, 1 is accepted

Sort by
0
Accepted
Atanas Korchev
Telerik team
answered on 13 Sep 2013, 07:09 AM
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!
0
Mark
Top achievements
Rank 1
answered on 13 Sep 2013, 09:04 AM
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
0
Atanas Korchev
Telerik team
answered on 13 Sep 2013, 09:55 AM
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!
0
Mark
Top achievements
Rank 1
answered on 14 Sep 2013, 06:33 AM
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>
Tags
Templates
Asked by
Mark
Top achievements
Rank 1
Answers by
Atanas Korchev
Telerik team
Mark
Top achievements
Rank 1
Share this question
or