handle dataBound event

9 posts, 1 answers
  1. Francesco
    Francesco avatar
    10 posts
    Member since:
    Jun 2015

    Posted 28 Dec 2015 Link to this post

    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.

  2. Dimitrina
    Admin
    Dimitrina avatar
    3769 posts

    Posted 29 Dec 2015 Link to this post

    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.

     
  3. Francesco
    Francesco avatar
    10 posts
    Member since:
    Jun 2015

    Posted 29 Dec 2015 in reply to Dimitrina Link to this post

    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.

  4. Dimitrina
    Admin
    Dimitrina avatar
    3769 posts

    Posted 31 Dec 2015 Link to this post

    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.

     
  5. Francesco
    Francesco avatar
    10 posts
    Member since:
    Jun 2015

    Posted 31 Dec 2015 in reply to Dimitrina Link to this post

    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.

  6. Dimitrina
    Admin
    Dimitrina avatar
    3769 posts

    Posted 04 Jan Link to this post

    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.

     
  7. Francesco
    Francesco avatar
    10 posts
    Member since:
    Jun 2015

    Posted 05 Jan in reply to Dimitrina Link to this post

    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.

  8. Answer
    Dimitrina
    Admin
    Dimitrina avatar
    3769 posts

    Posted 06 Jan Link to this post

    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.

     
  9. Francesco
    Francesco avatar
    10 posts
    Member since:
    Jun 2015

    Posted 06 Jan in reply to Dimitrina Link to this post

    Hi Dimitrina,

    I understand, thank you so much for your time.

Back to Top