I've created a simple skeleton app (hybrid) with appbuilder (screen-builder). Just one view that is a listview that use a backend data source.
I need to overrride dataBound event-function. But I'm not able unless to rewrite all generated code by appbuilder.
I have tested to handle with:
var
= myList = $(
"#myUlList"
).data(
"kendoMobileListView"
);
myList.bind(
"dataBound"
,
function
(e) {...);
var
myList = $(
"#myUlList"
).data(
"kendoListView"
);
myList.bind(
"dataBound"
,
function
(e) {...);
everywhere and after document-ready, but it's return always null
I've tried also via attribute:
data-bound="onDataBound()"
the onDataBound will execute but not after the listview are rendered.
The html tag:
<
ul
id
=
"myUlList"
data-role
=
"listview"
data-style
=
""
data-template
=
"homeModelTemplate"
data-bind
=
"{ source: homeModel.dataSource}"
data-pull-to-refresh
=
"true"
data-endless-scroll
=
"true"
> </
ul
>
Can someone explain to me how to do?
Thanks.
8 Answers, 1 is accepted
One way to subscribe for the dataBound event and implement additional logic would be the following:
<
ul
data-role
=
"listview"
data-template
=
"homeModelTemplate"
data-bind
=
"{ source: homeModel.dataSource, events: {dataBound: databound}}"
...></
ul
>
<script>
databound:
new
function
(){alert(
'dataBound event is raised'
);}
</script>
You could also define the databound function under homeModel and specify it like so:
events: {dataBound: homeModel.databound}
Another approach would be to subscribe for the data-init of the view and then execute the code you already tried with:
<
div
data-role
=
"view"
data-title
=
"Roma3"
...
data-init
=
"onInitialize"
>
<script>
function
onInitialize(){
var
myList = $(
"#myUlList"
).data(
"kendoMobileListView"
);
myList.bind(
"dataBound"
,
new
function
() {alert(
'dataBound event is raised'
);});
}
</script>
It is important to invoke it after the view has been initialized.
Let me know how this works for you.
Regards,
Dimitrina
Telerik
Visit the Telerik Verified Plugins Marketplace and get the custom Cordova plugin you need, already tweaked to work seamlessly with AppBuilder.
Hi Dimitrina,
thank you so much for reply.
I've tried all your solutions and it seem work becouse dataBound-event is raised. But i suppose it's raised just before the listview was rendered.
There is something that i wrong or I did not understand.
I want handle dataBound-event to use responsive image service and process all the images of a listview.
With your suggestions the processAll function don't work well.
see the screenshot of javascript console (the same result with all the three way).
With below code, instead seem work well: image data-src is processed and a correct url is replaced (see second the screenshot of javascript console).
01.
<
div
data-role
=
"view"
data-title
=
"Roma"
data-layout
=
"main"
data-model
=
"app.home"
data-init
=
"onInitialize"
data-show
=
"app.home.onShow"
data-after-show
=
"app.home.afterShow"
>
02.
<!-- **** first test ****
03.
<
ul
id
=
"myUlList"
data-role
=
"listview"
data-style
=
""
data-template
=
"homeModelTemplate"
data-bind
=
"{ source: homeModel.dataSource }"
data-pull-to-refresh
=
"true"
data-endless-scroll
=
"true"
>
04.
</
ul
>
05.
-->
06.
<!-- **** second test **** -->
07.
<
ul
id
=
"myUlList"
>/ul>
08.
<
script
type
=
"text/x-kendo-template"
id
=
"homeModelTemplate"
>
09.
<
div
class
=
"image-with-text"
>
10.
<
img
data-src
=
"#: data['imageUrl'] #"
data-responsive
width
=
"30%"
height
=
"30%"
>
11.
<
h3
>#: data['title'] #</
h3
>
12.
<
p
>#: data['desc'] #</
p
>
13.
</
div
>
14.
</
script
>
15.
</
div
>
16.
<
script
type
=
"text/javascript"
>
17.
function onInitialize() {
18.
/* **** first test ****
19.
var myList = $("#myUlList").data("kendoMobileListView");
20.
myList.bind("dataBound", new function() {
21.
console.log('dataBound event is raised');
22.
app.data.testApp.helpers.html.processAll().then(function (results) {
23.
results.processed; results.failed;
24.
console.log("## processAll ##"); console.log(results);
25.
});
26.
});
27.
*/
28.
console.log("## onInitialize ##");
29.
$("#myUlList").kendoMobileListView({
30.
dataSource: app.home.homeModel.dataSource,
31.
pullToRefresh: true,
32.
template: kendo.template($("#homeModelTemplate").html()),
33.
dataBound: function(e) {
34.
console.log("## dataBound ##");
35.
app.data.testApp.helpers.html.processAll().then(function (results) {
36.
results.processed; results.failed;
37.
console.log("## processAll ##"); console.log(results);
38.
});
39.
}
40.
});
41.
42.
}
43.
</
script
>
But I don't understand the reason.
Thanks,
Francesco.
The second approach initializes a new kendoMobileListView.
In order to use the one already define, would you please try using the following code:
function
onInitialize()
{
var
myList = setTimeout($(
"#myUlList"
).data(
"kendoMobileListView"
), 0);
console.log(
"MyList "
+ myList);
kendo.bind(myList.dataBound,
new
function
() {
console.log(
'dataBound event is raised'
);
app.data.testApp.helpers.html.processAll().then(
function
(results) {
results.processed; results.failed;
console.log(
"## processAll ##"
);
console.log(results);
});
});
Let me know how this works for you.
Regards,
Dimitrina
Telerik
Visit the Telerik Verified Plugins Marketplace and get the custom Cordova plugin you need, already tweaked to work seamlessly with AppBuilder.
Hi Dimitrina,
thank you so much for your time.
I've tested your solution and more tests.
see below code and screenshot.
the html:
<
div
data-role
=
"view"
data-title
=
"Roma"
data-layout
=
"main"
data-model
=
"app.homeView"
data-init
=
"onInitialize"
data-show
=
"app.homeView.onShow"
data-after-show
=
"app.homeView.afterShow"
>
<
ul
id
=
"myUlList"
data-role
=
"listview"
data-style
=
""
data-template
=
"homeViewModelTemplate"
data-bind
=
"{ source: homeViewModel.dataSource}"
data-pull-to-refresh
=
"true"
data-endless-scroll
=
"true"
>
</
ul
>
<
script
type
=
"text/x-kendo-template"
id
=
"homeViewModelTemplate"
>
<
div
class
=
"image-with-text"
>
<
img
data-src
=
"#: data['image'] #"
data-responsive
width
=
"30%"
height
=
"30%"
>
<
h3
>#: data['title'] #</
h3
>
<
p
>#: data['desc'] #</
p
>
</
div
>
</
script
>
</
div
>
Your code (screenshot-1):
<script type=
"text/javascript"
>
function
onInitialize()
{
console.log(
"## onInitialize ##"
);
var
myList = setTimeout($(
"#myUlList"
).data(
"kendoMobileListView"
), 0);
console.log(
"MyList "
+ myList);
kendo.bind(myList.dataBound,
new
function
() {
console.log(
'dataBound event is raised'
);
app.data.testApp.helpers.html.processAll().then(
function
(results) {
results.processed; results.failed;
console.log(
"## processAll ##"
);
console.log(results);
});
});
console.log(
"##"
);
}
</script>
after i've tested below code (screenshot-2):
<script type=
"text/javascript"
>
function
onInitialize()
{
console.log(
"## onInitialize start ##"
);
console.log(
new
Date().toLocaleString());
// first test, your code
var
myList1 = setTimeout($(
"#myUlList"
).data(
"kendoMobileListView"
), 0);
console.log(
"[test.1] MyList1 "
+ myList1);
kendo.bind(myList1.dataBound,
new
function
() {
console.log(
'[test.1] dataBound event is raised'
);
console.log(
'[test.1] li: '
+ $(
"#myUlList li"
).length);
console.log($(
"#myUlList li"
));
app.data.testApp.helpers.html.processAll().then(
function
(results) {
results.processed; results.failed;
console.log(
"[test.1] ## processAll ##"
);
console.log(results);
});
});
// other test
// get element
var
myList3 = $(
"#myUlList"
).data(
"kendoMobileListView"
);
console.log(
"[test.3] MyList3 "
+ myList3);
console.log(
'[test.3] li: '
+ $(
"#myUlList li"
).length);
console.log($(
"#myUlList li"
));
// bind event (render seem not completed)
kendo.bind(myList3.dataBound,
new
function
() {
console.log(
'[test.3][onDataBound] dataBound event is raised'
);
console.log(
'[test.3][onDataBound] li: '
+ $(
"#myUlList li"
).length);
console.log($(
"#myUlList li"
));
});
// process after 3 sec. (render completed)
setTimeout(
function
() {
app.data.testApp.helpers.html.processAll().then(
function
(results) {
results.processed; results.failed;
console.log(
"[test.3][afterTimeout] ## processAll ##"
);
console.log(
'[test.3][afterTimeout] li: '
+ $(
"#myUlList li"
).length);
console.log($(
"#myUlList li"
));
console.log(results);
});
}, 3000);
console.log(
"## onInitialize end ##"
);
}
</script>
(after i've also tested to bind the the event after 3 sec. and it's work.)
With a new kendoMobileListView instance all work well.
But when i use one already defined, and want to bind the dataBound event, it seem that the event will trigger before all listview was rendered.
I don't know where (or if) i made mistakes.
Regards,
Francesco.
There is indeed an issue with the dataBound event raised before the kendoMobileListView and the applied template are fully rendered. I would suggest you to either stick to the way setting a timeout of 3 seconds you found working or define the object (without configuring it) and then initialize and configure it through initiating a kendoMobileListView instance (as you illustrated in your previous reply).
I am afraid that for the moment, I cannot suggest you a better approach.
Regards,
Dimitrina
Telerik
Visit the Telerik Verified Plugins Marketplace and get the custom Cordova plugin you need, already tweaked to work seamlessly with AppBuilder.
Hi Dimitrina,
thanks for your reply.
Do you think that this issue will be fixed in the next time? Need to open a ticket for bug?
Regards,
Francesco.
I additionally consulted the case with my colleagues specifically responsible for Kendo UI Mobile and they confirmed you can proceed with initializing a kendoMobileListView object to configure it as needed. As to the issue concerning the other case, it seems the images are still not downloaded while the ListView itself is already loaded and bound to the data to be still additionally processed since loading of images is an asynchronous process.
Keeping this in mind, the KendoMobileListView itself is not expected for waiting this asynchronous process to be completed before raising the dataBound event. Therefore, we cannot consider the case as a bug.
Regards,
Dimitrina
Telerik
Visit the Telerik Verified Plugins Marketplace and get the custom Cordova plugin you need, already tweaked to work seamlessly with AppBuilder.
Hi Dimitrina,
I understand, thank you so much for your time.