syncReady problem

3 posts, 0 answers
  1. Marcel
    Marcel avatar
    42 posts
    Member since:
    Apr 2011

    Posted 27 Mar 2018 Link to this post

    Hi,

    I have a razor page which is showing a grid, where the on-change is bound to a javascript function that loads a partial view using $.ajax into an element on the same page.
    That partial view is using kendo htmlhelpers to construct certain elements.
    Since these elements are initialized using kendo.syncReady(), those initialization functions are (obviously) put into the global scope.
    This leads to a problem due to those initialization functions never get cleaned up as I can see while debugging in VS 2017.
    There is a script block section in which those methods keep adding up each time i select another row which loads the related partial view.

    any ideas how to prevent this or how to clean this up ?

    Thanks in advance.

  2. Marcel
    Marcel avatar
    42 posts
    Member since:
    Apr 2011

    Posted 29 Mar 2018 in reply to Marcel Link to this post

    Eventually i solved this by stripping out the script blocks generated servers-side and executing them as anonymous functions after the raw content was added to the dom.

    // Get all text between all script tags
    var scripts = content.match(/<script>(.*?)<\/script>/g);
    if (scripts) {
      scripts = scripts.map(function (val) {
        var script = val.replace('<script>kendo.syncReady(function(){', '').replace('});</script>', '');
        content = content.replace(val, '');
        return script;
      });
    }

    After that i could add the new content to the dom and execute the stripped out functions.

    var view = $(content);
    // make sure existing kendo widgets are destroyed
    kendo.destroy(container.children());
    container.empty().append(view);
    // Execute scripts
    $.each(scripts, function (index, script) {
       var fn = new Function(script);
       fn.call();
    });

     

     

  3. Tsvetina
    Admin
    Tsvetina avatar
    2481 posts

    Posted 30 Mar 2018 Link to this post

    Hello Marcel,

    The Kendo UI initialization scripts would usually be rendered right after the widgets wrapper elements, meaning that they should be rendered inside the partial view, so when you reload it, the initialization scripts will be wiped out together with the partial view content. If you are going to render the partial view multiple times in a page, you need to ensure that widgets inside it have unique IDs.

    The only scenario in which initialization scripts are rendered together and not immediately after their target widget is if you are using deferred widget initialization, as explained here:
    Deferring Initialization

    You can check if this is the case and remove the deferred initialization logic, or you can review it to better fit your scenario.

    Regards,
    Tsvetina
    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