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
, change : function() { var grid = this; grid.select().each(function() { grid.collapseRow(grid.tbody.find("tr.k-master-row")); grid.expandRow(grid.tbody.find("tr.k-state-selected")); }); }_footer: function() { var that = this, aggregates = that.dataSource.aggregates(), html = "", footerTemplate = that.footerTemplate, options = that.options; if (footerTemplate) { html = $(that._wrapFooter(footerTemplate(aggregates || {}))); if (that.footer) { var tmp = html; that.footer.replaceWith(tmp); that.footer = tmp; } else { if (options.scrollable) { that.footer = options.pageable ? html.insertBefore(that.wrapper.children("div.k-grid-pager")) : html.appendTo(that.wrapper); //CHANGE: Have scroll event move .k-grid-footer-wrap var scrollables = that.footer.children('.k-grid-footer-wrap'); that.content.bind('scroll', function () { scrollables.scrollLeft(this.scrollLeft); }); } else { that.footer = html.insertBefore(that.tbody); } } } }, _wrapFooter: function(footerRow) { var that = this, html = "", columns = that.columns, idx, length, groups = that.dataSource.group().length, column; if (that.options.scrollable) { //CHANGE: Add extra div with .k-grid-footer-wrap html = $('<div class="k-grid-footer"><div class="k-grid-footer-wrap"><table cellspacing="0"><tbody>' + footerRow + '</tbody></table></div></div>'); that._appendCols(html.find("table")); return html; } return '<tfoot>' + footerRow + '</tfoot>'; },