How to replace a header by another one

2 posts, 0 answers
  1. guillaume
    guillaume avatar
    7 posts
    Member since:
    Oct 2013

    Posted 18 Oct 2013 Link to this post

    Hi guys,

    i'm doing some tests, to do that i took a template on the kendo ui' page.
    i clean it a bit to get what i want and right now, i have two div header in my html page.
    i remove one at the load of the page and when i click on a button, i just want to remove the current header et set another one instead.
    i've tried plenty of things but nothing seems to work correctly using jquery

    here is my code:

    <!DOCTYPE html>
    <html>
    <head>
        <title>Demo</title>
        <link href="styles/kendo.common.min.css" rel="stylesheet" />
        <link href="styles/kendo.default.min.css" rel="stylesheet" />
        <link href="styles/kendo.mobile.all.min.css" rel="stylesheet" />
        <link href="styles/index.css" rel="stylesheet" />
        <script src="js/jquery.min.js"></script>
        <script src="js/kendo.all.min.js"></script>
    </head>
     
    <!--
        Contenu des pages chargées par le paneau left
    -->
     
    <body>
        <div data-role="view" id="drawer-home" data-layout="drawer-layout" data-title="Inbox">
        </div>
     
        <div data-role="view" id="drawer-starred" data-layout="drawer-layout" data-title="Starred Items">
        </div>
     
        <div data-role="view" id="drawer-drafts" data-layout="drawer-layout" data-title="Drafts">
        </div>
     
    <!--
        // Paneau Left
    -->
     
    <div data-role="drawer" id="my-drawer" style="width: 270px" data-views="['/', 'drawer-home', 'drawer-starred', 'drawer-drafts']">
        <ul data-role="listview" data-type="group">
            <li>Menu
                <ul>
                    <li><a href="#drawer-home" data-transition="none">m1</a></li>
                    <li><a href="#drawer-starred" data-transition="none">m2</a></li>
                    <li><a href="#drawer-drafts" data-transition="none">m3</a></li>
                </ul>
            </li>
        </ul>
    </div>
     
    <!--
            Headers
    -->
     
    <div class="Head" data-role="layout" data-id="drawer-layout">
        <header data-role="header">
            <div class="" data-role="navbar">
                <a data-role="button" data-rel="drawer" href="#my-drawer" data-icon="drawer-button" data-align="left"></a>
                <span id="compagnyName">Demo</span>
                <a data-role="button" onClick="changeHead()" data-icon="drawer-button" data-align="right"></a>
            </div>
        </header>
    </div>
     
    <div class="HeadSearching" data-role="layout" data-id="drawer-layout">
        <header data-role="header">
            <div data-role="navbar">
                <a data-role="button" data-rel="drawer" href="#my-drawer" data-icon="drawer-button" data-align="left"></a>
                <input type="text" id="city" name="city" class="k-textbox" placeholder="Ville" data-align="center" />
                <select name="country" id="country" data-align="right">
                    <option>France</option>
                    <option>Angleterre</option>
                    <option>Luxembourg</option>
                    <option>Espagne</option>
                </select>
            </div>
        </header>
    </div>
     
    <script>
        var app = new kendo.mobile.Application(document.body);
        $('.HeadSearching').remove();
    </script>
     
    <script>
        function changeHead()
        {
            alert('header replace');
            $('.head').replaceWith('.HeadSearching');
        }
    </script>
    </body>
    </html>
    if someone could help me doing this correctly ..
    thanks by advance ;)
  2. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2565 posts

    Posted 22 Oct 2013 Link to this post

    Hello Guillaume,

    Thank you very much for your interest in Kendo UI.

    Basically when the application is initialized and the view is displayed the layout elements are added to it. This is the reason why replacing an element in the layout does not have any visual effects.

    What  I can suggest you to do is use the hide() and show() jQuery methods, so you can switch between elements. It should be something like this:

    e.view.header.find(".one").hide();
    e.view.header.find(".two").show();

    Regards,
    Kiril Nikolov
    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
Back to Top