This is a migrated thread and some comments may be shown as answers.

[Solved] Header and data columns not in sync.

1 Answer 27 Views

Grid

This is a migrated thread and some comments may be shown as answers.

This question is locked. New answers and comments are not allowed.

Nijanand asked on 21 Feb 2012, 10:22 PM

Hi,

I have a grid with grouping where the grouped header uses a template and also uses master detail for each row in the grid. When i enable sorting on the grid, the headers and data columns are not in sync.

<% Html.Telerik().ManageGrid(Model, "ApplicantsGrid", Controllers.ManageApplications.MainGridAjaxBinding())

.Columns(columns =>

{

columns.Bound(a => a.Requisition).Hidden().ClientGroupHeaderTemplate("<span data-bind=\"template: { name: 'req-grouping-template' }\"><input type='hidden' class='grouping-template' value='<#= Key #>' /></span>");

columns.MultiSelect(24);

columns.IconColumn(x => x.ApplicationType).Title(" ").Sortable(false).Filterable(false);

columns.ClassedColumn(x => x.Name, "name-column").ClientTemplate(Html.DetailPageActionLink("<#= ApplicationSummary.ApplicationID #>", "<#= Name #>", Controllers.Common.ActionNames.SetDetailPage, Url.Action(Controllers.Manage.ActionNames.ApplicationDetail, Controllers.Manage.Name)).ToHtmlString()).Title("Name");

columns.ClassedColumn(x => x.ApplicationSummary.ApplicationDate, "date-column").Format("{0:MM/dd/yy}").Title("Apply<br />Date");

columns.ClassedColumn(x => x.ApplicationSummary.CurrentStatus, "status-column").Title("Status");

columns.ClassedColumn(x => x.ApplicationSummary.StatusDate, "date-column").Format("{0:MM/dd/yy}").Title("Status<br />Date");

columns.ClassedColumn(x => x.ApplicationSummary.Education, "compare-column").Title("Edu");

columns.ClassedColumn(x => x.ApplicationSummary.Experience, "compare-column").Title("Exp");

columns.ClassedColumn(x => x.ApplicationSummary.Score, "score-column").Title("App").Filterable(false).ClientTemplate("<a href='#'><#=Score #></a>");

columns.ClassedColumn(x => x.ApplicationSummary.HRScore, "score-column").Title("HR").Filterable(false).ClientTemplate("<a href='#'><#=HRScore #></a>");

columns.ClassedColumn(x => x.ApplicationSummary.TScore, "score-column").Title("TS").Filterable(false).ClientTemplate("<a href='#'><#=TScore#></a>");

columns.IconColumn(x => x.HRCommentsExist).IconTitle("comments").Filterable(false).Sortable(false);

columns.IconColumn(x => x.NotesExist).IconTitle("notes").Filterable(false).Sortable(false);

columns.IconColumn(x => x.Assessment).Title("A").Filterable(false).Sortable(false);

columns.IconColumn(x => x.Background).Title("B").Filterable(false).Sortable(false);

columns.IconColumn(x => x.Reference).Title("R").Filterable(false).Sortable(false);

columns.ClassedColumn(x => x.ApplicationSummary.ApplicationID, "hidden").Width(0);

})

.Sortable(sorting => sorting.Enabled(true).OrderBy(sortOrder => sortOrder.Add(o => o.Requisition).Ascending()).SortMode(GridSortMode.SingleColumn))

.ClientEvents(events => events.OnDataBound("AfterDataBound").OnDetailViewExpand("OnDetailExpand"))

.Groupable(g => g.Enabled(true).Groups(gr => gr.Add(a => a.Requisition)).Visible(false))

.Filterable(f => f.Enabled(true))

.DetailView(dv => dv.ClientTemplate(" ")) // No content is necessary, but the client template cannot be null, empty or white space

.Render();

%>

Helper methods :

public static GridBoundColumnBuilder<T> IconColumn<T, TValue>(this GridColumnFactory<T> gridColumnBuilderBase, Expression<Func<T, TValue>> expression)

where T : class

{

var columnName = ExpressionHelper.GetExpressionText(expression);

return gridColumnBuilderBase.ClassedColumn(expression, "icon-column").ClientTemplate(gridIcon(string.Format("<#= {0} #>", columnName)));

}

public static GridBoundColumnBuilder<T> ClassedColumn<T, TValue>(this GridColumnFactory<T> gridColumnBuilderBase, Expression<Func<T, TValue>> expression, params string[] classNames)

where T : class

{

var classAttribute = string.Join(" ", classNames);

return gridColumnBuilderBase.Bound(expression).HeaderHtmlAttributes(new { @class = classAttribute }).HtmlAttributes(new { @class = classAttribute });

}

public static GridBuilder<T> ManageGrid<T>(this ViewComponentFactory componentFactory, GridViewModel<T> gridModel, string name,

ActionResult ajaxBinding,

IDictionary<string, object> htmlAttributes = null)

where T : class, IClassInfoBinder, new()

{

htmlAttributes = htmlAttributes ?? new Dictionary<string, object>();

string previousClasses = string.Empty;

object classValues;

if (htmlAttributes.TryGetValue("class", out classValues))

{

previousClasses = classValues.ToString();

}

htmlAttributes["class"] = "manage-grid " + previousClasses;

return componentFactory.Grid<T>()

.Name(name)

.HtmlAttributes(htmlAttributes)

.DataBinding(dataBinding => dataBinding.Ajax().Select(ajaxBinding.GetRouteValueDictionary()))

.Pageable(pager =>

pager.PageSize(gridModel.PageSize,

gridModel.PageSizeSelections)

.PageTo(gridModel.CurrentPage)

.Position(GridPagerPosition.Bottom)

.Style(GridPagerStyles.NextPreviousAndInput | GridPagerStyles.PageSizeDropDown)

.Total(gridModel.TotalResults))

.ClientEvents(events =>

{

events.OnLoad("OnGridLoaded");

events.OnError("ErrorHandler");

events.OnDataBinding("OnManageGridDataBinding");

events.OnDataBound("OnManageGridDataBound");

})

.NoRecordsTemplate(NoRecordsFoundMessage);

}

The headers and data columns remain in sync when the grid is not scrollable, but when i make the grid scrollable, the headers and data columns do not line up.

Any ideas/workaround to this problem?

Thanks
Nij

[Solved] Header and data columns not in sync.

1 Answer, 1 is accepted