[Solved] Bug: Resize Bars are getting lost when Ajax binding effectively changes the column header sizes

[Joseph Bulger]

I have a grid structured like this:

<%= Html.Telerik().Grid(Model)
        .Name("Grid")
        .PrefixUrlParameters(false)
        .ToolBar(commands =>
                     {
                         commands
                             .Custom()
                             .HtmlAttributes(new {id = "exportcsv"})
                             .Text("Export to CSV")
                             .Action("ExportCsv", "Report");
                         commands.Custom()
                             .HtmlAttributes(new { id = "exportexcel" })
                             .Text("Export to Excel")
                             .Action("ExportExcel", "Report");
                     })
        .Columns(columns =>
        {
            columns.Bound(p => p.GroupField1).Title("");
            columns.Bound(p => p.Submissions);
            columns.Bound(p => p.ReviewRounds);
            columns.Bound(p => p.ConceptReviewRounds);
            columns.Bound(p => p.PreProductionReviewRounds);
            columns.Bound(p => p.FinalReviewRounds);
            columns.Bound(p => p.Rework).Format("{0:P}");
        })
        .EnableCustomBinding(true)
        .Resizable(x => x.Columns(true))
        .Pageable(paging => paging.Total((int)(ViewData["total"] ?? 0)).PageSize(25).Position(GridPagerPosition.Both))
        .Footer(true)
        .DataBinding(dataBinding => dataBinding.Ajax().Select("_Render", "Report"))
%>
 
<% Html.Telerik().ScriptRegistrar(); %>

and when the grid first shows up (with no data because the Ajax call hasn't completed yet) I can resize the columns while waiting for the data to come through.

However, once the data comes through the column headers are changed and the resize "bars" get lost because the column headers change. The "bars" I'm referring to are the divs with class t-resize-handle.

Is there a way to tell the grid resizing component to reinitialize itself or something once the ajax request finishes?

The only other thing of note is that I am issuing the ajax request myself manually by calling $("#Grid").ajaxRequest();

Oh, one other thing, I had to override the following css style so my headers would wrap the column names as I need them to.

.t-grid-header .t-header, .t-grid-header .t-last-header 
{
    white-space:normal !important;
}

Regards,

Joseph

[Atanas Korchev]

Hi Joseph Bulger,

 I reproduced the bug locally. Fortunately it was an easy fix. I am sending you a hotfix build which you can use.

 I have also updated your Telerik points.

All the best,
Atanas Korchev
the Telerik team

[Russell]

I applied this hotfix, and now I am experiencing problems.

The resizing works only once. After that, the cursor changes but the columns won't resize.

After trying to resize a couple of times, I get this error: 

"Out of memory at line: 97"

Any suggestions?

Edit: I've done both the manual and the automatic updates to the source. Neither works properly. The resizing works once in IE 8 and Chrome 8, but not at all in Firefox 3.6.

The error message is happening in IE 8

[Russell]

I fixed the problem by going back a version of Telerik and changing from client side binding to server side binding.