Memory Leak in IE

[Donald]

It seems as though we are getting a memory leak in IE whenever we call datasource.read()

We are using a function for the transport:read.

 transport: {
                read: function (options) {
                   
                    var report = SomeFunctionThatReturnsJqueryPromise();

                    report.success(function (result) {
                        if (result) {

                            options.success(result.Data);
                        }
                 }
        }

[Donald]

Also doesn't seem to be an issue in Chrome.

[Vladimir Iliev]

Hi Donald,

Could you please provide runable demo where the issue is reproduced (for example in KendoUI Dojo)? This would help us pinpoint the exact reason for this behavior.

Kind Regards,
Vladimir Iliev
Telerik

 

 

[Donald]

This reproduces it, you can see with the grid loaded it sits at about 200-300 megs, as you hit read or refresh it quickly goes up to a gig.




<button id="button" onclick="RefreshGrid()">Refresh</button>
<button id="button" onclick="ReadGrid()">Read</button>
<div id="grid"></div>

<script>
 //   var dataSource = null;
    //var tooltip = null;
    function RefreshGrid() {
        var grid = $("#grid").data("kendoGrid");


        grid.dataSource.read();
        grid.refresh();
    }


    function ReadGrid() {

        var grid = $("#grid").data("kendoGrid");

        grid.dataSource.read();
    }


    function BuildDataSet() {
        var dataSet = new Array();

        for (var i = 0; i < 300000; i++) {

            dataSet[i] = {
                ProductName: Date(),
                SupplierID: 12,
                CategoryID: 2,
                QuantityPerUnit: "12 boxes",
                UnitPrice: 13.0000,
                UnitsInStock: 32,
                UnitsOnOrder: 0,
                Discontinued: false
            }           
        }
        return dataSet;
    }


    $(document).ready(function () {

        var dataSource = new kendo.data.DataSource({
            transport: {
                read: function(options) {
                    options.success(BuildDataSet());
                }

            },
            schema: {
                model: {
                    fields: {
                        ProductName: { type: "string" },
                        UnitPrice: { type: "number" },
                        UnitsInStock: { type: "number" },
                        Discontinued: { type: "boolean" }
                    }
                }
            },
            pageSize: 20
        });

        $('#grid').kendoGrid({
            dataSource: dataSource,
            //height: 550,
            //scrollable: true,
            //sortable: true,
            //filterable: true,
            pageable: {
            //    input: true,
                numeric: false
            },
            dataBound: function () {

                //tooltip = $("#grid").kendoTooltip({
                //    width: 120,
                //    position: "hover"
                //}).data("kendoTooltip");

                //tooltip.show();               
            },
            columns: [
                "ProductName",
                { field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: "130px" },
                { field: "UnitsInStock", title: "Units In Stock", width: "130px" },
                { field: "Discontinued", width: "130px" }
            ]



        });



    });

</script>

[Vladimir Iliev]

Hi Donald,

After deeper investigation it seems that the memory leak in IE is related to the current implementation of the garbage collector (IE is known for it's memory leaks, more information is available on various resources over the internet).  As our dev team already made it's best to workaround these limitation (of the browser) currently I can only suggest to load the data from remote source and enable the "serverPaging" option of the dataSource - that way only the items related to the current page of the grid will be loaded.

Regards,
Vladimir Iliev
Telerik

 

 

[Tim]

I came across this same problem and the way I worked around it was to manually clear the datasource data before reading. i.e:

function ReadGrid() {
    var grid = $("#grid").data("kendoGrid");
    grid.dataSource.data([]);
    grid.dataSource.read();
}

This may not be right for every use case because of course it clears the grid during the update, but it got around the problem.