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

Problem Resizing Detail Table Columns

3 Answers 225 Views

Grid

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

Tony asked on 21 Jun 2011, 09:50 PM

Hello,

I've been struggling with this problem for many hours now. Basically I'm interested in finding out how to have resizable detail table columns which don't mess up the grid size and scrolling when you resize them.

I've attached a small demo that shows the problem. If you expand a detail record and then resize a column in it, the grid basically loses scrolling and resizes itself. I have not enabled resize grid on column resize.

Help would be very much appreciated! If there is a demo out there somewhere that shows resizable columns in a hierarchy that would be helpful as well. I cannot find any demo on the Telerik site which shows hierarchy and resizable columns at the same time!

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title></title>

<telerik:RadStyleSheetManager ID="RadStyleSheetManager1" runat="server" />

</head>

<body>

<form id="form1" runat="server">

<telerik:RadScriptManager ID="RadScriptManager1" runat="server">

<Scripts>

<%--Needed for JavaScript IntelliSense in VS2010--%>

<%--For VS2008 replace RadScriptManager with ScriptManager--%>

<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />

<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />

<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />

</Scripts>

</telerik:RadScriptManager>

<script type="text/javascript">

//Put your JavaScript code here.

</script>

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">

</telerik:RadAjaxManager>

<telerik:RadGrid ID="RadGrid1" runat="server" AutoGenerateColumns="False" CellSpacing="0"

GridLines="None" OnDetailTableDataBind="RadGrid1_DetailTableDataBind" OnNeedDataSource="RadGrid1_NeedDataSource"

Skin="Vista" Width="800px">

<ClientSettings>

<Scrolling AllowScroll="True" UseStaticHeaders="True" />

<Resizing AllowColumnResize="True" />

</ClientSettings>

<MasterTableView>

<DetailTables>

<telerik:GridTableView runat="server">

<CommandItemSettings ExportToPdfText="Export to PDF" />

<RowIndicatorColumn FilterControlAltText="Filter RowIndicator column">

<HeaderStyle Width="20px" />

</RowIndicatorColumn>

<ExpandCollapseColumn FilterControlAltText="Filter ExpandColumn column">

<HeaderStyle Width="20px" />

</ExpandCollapseColumn>

<Columns>

<telerik:GridBoundColumn FilterControlAltText="Filter column column" HeaderText="DetailCol0"

UniqueName="column">

<HeaderStyle Width="300px" />

</telerik:GridBoundColumn>

<telerik:GridBoundColumn FilterControlAltText="Filter column1 column" HeaderText="DetailCol1"

UniqueName="column1">

<HeaderStyle Width="300px" />

</telerik:GridBoundColumn>

<telerik:GridBoundColumn FilterControlAltText="Filter column2 column" HeaderText="DetailCol2"

UniqueName="column2">

<HeaderStyle Width="300px" />

</telerik:GridBoundColumn>

<telerik:GridBoundColumn FilterControlAltText="Filter column3 column" HeaderText="DetailCol3"

UniqueName="column3">

<HeaderStyle Width="300px" />

</telerik:GridBoundColumn>

</Columns>

<EditFormSettings>

<EditColumn FilterControlAltText="Filter EditCommandColumn column">

</EditColumn>

</EditFormSettings>

</telerik:GridTableView>

</DetailTables>

<CommandItemSettings ExportToPdfText="Export to PDF"></CommandItemSettings>

<RowIndicatorColumn FilterControlAltText="Filter RowIndicator column">

<HeaderStyle Width="20px"></HeaderStyle>

</RowIndicatorColumn>

<ExpandCollapseColumn FilterControlAltText="Filter ExpandColumn column" Visible="True">

<HeaderStyle Width="20px"></HeaderStyle>

</ExpandCollapseColumn>

<Columns>

<telerik:GridBoundColumn FilterControlAltText="Filter column column" HeaderText="MasterCol0"

UniqueName="column">

<HeaderStyle Width="300px" />

</telerik:GridBoundColumn>

<telerik:GridBoundColumn FilterControlAltText="Filter column1 column" HeaderText="MasterCol1"

UniqueName="column1">

<HeaderStyle Width="300px" />

</telerik:GridBoundColumn>

<telerik:GridBoundColumn FilterControlAltText="Filter column2 column" HeaderText="MasterCol2"

UniqueName="column2">

<HeaderStyle Width="300px" />

</telerik:GridBoundColumn>

</Columns>

<EditFormSettings>

<EditColumn FilterControlAltText="Filter EditCommandColumn column">

</EditColumn>

</EditFormSettings>

</MasterTableView>

<FilterMenu EnableImageSprites="False">

</FilterMenu>

<HeaderContextMenu CssClass="GridContextMenu GridContextMenu_Default">

</HeaderContextMenu>

</telerik:RadGrid>

</form>

</body>

</html>

public partial class Default : System.Web.UI.Page

{

protected void RadGrid1_NeedDataSource(object sender, GridNeedDataSourceEventArgs e)

{

List<string> theList = new List<string> { "a", "b", "c" };

RadGrid1.DataSource = theList;

}

protected void RadGrid1_DetailTableDataBind(object sender, GridDetailTableDataBindEventArgs e)

{

List<string> theList2 = new List<string> { "d", "e", "f" };

e.DetailTableView.DataSource = theList2;

}

3 Answers, 1 is accepted

answered on 23 Jun 2011, 05:54 PM

Hello Marko,

Yes, I've actually solved my problem and have meant to post it here. In my particular case my goal was to align the columns in the detail view with those on the master view when the master columns are resized, but I believe the fix will apply to other scenarios. When I resized the columns, the grid lost its width style and just expanded to the sum of all column widths, thus losing the horizontal scroll bar.

The key was to make sure to reset the grid width back to what you want it in the client side OnColumnResized event. I wanted my grid to remain at 100% window width, so you can see the last line of the javascript function below does that.

function ColumnResized(sender, eventArgs) {

//if we've resized a column on the master view, sync column width in any open detail views

if (eventArgs.get_gridColumn().get_owner().get_name() == "TopLevelAccounts") {

var detailTables = sender.get_detailTables();

var cell = eventArgs.get_gridColumn().get_element();

var width = cell.offsetWidth;

var index = cell.cellIndex;

var compensatedIndex = index - 1; //accounts for expando-column and hidden column acctLvl on master view

for (var j = 0; j < detailTables.length; j++) {

// Set detail table column width

if (compensatedIndex == 0) { //the first column must be slightly smaller because of border/margin

detailTables[j].resizeColumn(compensatedIndex, width - 22);

}

else {

detailTables[j].resizeColumn(compensatedIndex, width);

}

sender.get_element().style.width = "100%";

}

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

Problem Resizing Detail Table Columns

3 Answers, 1 is accepted