This is a migrated thread and some comments may be shown as answers.

handle dataBound event

8 Answers 83 Views
AppBuilder in-browser client
This is a migrated thread and some comments may be shown as answers.
This question is locked. New answers and comments are not allowed.
Francesco
Top achievements
Rank 1
Francesco asked on 28 Dec 2015, 08:32 PM

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

Sort by
0
Dimitrina
Telerik team
answered on 29 Dec 2015, 02:18 PM
Hi Francesco,

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>
Then, define the function script:
<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.

 
0
Francesco
Top achievements
Rank 1
answered on 29 Dec 2015, 04:35 PM

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.

0
Dimitrina
Telerik team
answered on 31 Dec 2015, 07:55 AM
Hello 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.

 
0
Francesco
Top achievements
Rank 1
answered on 31 Dec 2015, 12:53 PM

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.

0
Dimitrina
Telerik team
answered on 04 Jan 2016, 02:52 PM
Hello 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.

 
0
Francesco
Top achievements
Rank 1
answered on 05 Jan 2016, 09:40 AM

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.

0
Accepted
Dimitrina
Telerik team
answered on 06 Jan 2016, 09:19 AM
Hello 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.

 
0
Francesco
Top achievements
Rank 1
answered on 06 Jan 2016, 05:35 PM

Hi Dimitrina,

I understand, thank you so much for your time.

Tags
AppBuilder in-browser client
Asked by
Francesco
Top achievements
Rank 1
Answers by
Dimitrina
Telerik team
Francesco
Top achievements
Rank 1
Share this question
or