This is a migrated thread and some comments may be shown as answers.
syncReady problem
2 Answers 289 Views
This is a migrated thread and some comments may be shown as answers.
Marcel
Top achievements
Rank 1
Marcel asked on 27 Mar 2018, 12:31 PM

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 Answers, 1 is accepted

Sort by
0
Marcel
Top achievements
Rank 1
answered on 29 Mar 2018, 08:28 PM

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();
});

 

 

0
Tsvetina
Telerik team
answered on 30 Mar 2018, 08:01 AM
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.
Asked by
Marcel
Top achievements
Rank 1
Answers by
Marcel
Top achievements
Rank 1
Tsvetina
Telerik team
Share this question
or