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>
Hi
We are working with the Kendo UI and are quite new to MVVM. We were trying out the following scenario and came across an issue which is as below.
We have a checkbox list on our page along with 2 listboxes (say listbox1 and listbox2).
The checkboxlist is a consolidated list of all the items from both the ListBoxes. Initially when no items are checked on the checkboxlist, all the items appear on the listbox1. The items when checked on the checkboxlist should move to listbox2 and should be removed from listbox1.
There is also a textbox and button ['Add Item'] using which we can add values to listbox1 (correspondingly these will appear as unchecked on the checkboxlist).
The problem:
The viewModel does not get refreshed on the check and uncheck events of the checkboxes. Because of this, the listboxes do not get updated with their respective items.
However the viewModel refreshes the listboxes when a new item is added using the textbox and 'Add Item' button.
Please follow the JSFiddle link for code reference: http://jsfiddle.net/umeshkrishna/eqWK2/9/
I am also attaching screen- shots as aides.
Looking forward to a speedy reply.
Thanks
Umesh