Element rendering event

4 posts, 0 answers
  1. Мавричев
    Мавричев avatar
    3 posts
    Member since:
    Apr 2018

    Posted 19 Jul Link to this post

    Hello!

    Each kendo-element have initialization script like this:

    kendo.syncReady(function()...........);


    How I can define a moment when it end working and element is finally initialized and displayed.

    P.S.
    I want programmatically edit markup after element is displayed.

  2. Veselin Tsvetanov
    Admin
    Veselin Tsvetanov avatar
    795 posts

    Posted 23 Jul Link to this post

    Hello Mavrichev,

    The $(document).ready(function() {...}); should work for you. It will be called after the full initialization logic has been executed in the kendo.syncReady() function. In case you would like to manipulate the items in a data bound widget, you could do that in its DataBound() event. Here is how such case would be approached with the Scheduler widget:
    @(Html.Kendo().Scheduler<CustomEditButton.Models.AppointmentSummaryModel>()
        .Name("scheduler")
        .Events(e => e.DataBound("onDataBound"))
    ...

    and:
    function onDataBound(e) {
        // perform custom logic
    }

    Regards,
    Veselin Tsvetanov
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Мавричев
    Мавричев avatar
    3 posts
    Member since:
    Apr 2018

    Posted 24 Jul Link to this post

    What if an element received through an ajax request. How do I then find out when the element was initialized.

    Because the document.ready event does not work anymore.

  4. Veselin Tsvetanov
    Admin
    Veselin Tsvetanov avatar
    795 posts

    Posted 26 Jul Link to this post

    Hello Mavrichev,

    In this case, the best way to identify that the widget has completed its initialization would be the dataBind event. As I mentioned previously that event will be available for the databound widgets

    - The Data Management widgets (except for the Spreadsheet);

    - The drop-downs;

    - The Charts;

    - The Gantt and the Scheduler;

    - The ListBox;

    - The PanelBar and the TreeView;

    Apart from that, if you are using MVC / Core helpers, which automatically generate the kendo.asyncReady() call, you could use their deferred initialization. Then you could include the deferred scripts a <script> tag:
    <script>
        @Html.Kendo().DeferredScripts(false)
    </script>

    After the @Html.Kendo().DeferredScripts(false) you could implement the custom logic that would manipulate the mark-up of the widget. Note, that the databound widgets would not be populated with data at this stage. For that to happen you could wait for the dataBound event.

    IF the above does not help, please tell me which are the widgets, that you intend to use, so I will be able to provide you with more specific directions. 

    Regards,
    Veselin Tsvetanov
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top