Initialization of two kendo widgets in different pages

11 posts, 1 answers
  1. Andre
    Andre avatar
    7 posts
    Member since:
    Apr 2013

    Posted 14 Apr 2013 Link to this post

    I'm trying to set up two pages: 1 with a listview and another with a grid. The problem is that the grid isn't being initialized and isn't shown...

    Important parts of the code: 
    <div id="app" class="contentPages">
        <button data-bind="click: gotopage1">Page 1</button>
        <button data-bind="click: gotopage2">Page 2</button>
    </div>
     
    <script id="page1" type="text/x-kendo-template">
        <ul id="listView1" data-bind="source: photossource"></ul>
    </script>
     
    <script id="page2" type="text/x-kendo-template">
        <div id="grid">
        </div>
    </script>
     
    <script id="layout" type="text/x-kendo-template">
        <header>Header</header><section id=content></section>
    </script>
    <script type="text/x-kendo-template" id="templatelistitem">
        <div class="item">
            <img data-bind="attr: { src: src }" />
            <p data-bind="text: description" style="text-align: center"></p>
        </div>
    </script>
    <script>
    var
    set1 = new Array();
     
       for (var i = 0; i <= 71; i++) {
           //fill set1
       }
     
       var appViewModel = new kendo.observable({
           gotopage1: function () {
               router.navigate("/");
           },
           gotopage2: function () {
               router.navigate("/page2");
           }
       });
       kendo.bind($("#app"), appViewModel);
     
       var pageViewModel = new kendo.observable({
           photossource: set1
       });
     
       var page1 = new kendo.View("#page1", { model: pageViewModel });
       var page2 = new kendo.View("#page2", { model: pageViewModel });
     
       var layout = new kendo.Layout("#layout");
     
       var router = new kendo.Router();
     
       router.route("/", function () {
           layout.showIn("#content", page1);
       });
     
       router.route("/page2", function () {
           layout.showIn("#content", page2);
       });
     
       $(function () {
           router.start();
           layout.render($("#app"));
           layout.showIn("#content", page1);
       });
     
       kendo.bind($("#listView1"), pageViewModel);
     
       var listview1, grid;
     
       $(document).ready(function () {
           listview1 = $("#listView1").kendoListView({
               template: kendo.template($("#templatelistitem").html()),
               change: onChange,
               selectable: true
           }).data("kendoListView");
           grid = $("#grid").kendoGrid({
               columns: [
                   {
                       field: "FirstName",
                       title: "First Name"
                   },
                   {
                       field: "LastName",
                       title: "Last Name"
                   }],
               dataSource: {
                   data: [
                       {
                           FirstName: "Joe",
                           LastName: "Smith"
                       },
                       {
                           FirstName: "Jane",
                           LastName: "Smith"
                       }]
               }
           });
     
       });
    </script>
    With the debugger I can see that the listview and the grid have different types after running the ready() method (see attachment).

    Why this happen?
  2. mgs
    mgs avatar
    163 posts
    Member since:
    Jan 2011

    Posted 15 Apr 2013 Link to this post

    Hello Andre,
    quick feedback, just having looked at the source. The different types are to be expected.
    • The "listview1" variables is created by executing the "data" method. So it contains the Kendo widget.
    • The "grid" variable is just created from a jQuery selector. So it does not contain a Kendo Widget.
    Michael G. Schneider
  3. Kendo UI is VS 2017 Ready
  4. Andre
    Andre avatar
    7 posts
    Member since:
    Apr 2013

    Posted 15 Apr 2013 Link to this post

    Thanks for your help!

    But when I add the data() method to the grid (.data("kendoGrid")) nothing changes... And if I remove the that method from the listview, the listview is initializing...
    So I think the problem is not that. I think it could be something related with the render or showIn methods for page2...

    Another suggestion?
  5. mgs
    mgs avatar
    163 posts
    Member since:
    Jan 2011

    Posted 15 Apr 2013 Link to this post

    Hello Andre,

    I did not have the time to really setup a sample from your code. Some short notes...
    • A jsFiddle might help.
    • The sentence "The problem is..." from your first post seems to be incomplete. I do not yet know, which one does not show. The grid or the listview?
    • Does it work, if you leave out the SPA code? Just a simple html page with a listview and a grid?
    Michael G. Schneider
  6. Petyo
    Admin
    Petyo avatar
    2438 posts

    Posted 15 Apr 2013 Link to this post

    Hi Andre,

    You have stumbled upon one of the biggest differences (and common sources of confusion) between the SPA pattern compared to the 'normal' web page scripting - the usage of the document.ready (or the $(function() {} shorthand).

    By the time you try to initiate the grid in the document ready event handler, the second view is not yet instantiated and rendered. The #grid element is not present in the DOM yet.  

    The correct event handler to instantiate the grid in would be the respective view init event handler.

    You may also consider instantiating and configurating the widgets using data attributes

    All the best,
    Petyo
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  7. Andre
    Andre avatar
    7 posts
    Member since:
    Apr 2013

    Posted 15 Apr 2013 Link to this post

    Right now I can't set up a jsFiddle, but I will try to do it later...
    The problem is in the Grid that isn't being shown (I already edited the question).
    Without the SPA code it works fine.
  8. Andre
    Andre avatar
    7 posts
    Member since:
    Apr 2013

    Posted 15 Apr 2013 Link to this post

    Probably I'm a little bit confused with those 2 patterns...
    With the init event handler for the two pages, like this:
    var page1 = new kendo.View("#page1", {
            model: pageViewModel,
            init: function () {
                listview1 = $("#listView1").kendoListView({
                    template: kendo.template($("#templatelistitem").html()),
                    change: onChange,
                    selectable: true
                }).data("kendoListView");
            }
        });
        var page2 = new kendo.View("#page2", {
            model: pageViewModel,
            init: function () {
                grid = $("#grid").kendoGrid({
                        columns: [
                            {
                                field: "FirstName",
                                title: "First Name"
                            },
                            {
                                field: "LastName",
                                title: "Last Name"
                            }],
                        dataSource: {
                            data: [
                                {
                                    FirstName: "Joe",
                                    LastName: "Smith"
                                },
                                {
                                    FirstName: "Jane",
                                    LastName: "Smith"
                                }]
                        }
                    }).data("kendoGrid");
            }
        });
    Either the listview and the grid aren't being initialized... I can see that the 2 init event are executed (first the init of page one and when I go to page 2 the init of page 2 )... This should follow some specific order? (setup router and after setup the pages, reverse order, another, etc....)

    With the Data Attribute Initialization it seems to work, but I would like to know the two ways if possible...
  9. Answer
    Petyo
    Admin
    Petyo avatar
    2438 posts

    Posted 17 Apr 2013 Link to this post

    Hello Andre,

    Can you try accessing the grid element through the view.element - something like this:

    grid = page2.element.find("#grid").kendoGrid({


    Greetings,
    Petyo
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  10. Andre
    Andre avatar
    7 posts
    Member since:
    Apr 2013

    Posted 17 Apr 2013 Link to this post

    Thanks! this solved the problem.
    var listview1, grid;
     
        var page1 = new kendo.View("#page1", {
            model: pageViewModel,
            init: function () {
                listview1 = page1.element.find("#listView1").kendoListView({
                    template: kendo.template($("#templatelistitem").html()),
                    change: onChange,
                    selectable: true
                }).data("kendoListView");
            }
        });
        var page2 = new kendo.View("#page2", {
            model: pageViewModel,
            init: function () {
                grid = page2.element.find("#grid").kendoGrid({
                    columns: [
                        {
                            field: "FirstName",
                            title: "First Name"
                        },
                        {
                            field: "LastName",
                            title: "Last Name"
                        }],
                    dataSource: {
                        data: [
                            {
                                FirstName: "Joe",
                                LastName: "Smith"
                            },
                            {
                                FirstName: "Jane",
                                LastName: "Smith"
                            }]
                    }
                }).data("kendoGrid");
            }
        });
    But I don't understand why a regular jQuery selector doesn't work... Can you explain?
  11. Henri
    Henri avatar
    74 posts
    Member since:
    Aug 2008

    Posted 01 Apr 2014 Link to this post

    I also would like to know why the jquery selector does not work
  12. Petyo
    Admin
    Petyo avatar
    2438 posts

    Posted 01 Apr 2014 Link to this post

    Hello Henri,

    The jQuery selector does not work because the element is not yet available in the document (but yet it is instantiated). 

    Regards,
    Petyo
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top
Kendo UI is VS 2017 Ready