[Solved] Grid Memory Leak with Ajax Call?

[Limin]

Hi there,

 I created a simple MVC2 web application which makes Ajax calls to fetch a partial view which contains a grid. When an Ajax call is made  and the returned result is inserted into the main page with $().html() more than once, memory leaks. The leakage tool I used is IEJSLeaksDetector.

 The version of Telerik I used is 2011.3.1115.

 The following are the extracted code.

 Main Page in which the partial view is replaced.

<%@ Page Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage" %>
<%@ Import Namespace="Telerik.Web.Mvc.UI" %>
<%@ Import Namespace="TelerikGridAjax.Models" %>

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
    Home Page
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">

    <script src="/Scripts/jquery-1.6.4.min.js"></script>

    <%= Html.Telerik().StyleSheetRegistrar()
                      .DefaultGroup(group => group
                      .DefaultPath("~/css")
                      .Add("telerik.common.css")
                      .Add("telerik.telerik.css")
                          )
    %>

    <%= Html.Telerik().ScriptRegistrar().DefaultGroup(group => group
        .DefaultPath("~/Scripts")
        .Add("telerik.common.min.js")
        .Add("telerik.grid.js")
    )
    .jQuery(false) %>


    <h2><%= Html.Encode(ViewData["Message"]) %></h2>
    <p>
        To learn more about ASP.NET MVC visit <a href="http://asp.net/mvc" title="ASP.NET MVC Website">http://asp.net/mvc<;/a>.
    </p>
    <div id = "container">Original Grid</div>
    <input type = 'button' id="insertGrid" value = "Insert grid"/>




<script type="text/javascript">

    $(document).ready(function () {

        $('#insertGrid').click(function () {
            var url = "/Home/GetGrid"
            var form_data = {};
            $.ajax({
                type: 'GET',
                dataType: 'html',
                url: url,
                data: form_data,
                success: function (data) {

                    $('#container').find("*").empty();
                    $('#container').html(data);
                },
                error: function (obj, text, error) {
                    alert("error:" + obj.responseText);
                }
            }); //ajax

        }); //click
    });  //document ready

</script>

</asp:Content>

Controller

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

using Telerik.Web.Mvc;
using Telerik.Web.Mvc.UI;
using TelerikGridAjax.Models;


namespace TelerikGridAjax.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            ViewData["Message"] = "Welcome to ASP.NET MVC!";

            return View();
        }

        public ActionResult About()
        {
            return View();
        }

        public ActionResult GetGrid()
        {
            return PartialView("UserGrid");
        }

    }


}

Partial View UserGrid

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl" %>

<%@ Import Namespace="Telerik.Web.Mvc.UI" %>
<%@ Import Namespace="TelerikGridAjax.Models" %>

<% Html.Telerik().Grid<MyModel>()
            .Name("gridTest")
            .EnableCustomBinding(false)
            .Columns(columns =>
            {
            })
            .Render();
    %>

Model

public class MyModel
    {
    }

 If the partial view does not contain a Grid, there is no memory leak. So I think the issue was not caused by AJAX call.

 Any idea how to eliminate or reduce the memory leak? Your help will be greatly appreciated.

Thanks

Limin