I have used the example code from the documentation:
<div data-role="view">
<ul id="foo"></ul>
</div>
<script>
$("#foo").kendoMobileListView({
dataSource: new kendo.data.DataSource({
data: [{title: "foo"}, {title: "bar"}]
}),
dataBinding: function(e) {
console.log(e);
}
});
dataBinding function is not called. I then, instead, tested with a "dataBound" function and that does get called as expected.
I am using Kendo Mobile v2013.2.910 and jQuery 1.9.1
Kendo UI Mobile developer here. The dataBinding event is fresh off the oven – so fresh that it is yet to be available in the upcoming service pack release. It should not have slipped in the docs, I am sorry for that.
Related
I am new in Kendo MVVM. Trying to bind datasource data to a listview but it does not show the data.Tried to mix and match all available examples. Want to use the template which is not working. Here is the code sample
http://dojo.telerik.com/IwawE
Modified the dojo with the fixes
http://dojo.telerik.com/IwawE/5
Your data binding declaration is incomplete and results in javascript errors when kendo tries to instantiate the listview.
data-bind="source:gsSystem,
visible: isVisible,
events: { click: }"
Firstly, there is no 'isVisible' property on your view model so the binding will return 'undefined' resulting in the listview not being shown. Either remove that binding or add the property as part of the model, for example:
isVisible: true
Secondly, there is no function defined for the click event. Usually you would specify one such as:
events: { click: onClick }
and add the handler to the model:
onClick: function (e) {
alert("Clicked");
}
However in the case of the ListView, there is no click event available. Instead, remove the event from the ListView declaration and add it to the div within the template instead:
<script type="text/x-kendo-template" id="tmpl">
<div data-bind="events: { click: onClick }">#:text#</div>
</script>
I am trying to use Kendo's Mobile widgets inside of my PhoneGap Durandal project.
See sample source project here: https://github.com/rodneyjoyce/DurandalKendoMobile/tree/master/App
I don't understand where to put the Kendo initilisation code (the widgets do not render without this):
window.kendoMobileApplication = new kendo.mobile.Application($(document.body), {
skin: "flat"
});
I have tried to put it into the Index.html, shell.html and into a particular Durandal page view (x.html), shell.js, main,js and x.js but none of these work.
My Index page has these links in it:
<script src="css/telerik/js/kendo.all.min.js"></script>
<link href="css/telerik/styles/kendo.mobile.flat.min.css" rel="stylesheet" />
My Durandal View has the following HTML with Kendo Mobile widgets:
<section>
1
<div id="kendoindex">
<div data-kendo-role="view" data-kendo-title="View">
<header data-kendo-role="header">
<div data-kendo-role="navbar">
<span data-kendo-role="view-title">Title</span>
</div>
</header>
<ul data-kendo-role="listview">
<li>Item 1</li>
<li>Item 2</li>
</ul>
</div>
</div>
2
</section>
and my ViewModel for this View:
define(function (require)
{
function viewModel()
{
var self = this;
self.activate = activate;
function activate()
{
//window.kendoMobileApplication = new kendo.mobile.Application($("#kendoindex"), {
// skin: "flat"
//});
}
}
var vm = new viewModel();
return vm;
});
If I don't call kendoMobileApplication then the Kendo Mobile widgets are not rendered (it just shows "1 Title 2" with no CSS (ie. Kendo is not transforming them).
Everything seems to be keyed on where to call this: kendoMobileApplication in Durandal.
I followed the Durandal guidelines to give the Kendo bindings their own namespace: http://durandaljs.com/documentation/KendoUI/
UPDATE 1
I have created a simple Durandal 1.2 project which highlights the problem with Kendo Mobile and Durandal (and PhoneGap, but irrelevant here)), namely:
The only way to get the Mobile controls to render properly is to call kendo.mobile.Application. However this cannot find the right HTML element if it is put into a different file and loaded with Durandal.
I cannot find the right place to put this init code as it throws this error: “Uncaught Error: Your kendo mobile application element does not contain any direct child elements with data-role="view" attribute set. Make sure that you instantiate the mobile application using the correct container.”
kendoIndex.html is NOT Durandal but shows how it should be rendered if the kendo.mobile.Application is called correctly (Run this first to see what we are trying to achieve)
Shell : Has the Kendo Layout which does not get rendered.
Home View: Has the simple Kendo Mobile view – this does not get rendered.
About: A simple HTML page without Kendo
Source is on Guthub – if anyone can get Kendo Mobile working with Durandal I would appreciate it (or at least confirm if it is impossible (Telerik are no help at all on this)).
https://github.com/rodneyjoyce/DurandalKendoMobile/tree/master/App
Here's a working demo, which shows the correct start screen, but doesn't show the about view on navigation click. There's probably some extra work required to either remove kendo's or Durandal's router functionality.
http://rainerat.spirit.de/DurandalKendoMobile/App/#/
There were a couple of things required to make it work.
https://github.com/RainerAtSpirit/DurandalKendoMobile/commits/master
Kendo requires that the host element and all 'view' and 'layout' elements are in the DOM and that 'view' and 'layout' are child of the container element. After updating the view html to reflect this the right place to create the kendo app would be home.js
define(function( require ) {
var ctor = function() {
};
ctor.prototype.activate = function() {
console.log("Home activate");
};
ctor.prototype.viewAttached = function() {
var $kendoHost = $('#kendoHost');
// Workaround for height = 0.
// Additional code required to calculate on windows.resize
$kendoHost.height($(window).height());
this.app = new kendo.mobile.Application($kendoHost, {
skin: "flat"
});
console.log("Home viewAttached", this.app, $kendoHost.height());
};
return ctor;
});
Last kendo determines kendoHost height as 0, which prevents that the correctly rendered view show up. As a workaound I'm using $kendoHost.height($(window).height()); right before creating the app addresses.
As said in my comment above I'm still not sure if I'd recommend combining those two SPA frameworks as you might encounter more glitches like that while building your app. That said I'd love to hear about your progress :).
I have really weird problem. I am trying to implement "root" view which also works as some namespace structure. Same principle introduced in codeschool.com course part II. In this root view, I want to catch event "click button", but that's the problem. When I click on button nothing happened.
window.App = new (Backbone.View.extend({
el: $("#app"),
Collections: {},
Models: {},
Views: {},
Routers: {},
events: {
'click button' : function(e) {
alert("Thank god!");
}
},
render: function(){
//for test purposes
console.log($("#app").find("button"));
console.log(this.$el.find('button'));
},
start: function(){
this.render();
new App.Routers.PostsRouter();
Backbone.history.start({pushState: true});
}
}))();
$(document).ready(function() { App.start() });
The HTML look like this
<body>
<div id="app">
<div id="posts"></div>
<button>Click me</button>
</div>
</body>
And what's really weird is output from console.log in render function. Both selectors are same, even the context is same, so where is problem?
console.log($("#app").find("button")); //this returns correct button
console.log(this.$el.find('button')); //this returns 0 occurences (WTF?)
EDIT:
After little change at el: "#app", still same problem. Problem was (thanks to #nemesv) in instantiating this class before DOM is loaded. But however, it's not possible to instantiating after DOM is loaded, because then it's not possible to use that namespace structure (eg. App.Model.Post = Backbone.Model.extend() ). But this "main view with namespace structure" is introduced in codeschool.com course as some sort of good practice. Solution can be found there http://jsfiddle.net/BckAe
You have specified your el as a jquery selector but because you are inside an object literal it evaluates immediately so before the DOM has been loaded.
So the el: $("#app"), won't select anything.
You can solve this by using one of the backbone features that you can initilaize the el as a string containing a selector.
So change your el declaration to:
el: "#app"
Your click event is not triggered because you instantiate your view before the DOM is loaded so backbone cannot do the event delegation your you.
So you need separate your view declaration and creation into two steps. And only instantiate your view when the DOM is loaded:
var AppView = Backbone.View.extend({
el: "#app",
//...
});
$(document).ready(function()
{
window.App = new AppView();
App.start()
});
Demo: JSFiddle.
I am using Asp.Net MVC3, for a project.
In one of the page, I am using MS Charts. In View I have a Image which shows the chart as follows:
<img src="#Url.Action("RenderCharts", "Home", new
{
XAxisColor = ViewBag.XAxisColor,
YAxisColor = ViewBag.YAxisColor,
})" alt="Charts" runat="server" />
I have 2 CheckBoxes, which is used to change Chart Axes Colors. When the checkbox is clicked, page is submitted and checkbox status is stored and based on that Chart is rendered:
bool XAxisColor = (#ViewBag.XAxisColor) ?? true;
bool YAxisColor = #ViewBag.YAxisColor ?? false;
#Html.CheckBox("chkXAxisColor", XAxisColor, new { #Id = "chkXAxisColor",
onClick = "this.form.submit();" })
X Axis Color
#Html.CheckBox("chkYAxisColor", YAxisColor, new { #Id = "chkScatter",
onClick = "this.form.submit();" })
Y Axis Color
When first time the page is loaded, RenderCharts() Action gets called and Chart is rendered.
But when i Click any of the CheckBox, RenderCharts() Action gets called twice.
I could not understand this issue. I have created a sample Application which can be downloaded from here https://www.dropbox.com/s/ig8gi3xh4cx245j/MVC_Test.zip
Any help would be appreciated. Thanks in advance.
This appears to be something to do with Internet Explorer. Using your sample application, everything works fine in both Google Chrome and Firefox, but when using IE9, there are two Action requests on a postback.
Using the F12 developer tools on the network tab, it shows an initial request to RenderCharts which appeared to be aborted:
The (aborted) line in the middle is, I suspect, the additional request you're seeing. Why this happens, I don't know!
Finally got the answer. The problem was
runat="server"
in the Img tag.
Removing runat fixed the issue.
I can eliminate the IE issue in the following manner by simply using a bit of JQuery instead. A few possible advantages...
It eliminates the cross-browser issue.
It is an unobtrusive approach (not mixing javascript and HTML in the view).
You can update the image via ajax.
Create a new file in the scripts folder (e.g. "chart.js") which will simply attach an anonymous function to the the click events of your checkboxes from the document ready function. You would obviously need to include the script reference in your page as well:
$(document).ready(function () {
// Attach a function to the click event of both checkboxes
$("#chkXAxisColor,#chkScatter").click(function () {
// Make an ajax request and send the current checkbox values.
$.ajax({
url: "/Home/RenderCharts",
type: "GET",
cache: false,
data: {
XAxisColor: $("#chkXAxisColor").attr("checked"),
YAxisColor: $("#chkScatter").attr("checked")
},
success: function (result) {
alert(result);
$("#chart").attr("src", result);
}
});
});
});
Best of all, you get to eliminate the javascript from your view :)
...
<div style="margin: 2px 0 2px 0">
#Html.CheckBox("chkXAxisColor", XAxisColor, new { #Id = "chkXAxisColor" })
X Axis Color
#Html.CheckBox("chkYAxisColor", YAxisColor, new { #Id = "chkScatter" })
Y Axis Color
</div>
...
This is of course a very basic example which does eliminate the IE issue but you could get fancier from there in terms of how you update the image + show a loading gif, etc with only a few more lines.
Hopefully it is a workable solution for you!
I have a web application that loads javascript on page load:
$(function() {
$('.modal-delete').click(function() {
alert();
});
});
I have a html page with a series of buttons which alert a blank message box when they're clicked:
<button class="modal-delete btn danger"></button>
which works fine.
However, a have some AJAX calls that generate more buttons just like the ones above but NOT on page load! They can be created at any time. These buttons do not do anything but they're meant to load the alerts. They're identical but because they never existed on page load, the Jquery code doesn't work on these buttons. How do I attach the same code to these buttons too?
Many thanks :).
I think you'll want jQuery's 'live()' function:
$('.modal-delete').live('click', function() {
alert();
});
This binds to the elements which match but also rebinds when new elements are added in the future:
"Attach an event handler for all elements which match the current selector, now and in the future"
Change the ready code to this...
$(function() {
$("document").on("click", ".modal-delete", function() {
alert("click");
});
});