Running script after data template binding is complete?

11 posts, 0 answers
  1. Brian Vallelunga
    Brian Vallelunga avatar
    88 posts
    Member since:
    May 2008

    Posted 24 Apr 2012 Link to this post

    I have the need to use a third-party widget (https://github.com/harvesthq/chosen/) in a data template but am unsure of how to instantiate it. It basically wraps a multi-select element, which is simple enough, but I need this auto-generated from my view model.

    In Knockout, there's an "afterRender" event that I can use to call into my view model, passing the newly created HTML elements. Does anything like this exist in Kendo's MVVM framework?

    For most of the Kendo widgets, I seem to be able to use the data-role attribute to handle widget creation.

    Thanks
  2. Petyo
    Admin
    Petyo avatar
    2438 posts

    Posted 27 Apr 2012 Link to this post

    Hi,

    Such event is not present at the moment. kendo.bind is a synchronous method, so instantiating the chosen widget immediately after that (based on jQuery selector, for example) should work. 

    Regards,
    Petyo
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
  4. Mark
    Mark avatar
    16 posts
    Member since:
    Apr 2012

    Posted 27 Apr 2012 Link to this post

    Hi Petyo,

    I have a similar requirement to Brian however I am using a kendo template as part of my solution. When I fire a jquery selector on the DOM elements that are created by the template they are rendered in the browser almost instantly however they are not there immediately after the bind. Is the template render occuring asynchronously?

    Sample HTML:

    <div id="folders" data-role="listview" data-template="exp-template" data-bind="source: expList"></div>
    <div class="expbase" data-bind="attr: { data-id: FolderId },events: { click: select, dblclick: open }">
        <img src="/Images/fileIcons/folder.png" height="32px" width="32px">
        <p><span data-bind="text: Data"></span></p>
    </div>

    Sample JS:

    var explorerModel = kendo.observable({
        expList: new kendo.data.DataSource({
            type: "json",
            transport: {
                read: { //Main explorer list getter configuration
                    url: "/Explorer/GetFolders/",
                    type: "GET",
                    dataType: "json",
                    data: {
                        id: function () {
                            return explorerModel.currentFolderId;
                        }
                    }
                }
            }
        })
    });
     
    $(document).ready(function () {
     
        kendo.bind($("#folders"), explorerModel);
     
        console.log($(".expbase"));
    });

    Any thoughts/comments appreciated.

    Mark.
  5. Petyo
    Admin
    Petyo avatar
    2438 posts

    Posted 27 Apr 2012 Link to this post

    Hello Mark,

    The dataSource data fetching is the asynchronous one, in that case. I think that binding to the change event of the dataSource would be the right time for that.

    You may have to bind to it after the kendo.bind call (due to the event handlers order of execution). 

    All the best,
    Petyo
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  6. Mark
    Mark avatar
    16 posts
    Member since:
    Apr 2012

    Posted 27 Apr 2012 Link to this post

    Hi Petyo,

    JS is now:

    var explorerModel = kendo.observable({
        expList: new kendo.data.DataSource({
            type: "json",
            change: function (e) {
                console.log($('.expbase'));
            },
            transport: {
                read: { //Main explorer list getter configuration
                    url: "/Explorer/GetFolders/",
                    type: "GET",
                    dataType: "json",
                    data: {
                        id: function () {
                            return explorerModel.currentFolderId;
                        }
                    }
                }
            }
        })
    });
      
    $(document).ready(function () {
      
        kendo.bind($("#folders"), explorerModel);
      
        console.log($(".expbase"));
    });

    In this example (which I have previously tried), while the data has changed, the DOM rendering from the template is still occurring (I assume) so the jquery selector still gets no results.

    I'm not sure I understand the reference to kendo.bind in this context since I need to 'doSomething()' each and every time after both the data has changed and the template has re-rendered. Kendo.bind is only called once?

    Thanks.

    Mark.
  7. Brian Vallelunga
    Brian Vallelunga avatar
    88 posts
    Member since:
    May 2008

    Posted 27 Apr 2012 Link to this post

    The kendo.bind solution won't work for me, because the control won't exist until objects are added to the view model. And I have the need for an arbitrary number of these objects.

    Is it possible to wrap the chosen control with a very lightweight Kendo widget? Then I could apply the data-role attribute and have them wired up on their own, correct?
  8. Andy
    Andy avatar
    1 posts
    Member since:
    Apr 2012

    Posted 27 Apr 2012 Link to this post

    I'd just like to add that this is causing us some grief as well.  So far we have been able to work around it, but it is definitely a workaround.

    This limitation severely limits the separation of concerns that MVVM is supposed to provide.  If there is a jQuery or Kendo call that I need to make to finish setting up the visual state of a rendered template, I should not have to worry about this in the context of a data operation.
  9. Petyo
    Admin
    Petyo avatar
    2438 posts

    Posted 02 May 2012 Link to this post

    Mark, 

    I think that the reason for that is what I originally noted in my post:

    You may have to bind to it after the kendo.bind call (due to the event handlers order of execution). 
    Currently, you are binding it in the constructor, which happens before the kendo.bind call.

    Andy, Brian - I agree on such (or similar) functionality being useful in the cases you describe. What you can do is to vote for it in our User Voice tracker - our team will look into it further. 

     

    Kind regards,
    Petyo
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  10. Mark
    Mark avatar
    16 posts
    Member since:
    Apr 2012

    Posted 02 May 2012 Link to this post

    Hi, In the provided code, I am doing a console.log jquery lookup of all the objects that I expect to be created from the template. This occurs after the kendo.bind (next line of code). Consistently they are not present hence the original premise and notes from others that there is no afterrender type stuff. Mark
  11. Petyo
    Admin
    Petyo avatar
    2438 posts

    Posted 02 May 2012 Link to this post

    Hello,

    See code below for what I mean. 

    var explorerModel = kendo.observable({
        expList: new kendo.data.DataSource({
            type: "json",
            transport: {
                read: { //Main explorer list getter configuration
                    url: "/Explorer/GetFolders/",
                    type: "GET",
                    dataType: "json",
                    data: {
                        id: function () {
                            return explorerModel.currentFolderId;
                        }
                    }
                }
            }
        })
    });
       
    $(document).ready(function () {
       
        kendo.bind($("#folders"), explorerModel);
        // this should happen *after* kendo.bind
        explorerModel.expList.bind("change", function() {
           console.log($(".expbase"));
        }
    });


    All the best,
    Petyo
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  12. Mark
    Mark avatar
    16 posts
    Member since:
    Apr 2012

    Posted 02 May 2012 Link to this post

    Hi Petyo,

    That method works!

    Apologies for not understanding in the first place.

    Many Thanks,

    Mark.
Back to Top
Kendo UI is VS 2017 Ready