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:
if someone could help me doing this correctly ..
thanks by advance ;)
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>thanks by advance ;)
1 Answer, 1 is accepted
0
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:
Regards,
Kiril Nikolov
Telerik
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!