Problem Resizing Detail Table Columns

4 posts, 0 answers
  1. Tony
    Tony avatar
    10 posts
    Member since:
    Apr 2011

    Posted 21 Jun 2011 Link to this post

    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">
    <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;
        }
    }
  2. marko
    marko avatar
    20 posts
    Member since:
    Oct 2006

    Posted 23 Jun 2011 Link to this post

    Hi Tony,

    I've also been having this problem, have you managed to come across a solution yet?
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Tony
    Tony avatar
    10 posts
    Member since:
    Apr 2011

    Posted 23 Jun 2011 Link to this post

    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%";
           }

  5. marko
    marko avatar
    20 posts
    Member since:
    Oct 2006

    Posted 24 Jun 2011 Link to this post

    Hi Tony,

    Exactly what I needed. Thanks
Back to Top