Multiple Grids using Ajax on a single page

[Gabe]

I am stress testing my page.
I have about 8 grids on a single page.
Each use the same process of receiving data. I am using Ajax for with CustomBinding to getdata.
I have created an event on a row that if I double click it opens a new page, which also can contain about 8 grids.
All these grids follow the exact pattern for retrieving data as well. I have noticed in InternetExplorer only that sometimes the grids
fail to load in a reasonable amount of time.

The scenario to recreate the problem is:

Open the initial page let the page completely load.

Double click on a row which causes a child page to open containing multiple grids.
Close this child window before the page is completely loaded.
Then back on the parent page, double click on a row again to get a child window to open again.

Repeat the above three lines and within a couple times, the child window lags extremely loading data.
It pretty much just sits there trying to load the page. It is almost like IE can't handle all the Ajax requests and even is still trying to complete a previous on that I have closed out. The page may or maynot render, one time it took 10 minutes.

Is there a way to queue up the ajax calls so IE isnt just slammed? I have also tested this in Firefox 4, the problem does not happen here. It works perfectly. So it has to be an IE thing.

Please let me know what I can do to resolve this issue.

Here is the pattern that every grid follows:

@(Html.Telerik().Grid(Model.Data)
                .Name(Model.GridID)
                .DataKeys(k => k.Add(o => o.ResultId))
                .DataBinding(d => d.Ajax().Select("GetModelData", "MyController"))
                .EnableCustomBinding(true)
                .Columns(columns =>
                {
                    columns.Bound(o => o.Name)
                        .Title("Name")
                        .Width("30%");
                    columns.Bound(o => o.Age).Title("Age").Width("10%"));                    
                    columns.Bound(o => o.Email).Title("Email(s)").Width("20%"));
                })
                .Scrollable(s =>
                {
                    s.Enabled(true).Height(ViewBag.GridHeight);
                })
                .Selectable()
                .Resizable(r => r.Columns(true))
                .Sortable()
                .ClientEvents(e =>
                {
                    e.OnLoad("onLoad");
                    e.OnDataBinding("onDataBinding");
                    e.OnDataBound("onDataBound");
                    e.OnRowSelect("onRowSelect");
                })
)

And my Action:

        [ValidateInput(false)]
        [GridAction]
        public ActionResult GetModelData(GridCommand command, string pageNumber, string pagingToken, string q, string order, string member, string type, string gridid)
        {
            var model = GetBaseGridModel(pageNumber, pagingToken, q, order, member, type, gridid);
 
            if (model != null)
            {
                Session[gridid] = model;
 
                Type modelType = model.GetType();
                PropertyInfo dataProperty = modelType.GetProperty("Data");
 
                var data = dataProperty.GetValue(model, null) as IEnumerable;
 
                return View(new GridModel()
                {
                    Data = data,
                    Total = model.NumberOfRecords
                });
 
            }
            return View(new GridModel());
        }

[Atanas Korchev]

Hello Gabe,

The Telerik grid is using jQuery.ajax to request the server data. As far as I know there is indeed a limit of simultaneous ajax requests which is per browser. This stackoverflow questions shows what those limit is for the different browser:

• FF 2: 2
• FF 3: 6
• IE 6/7: 2
• IE 8: 2 on dialup, 6 on broadband

So in older IE versions you can only get 2 simultaneous requests. The other should be queued internally by jQuery.

Having said that I am not really sure if we can suggest any solution apart from loading the grids one after the other.

On a side note I failed to reproduce the problem locally to see if the problem is caused by the grid and not by the IE limitations. Is there a chance to send us a runnable subset of your project so we can investigate that further?

Regards,
Atanas Korchev
the Telerik team

[Gabe]

How could I have the grids load up one after another using the Ajax Binding pattern?

[Atanas Korchev]

Hello Gabe,

 You need to subscribe to the OnDataBinding events of all grids and prevent it until the previous grid has been loaded. Once the previous grid is loaded (the OnDataBound event is raised) you can use the ajaxRequest method to initiate databinding for the current grid. Here is some sample code:

var grid1_bound = false;

function Grid1_onDataBound(e) {
     grid1_bound = true;
     $("#Grid2").data("tGrid").ajaxRequest(); // bind the second grid
}

function Grid2_onDataBinding(e) {
    if (!grid1_loaded) {
        e.preventDefault(); // stop the databinding
    }
}

var grid2_bound = false;

function Grid2_onDataBound(e) {
      grid2_bound = true;
      $("#Grid3").data("tGrid").ajaxRequest(); //bind the third grid once the second is bound
}

Regards,
Atanas Korchev
the Telerik team

[neal]

HI
I am really interested in this thread.

How do i check if a grid has been loaded?

i have 3 grids on my page, 2 of them should rebind after a row is selected on the other.

only one is rebinding (the first one on the page) so i think i need to check if that has rebound before rebinding the second

Thanks