Hi,
I am evaluating Kendo ui by building a prototype in work. I am running into an issue where I can't seem to reuse datasources in global scope. I was hoping to define my datasources once and instantiate 1 remote datasource for each data model the app needs. My content loads and unloads (via ajax) inside a div and widgets (mostly grids) are swapped in and out and bind to whatever datasources they need. I expected the instances of these widgets would be cleaned up as the content pane is being destroyed and re-created. It seems that even though the DOM elements are being removed the grid instances are remaining. So every time the same content pane is loaded in the same session, a new instance of the grid is created and never goes away. When the user visits the same content pane over and over he creates more and more invisible grid instances. I proved this by putting break points in the refresh function of the grid. Grids that are no longer visible are still listening for data updates and drawing on every datasource change event. These objects don't go away until I refresh the page or close it. It would seem that datasources hold references to the widget objects they are bound to and prevent them from getting picked up by the garbage collector (I tested several browsers all with the same results).
The only way I can seem to fix this is to take the datasources out of the global space. If I put the creation of the datasource in the content pages with the widgets then the datasources and widgets are cleaned up the next time the user loads the content pane. But the problem is now I have to rewrite the datasource signature for every content page that looks at the same data.
I guess my first question is: Is there some trick I'm missing for using global datasources? Is there some kind of resource flush that I didn't see in the documentation?
If not is there a best practice for sharing datasources with widgets that care created and destroyed on the same page? (single page application)
Thanks
Mike V-C
I am evaluating Kendo ui by building a prototype in work. I am running into an issue where I can't seem to reuse datasources in global scope. I was hoping to define my datasources once and instantiate 1 remote datasource for each data model the app needs. My content loads and unloads (via ajax) inside a div and widgets (mostly grids) are swapped in and out and bind to whatever datasources they need. I expected the instances of these widgets would be cleaned up as the content pane is being destroyed and re-created. It seems that even though the DOM elements are being removed the grid instances are remaining. So every time the same content pane is loaded in the same session, a new instance of the grid is created and never goes away. When the user visits the same content pane over and over he creates more and more invisible grid instances. I proved this by putting break points in the refresh function of the grid. Grids that are no longer visible are still listening for data updates and drawing on every datasource change event. These objects don't go away until I refresh the page or close it. It would seem that datasources hold references to the widget objects they are bound to and prevent them from getting picked up by the garbage collector (I tested several browsers all with the same results).
The only way I can seem to fix this is to take the datasources out of the global space. If I put the creation of the datasource in the content pages with the widgets then the datasources and widgets are cleaned up the next time the user loads the content pane. But the problem is now I have to rewrite the datasource signature for every content page that looks at the same data.
I guess my first question is: Is there some trick I'm missing for using global datasources? Is there some kind of resource flush that I didn't see in the documentation?
If not is there a best practice for sharing datasources with widgets that care created and destroyed on the same page? (single page application)
Thanks
Mike V-C
1 Answer, 1 is accepted
0
Mike
Top achievements
Rank 1
Rank 1
answered on 10 Feb 2012, 04:26 PM
Ok I've implemented sort of a work around. I separated the Datasource signature from the datasource creation. In global scope I define a datasource signature and use that to create datasource instances on the fly. For example
in some js include file I declare:
========
then in my dynamic content pages I do the following:
This gets around the memory leak but doesn't fix it. But at least I can put the signature in one place so I don't have to change every widget if the datasource signature changes. However, this forces every content pane to generate a separate datasource instance. That's ok when widgets that need the datasource exist on the same content page. However if I have another widget somewhere else in the DOM (like a menu that never goes away), and that also needs to see the same data, I'm going to have to use a separate instance of the same datasource and program around it...
In the long run this isn't a deal breaker but it should be documented or fixed in a later version. Putting datasources in common areas seemed like a natural thing to do... allowing them to safely swap controls dynamically will increase their flexibility for developers.
in some js include file I declare:
========
var myDatasourceSig = {
transport: {
read: {
url: "/bla.json",
cache: false,
dataType: "json"
},
update: {
url: "/blabla.json",
cache: false,
type: "POST"
}
},
batch: false,
schema: {
model: contextHelpModel,
data:"contextHelpList"
}
};
============================then in my dynamic content pages I do the following:
$("#mytable").kendoGrid({
dataSource: new kendo.data.DataSource(myDatasourceSig),
scrollable: true,
sortable: true,
columns:[{
...
}]
});
or use a temporary global
var myDatasourceInst =new kendo.data.DataSource(myDatasourceSig);
$("#mytable").kendoGrid({
dataSource: myDatasourceInst,
scrollable: true,
sortable: true,
columns:[{
...
}]
});
This gets around the memory leak but doesn't fix it. But at least I can put the signature in one place so I don't have to change every widget if the datasource signature changes. However, this forces every content pane to generate a separate datasource instance. That's ok when widgets that need the datasource exist on the same content page. However if I have another widget somewhere else in the DOM (like a menu that never goes away), and that also needs to see the same data, I'm going to have to use a separate instance of the same datasource and program around it...
In the long run this isn't a deal breaker but it should be documented or fixed in a later version. Putting datasources in common areas seemed like a natural thing to do... allowing them to safely swap controls dynamically will increase their flexibility for developers.