Running script after data template binding is complete?

[Brian Vallelunga]

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

[Petyo]

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

[Mark]

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.

[Petyo]

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

[Mark]

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.

[Brian Vallelunga]

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?

[Andy]

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.

[Petyo]

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

[Mark]

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

[Petyo]

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

[Mark]

Hi Petyo,

That method works!

Apologies for not understanding in the first place.

Many Thanks,

Mark.