or
This shows how navigatable doesn’t work when the user navigates using the right arrow key…
Run the fiddle – then select the first column of the second row. Hit your right arrow key two times… the grid doesn’t scroll to the right to show the City column as it should:
Check it out: http://jsfiddle.net/NqSuS/22/html, body{ height: 100%; margin: 0; padding: 0; font-size: 13px;}html{ overflow: hidden;}<div id="splitter1" style="height: 100%; border: 0"> <div id="top_pane"></div> <div id="middle_pane"> <div id="splitter2" style="height: 100%; width: 100%;"> <div id="nav_pane" style="padding: 5px"> //padding works well <div id="nav" style="border:1px solid red;"> </div> </div> <div id="content_pane" style="padding:5px"> //padding right works not well !!! why? <div id="content" style="border:1px solid red;"></div> </div> </div> </div> <div id="bottom_pane"></div></div>$(document).ready( function () { var splitter1 = $("#splitter1").kendoSplitter({ orientation: "vertical", panes: [{ size: "30px", resizable: false }, {}, { size: "20px", resizable: false}] }).data("kendoSplitter"); var splitter2 = $("#splitter2").kendoSplitter({ orientation: "horizontal", panes: [{ collapsible: true, size: "200px" }, {}] }).data("kendoSplitter"); var triggerResize = function () { splitter1.trigger("resize"); splitter2.trigger("resize"); } $(window).resize(triggerResize); });
var splitter = $("#mainArea").data("kendoSplitter");
where #mainArea is the ID of the div where I attached the splitter. When I try this, I see an error in the firebug console indicating that "splitter is undefined".<!DOCTYPE html><html><head> <meta charset="utf-8" /> <meta name="viewport" content="width=600, initial-scale=1, maximum-scale=1"> <meta name="apple-mobile-web-app-capable" content="yes"/> <script type="text/javascript" src="Scripts/jquery-1.7.1.min.js"></script> <script type="text/javascript" src="Scripts/jquery.json-2.3.min.js"></script> <script type="text/javascript" src="Scripts/knockout-2.0.0.js"></script> <script type="text/javascript" src="Scripts/kendo/kendo.mobile.min.js"></script> <script type="text/javascript" src="Scripts/kendo/plugins/console.js"></script> <link href="Styles/kendo/kendo.mobile.all.min.css" rel="stylesheet" /></head><body> <div data-role="view" data-layout="login" data-title="Login"> <div data-role="header"> <div data-role="navbar"> <span data-role="view-title"></span> </div> </div> <div data-role="footer"> <div data-role="tabstrip"> <a data-icon="globe" href="#overview-cities">Login</a> <a data-icon="contacts" href="#overview-contacts">Contacts</a> </div> </div> <div id="container"> <span>Main header</span> <div> <label for="Username">Username</label> <input id="Username" name="Username" type="text" /> </div> <div> <label for="Password">Password</label> <input id="Password" name="Password" type="password" /> </div> <div class="clear"> </div> <div> <label for="SelectedLanguage">SelectedLanguage</label> <select id="SelectedLanguage" name="SelectedLanguage"> <option value="da-DK">dansk (Danmark)</option> <option value="en-GB">English (United Kingdom)</option> <option value="fi-FI">suomi (Suomi)</option> <option value="de-DE">Deutsch (Deutschland)</option> <option value="nb-NO">norsk, bokmål (Norge)</option> <option selected="selected" value="ru-RU">русский (Россия)</option> <option value="sv-SE">svenska (Sverige)</option> </select> </div> <div> <a input="button" data-role="button">Login</a> </div> </div></div><script type="text/javascript"> window.kendoMobileApplication = new kendo.mobile.Application();</script></body></html>