Drawer with dynamic listView

4 posts, 0 answers
  1. florim
    florim avatar
    1 posts
    Member since:
    Aug 2007

    Posted 24 Jul 2013 Link to this post

    If i populate list inside drawer through viewmodel then the drawer has some strange behavior (it close then it opens and again it close):
    but if I do it with the static li items than it works perfectly.


    the viewmoldel, drawer layout and templateItem

    define(function () {
        return {
            viewModel: {
                routes: [
                    { url: '#about-view', name: 'Menu' },
                    { url: '#customer-view', name: 'Customer' },
                    { url: '#fivatCategory-view', name: 'Fi Vat Category' }]
            }
        };
    });
        <script id="menu-list-template" type="text/x-kendo-template">        
            <li data-icon="inbox"><a href="${url}" data-transition="none">${name}</a></li>
        </script>

    <div data-role="drawer" id="my-drawer" data-model="app.menuView.viewModel" style="width: 270px" data-title="Menu" data-views="['about-view','customer-view', 'fivatCategory-view']">
            <header data-role="header">
                <div data-role="navbar">
                    <span data-role="view-title"></span>
                </div>
            </header>
            <ul data-role="listview" data-type="group">
                <li>Navigation
                    <ul data-bind="source: routes" data-template="menu-list-template"> <!-- when this is bound through viewmodel  --!>
                    </ul>

                </li>
                <li>Einstellungen
                <ul>
                    <li data-icon="spam"><a href="#drawer-spam" data-transition="none">Spam</a></li>
                    <li data-icon="spam"><a href="#fivatCategory-view" data-transition="none">Fi VAT 2nd Try</a></li>
                    <li>Leistungen</li>
                </ul>
                </li>
                <li>Account
                <ul>
                    <li data-icon="settings">Logging</li>
                    <li data-icon="off">Log Out</li>
                </ul>
                </li>
            </ul>
        </div> 
  2. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 26 Jul 2013 Link to this post

    Hi Florim,

    I tested a similar scenario in jsBin but did not manage to reproduce the behaviour you described. Could you please check the sample and let me know what I am missing?
    Thank you in advance.

    Regards,
    Alexander Valchev
    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. florim
    florim avatar
    1 posts
    Member since:
    Aug 2007

    Posted 26 Jul 2013 Link to this post

    I did figure it out: In my application start i remove transaction
    transition: "fade" and that behavior it disappear. 

    from:
        new kendo.mobile.Application(document.body, { transition: "fade"});// try with this and you will see that behavior.
    now:
        new kendo.mobile.Application(document.body); // is OK

    Sorry for my English.
  5. Petyo
    Admin
    Petyo avatar
    2439 posts

    Posted 29 Jul 2013 Link to this post

    Hello florim,

    I am sorry for the inconvenience caused - the drawer links should not have transitions. You can override the default transition by setting data-transition="none" to them. The dynamic binding issue is also related to a bug we fixed recently.

    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