RadGrid ExpandCollapseColumn-HeaderStyle-Width Not Working

[William]

Thanks in advance for any assistance.

I have a radgrid that I am trying to change the ExpandCollapseColumn-HeaderStyle-Width. I am using the Office2007 skin and have tried to override the style in different places without any luck. I have tried the .aspx in the grid, mastertableview and ExpandCollapseColumn definitions. I have also tried to set the width in the prerender and columncreated events as suggested in some posts. I went even further to try many of the other events to determine if something was just out of sequence and setting the value back.  I have tried setting the widths to various sizes (10, 10px, 50, 50px) to see if there was some minimum width constraints that I was unaware of. None of these seemed to work.

Lastly, I debugged through the code to see that in fact the value of the ExpandCollapseColumn-HeaderStyle-Width property was in fact the value that I set it to, no matter the location that I set it. However, the rendered ExpandCollapseColumn continues to be at the default width. so now I lean on the support of fellow telerik users and employees to help determine the issue. I'm sure it is an easy one, but one that has been plaguing me for much too long. Please see the ASPX code below.

Thanks,

Bill

 

<asp:PlaceHolder ID="plcBudgetViewROS" runat="server" Visible="false">

<telerik:RadGrid runat="server" ID="RadGridROSView" GridLines="none"

ShowFooter="False"
AutoGenerateColumns="false"
AllowAutomaticInserts="true"
ShowStatusBar="true"
AllowAutomaticUpdates="True"
DataSourceID="odsBudgetROS"
AllowFilteringByColumn="False"
AllowSorting="True"
AllowMultiRowSelection="True"
ShowGroupPanel="false"
AllowPaging="false"
Skin="Office2007">
<MasterTableView ShowGroupFooter="false" DataKeyNames="CategoryID, BudgetItemID" AllowMultiColumnSorting="true" CellPadding="0" CellSpacing="1">

<GroupByExpressions>

    <telerik:GridGroupByExpression>

        <SelectFields>

            <telerik:GridGroupByField FieldAlias="Date" FieldName="DayLabel" HeaderValueSeparator=": "></telerik:GridGroupByField>
        </SelectFields>
        <GroupByFields>
                  <telerik:GridGroupByField FieldName="DayDate" HeaderText="Day" SortOrder="Ascending"></telerik:GridGroupByField>

        </GroupByFields>
      </telerik:GridGroupByExpression>
    <telerik:GridGroupByExpression>
          <SelectFields>
              <telerik:GridGroupByField FieldAlias="Label" FieldName="LabelName" HeaderValueSeparator=": "></telerik:GridGroupByField>
          </SelectFields>
          <GroupByFields>
              <telerik:GridGroupByField FieldName="LabelOrder" HeaderText="Label" SortOrder="Ascending"></telerik:GridGroupByField>
          </GroupByFields>
      </telerik:GridGroupByExpression>
 </GroupByExpressions>

 <RowIndicatorColumn HeaderStyle-Width="10" ItemStyle-Width="10" />
 <ExpandCollapseColumn HeaderStyle-Width="10" ItemStyle-Width="10" />
<Columns>

    <telerik:GridButtonColumn UniqueName="DeleteCommandColumn" ConfirmText="Are you sure that you would like to delete this item?" ConfirmTitle="Delete" CommandName="Delete" ButtonType="ImageButton" ImageUrl="/SMS/Images/delete.gif" ItemStyle-Width="15" >
      </telerik:GridButtonColumn>
      <telerik:GridEditCommandColumn ButtonType="ImageButton" UniqueName="EditCommandColumn" EditImageUrl="/SMS/Images/edit.gif" ItemStyle-Width="15" >
      </telerik:GridEditCommandColumn>
      <telerik:GridBoundColumn DataField="ItemDescription" HeaderText="Description" UniqueName="ItemDescription" ReadOnly="True" SortExpression="ItemDescription">
      </telerik:GridBoundColumn>
      <telerik:GridBoundColumn DataField="Category" HeaderText="Category" UniqueName="CategoryName" ReadOnly="True" SortExpression="Category" />
      <telerik:GridTemplateColumn UniqueName="Budget" SortExpression="WorkingBudgetAmount" DataField="WorkingBudgetAmount" HeaderStyle-HorizontalAlign="Center" HeaderStyle-Width="150px" ItemStyle-HorizontalAlign="Right" ItemStyle-Width="150px">
          <ItemTemplate>
              <asp:TextBox runat="server" ID="txtWorkingBudget" Width="100px" CssClass="bodyInput"></asp:TextBox>
          <asp:PlaceHolder runat="server" ID="plcWorkingBudgetDetails" Visible="false"></asp:PlaceHolder>
          </ItemTemplate>
      </telerik:GridTemplateColumn>
 </Columns>

<EditFormSettings UserControlName="/SMS/include/EditBudgetItem.ascx" EditFormType="WebUserControl">

<EditColumn UniqueName="EditBudgetItemColumn">

</EditColumn>

</EditFormSettings>

</MasterTableView>

<ClientSettings AllowDragToGroup="False" AllowColumnsReorder="False">

    <Resizing AllowColumnResize="False" />

    <Selecting AllowRowSelect="True"></Selecting>

    <ClientEvents OnRowDblClick="RowDblClick" />

</ClientSettings>

<GroupingSettings ShowUnGroupButton="False" />

</telerik:RadGrid><!-- content end -->


</asp:PlaceHolder>

[Dimo]

Hi William,

Due to lifecycle specifics, you need to set the ExpandColumn's width like this:

<telerik:RadGrid  MasterTableView-ExpandCollapseColumn-HeaderStyle-Width="100px">
.........
</telerik:RadGrid>

Alternatively, you should use the ColumnCreated event.

http://www.telerik.com/help/aspnet-ajax/grdusingcolumns.html

Kind regards,
Dimo
the Telerik team

[William]

That answer did not seem to work, but your link sent me in a different direction that has at least a sense of where the problem may be. After trying your suggestion, which I had tried before, I tried other column types. I found from your link that event though a column with the type ExpandCollapseColumn was being rendered during the lifecycle, their is a different column type,  GridSplitterColumn, when grouping is enabled. After trying to play around with this setting, I quickly realized that it doesn't seem to exist.

I then moved on to the GroupHeaderItemStyle settings. Here, I was able to change the width, however, I am trying to set the width of the column (with the arrow that points right or down) to 10px. I cannot get the width to anything small than 20px.

WORKS:

MasterTableView-GroupHeaderItemStyle-Width="100px"

DOES NOT WORK: 

MasterTableView-GroupHeaderItemStyle-Width="10px"

 

Is there something I'm missing? Is there some constraint in the skin or a setting that needs to be overridden?

Thanks,

Bill

[Dimo]

Hi William,

The suggested approach works and the demo below shows it.

As for decreasing the expand column's width below 20px - you need to first remove the cells' side paddings and decrease the width of the expand/collapse buttons inside.

<%@ Page Language="C#" %>
<%@ Import Namespace="System.Data" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

<script runat="server">

    protected void RadGrid_NeedDataSource(object sender, GridNeedDataSourceEventArgs e)
    {
        DataTable dt = new DataTable();
        DataRow dr;
        int colsNum = 3;
        int rowsNum = 3;
        string colName = "Column";

        for (int j = 1; j <= colsNum; j++)
        {
            dt.Columns.Add(String.Format("{0}{1}", colName, j));
        }

        for (int i = 1; i <= rowsNum; i++)
        {
            dr = dt.NewRow();

            for (int k = 1; k <= colsNum; k++)
            {
                dr[String.Format("{0}{1}", colName, k)] = String.Format("{0}{1} Row{2}", colName, k, i);
            }
            dt.Rows.Add(dr);
        }

        (sender as RadGrid).DataSource = dt;
    }

</script>

<!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">
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>RadControls</title>
<style type="text/css">

.MyExpandCol .rgExpandCol
{
    padding-left:0 !important;
    padding-right:0 !important;
}

div.MyExpandCol .rgExpand,
div.MyExpandCol .rgCollapse
{
    width:11px;
}

div.MyExpandCol .rgExpand
{
    background-position:1px -498px;
}

div.MyExpandCol .rgCollapse
{
    background-position:0 -446px;
}

</style>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />

<telerik:RadGrid
    ID="RadGrid1"
    runat="server"
    Width="800px"
    MasterTableView-ExpandCollapseColumn-HeaderStyle-Width="100px"
    OnNeedDataSource="RadGrid_NeedDataSource">
    <MasterTableView>
        <DetailTables>
            <telerik:GridTableView Width="100%" />
        </DetailTables>
    </MasterTableView>
</telerik:RadGrid>

<br /><br />

<telerik:RadGrid
    ID="RadGrid2"
    runat="server"
    Width="800px"
    MasterTableView-ExpandCollapseColumn-HeaderStyle-Width="200px"
    OnNeedDataSource="RadGrid_NeedDataSource">
    <MasterTableView>
        <DetailTables>
            <telerik:GridTableView Width="100%" />
        </DetailTables>
    </MasterTableView>
</telerik:RadGrid>

<br /><br />

<telerik:RadGrid
    ID="RadGrid3"
    runat="server"
    Width="800px"
    CssClass="MyExpandCol"
    MasterTableView-ExpandCollapseColumn-HeaderStyle-Width="1px"
    OnNeedDataSource="RadGrid_NeedDataSource">
    <MasterTableView HierarchyLoadMode="Client">
        <DetailTables>
            <telerik:GridTableView Width="100%" />
        </DetailTables>
    </MasterTableView>
</telerik:RadGrid>

</form>
</body>
</html>

Kind regards,
Dimo
the Telerik team

[William]

I plugged your code in and everything worked as you suggested, but then I updated your grid to behave closer to my example and this is were I have the problem:

<telerik:RadGrid

    ID="RadGrid1"

    runat="server" GridLines="none" 

    ShowFooter="False" 

    AllowAutomaticInserts="true"

    ShowStatusBar="true" 

    AllowAutomaticUpdates="True" 

    AllowFilteringByColumn="False" 

    AllowSorting="True"

    AllowMultiRowSelection="True" 

    ShowGroupPanel="false" 

    AllowPaging="false" 

    width="715"

    CssClass="MyExpandCol"

    MasterTableView-GroupHeaderItemStyle-Width="1px" 

    MasterTableView-ExpandCollapseColumn-HeaderStyle-Width="1px"

    Skin="Office2007"

    OnNeedDataSource="RadGrid_NeedDataSource">

    <MasterTableView HierarchyLoadMode="Client">

    <GroupByExpressions>

        <telerik:GridGroupByExpression>

            <SelectFields>

                <telerik:GridGroupByField FieldAlias="Column1" FieldName="Column1" HeaderValueSeparator=": "></telerik:GridGroupByField>

            </SelectFields>

            <GroupByFields>

                <telerik:GridGroupByField FieldName="Column1" HeaderText="Column1"></telerik:GridGroupByField>

            </GroupByFields>

        </telerik:GridGroupByExpression>

        <telerik:GridGroupByExpression>

            <SelectFields>

                <telerik:GridGroupByField FieldAlias="Column2" FieldName="Column2" HeaderValueSeparator=": "></telerik:GridGroupByField>

            </SelectFields>

            <GroupByFields>

                <telerik:GridGroupByField FieldName="Column2" HeaderText="Column2"></telerik:GridGroupByField>

            </GroupByFields>

        </telerik:GridGroupByExpression>

    </GroupByExpressions>

      

        <DetailTables>

            <telerik:GridTableView Width="100%"/>

        </DetailTables>

    </MasterTableView>

</telerik:RadGrid>

<br/><br/>

<telerik:RadGrid
    ID="RadGrid2"
    runat="server" GridLines="none"
    ShowFooter="False"
    AllowAutomaticInserts="true"
    ShowStatusBar="true"
    AllowAutomaticUpdates="True"
    AllowFilteringByColumn="False"
    AllowSorting="True"
    AllowMultiRowSelection="True"
    ShowGroupPanel="false"
    AllowPaging="false"
    width="715"
    CssClass="MyExpandCol"
    MasterTableView-GroupHeaderItemStyle-Width="50px"
    MasterTableView-ExpandCollapseColumn-HeaderStyle-Width="1px"
    Skin="Office2007"
    OnNeedDataSource="RadGrid_NeedDataSource">
    <MasterTableView HierarchyLoadMode="Client">
    <GroupByExpressions>
        <telerik:GridGroupByExpression>
            <SelectFields>
                <telerik:GridGroupByField FieldAlias="Column1" FieldName="Column1" HeaderValueSeparator=": "></telerik:GridGroupByField>
            </SelectFields>
            <GroupByFields>
                <telerik:GridGroupByField FieldName="Column1" HeaderText="Column1"></telerik:GridGroupByField>
            </GroupByFields>
        </telerik:GridGroupByExpression>
        <telerik:GridGroupByExpression>
            <SelectFields>
                <telerik:GridGroupByField FieldAlias="Column2" FieldName="Column2" HeaderValueSeparator=": "></telerik:GridGroupByField>
            </SelectFields>
            <GroupByFields>
                <telerik:GridGroupByField FieldName="Column2" HeaderText="Column2"></telerik:GridGroupByField>
            </GroupByFields>
        </telerik:GridGroupByExpression>
    </GroupByExpressions>

        <DetailTables>
            <telerik:GridTableView Width="100%"/>
        </DetailTables>
    </MasterTableView>
</telerik:RadGrid>

As you can see, the expand column is a smaller width as you suggested it would be, however the GroupHeaderItemStyle Width is not. My guess is that I need to do something similar to override this properties style. I have not been able to find that information.

So it would be nice if you could post an example that makes the GroupHeaderItemStyle width = 10px or so, as I cannot see to get it lower than 20px.

Thanks,

Bill

[Dimo]

Hello William,

For the group splitter column, please use ColumnCreated.

<%@ Page Language="C#" %>
<%@ Import Namespace="System.Data" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

<script runat="server">

    protected void RadGrid_NeedDataSource(object sender, GridNeedDataSourceEventArgs e)
    {
        DataTable dt = new DataTable();
        DataRow dr;
        int colsNum = 3;
        int rowsNum = 3;
        string colName = "Column";

        for (int j = 1; j <= colsNum; j++)
        {
            dt.Columns.Add(String.Format("{0}{1}", colName, j));
        }

        for (int i = 1; i <= rowsNum; i++)
        {
            dr = dt.NewRow();

            for (int k = 1; k <= colsNum; k++)
            {
                dr[String.Format("{0}{1}", colName, k)] = String.Format("{0}{1} Row{2}", colName, k, i);
            }
            dt.Rows.Add(dr);
        }

        (sender as RadGrid).DataSource = dt;
    }

    protected void RadGrid1_ColumnCreated(object sender, GridColumnCreatedEventArgs e)
    {
        if (e.Column is GridGroupSplitterColumn)
        {
            e.Column.HeaderStyle.Width = Unit.Pixel(100);
        }
    }

    protected void RadGrid2_ColumnCreated(object sender, GridColumnCreatedEventArgs e)
    {
        if (e.Column is GridGroupSplitterColumn)
        {
            e.Column.HeaderStyle.Width = Unit.Pixel(200);
        }
    }

    protected void RadGrid3_ColumnCreated(object sender, GridColumnCreatedEventArgs e)
    {
        if (e.Column is GridGroupSplitterColumn)
        {
            e.Column.HeaderStyle.Width = Unit.Pixel(10);
        }
    }

</script>

<!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">
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>RadControls</title>
<style type="text/css">

.MyExpandCol .rgExpandCol,
.MyExpandCol .rgGroupCol
{
    padding-left:0 !important;
    padding-right:0 !important;
}

div.MyExpandCol .rgExpand,
div.MyExpandCol .rgCollapse
{
    width:11px;
}

div.MyExpandCol .rgExpand
{
    background-position:1px -498px;
}

div.MyExpandCol .rgCollapse
{
    background-position:0 -446px;
}

</style>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />

<telerik:RadGrid
    ID="RadGrid1"
    runat="server"
    Width="800px"
    GroupingEnabled="true"
    ShowGroupPanel="true"
    MasterTableView-ExpandCollapseColumn-HeaderStyle-Width="100px"
    OnColumnCreated="RadGrid1_ColumnCreated"
    OnNeedDataSource="RadGrid_NeedDataSource">
    <MasterTableView>
        <GroupByExpressions>
            <telerik:GridGroupByExpression>
                <GroupByFields>
                    <telerik:GridGroupByField FieldName="Column1" />
                </GroupByFields>
                <SelectFields>
                    <telerik:GridGroupByField FieldName="Column1" />
                </SelectFields>
            </telerik:GridGroupByExpression>
        </GroupByExpressions>
        <DetailTables>
            <telerik:GridTableView Width="100%" />
        </DetailTables>
    </MasterTableView>
</telerik:RadGrid>

<br /><br />

<telerik:RadGrid
    ID="RadGrid2"
    runat="server"
    Width="800px"
    GroupingEnabled="true"
    ShowGroupPanel="true"
    MasterTableView-ExpandCollapseColumn-HeaderStyle-Width="200px"
    OnColumnCreated="RadGrid2_ColumnCreated"
    OnNeedDataSource="RadGrid_NeedDataSource">
    <MasterTableView>
        <GroupByExpressions>
            <telerik:GridGroupByExpression>
                <GroupByFields>
                    <telerik:GridGroupByField FieldName="Column1" />
                </GroupByFields>
                <SelectFields>
                    <telerik:GridGroupByField FieldName="Column1" />
                </SelectFields>
            </telerik:GridGroupByExpression>
        </GroupByExpressions>
        <DetailTables>
            <telerik:GridTableView Width="100%" />
        </DetailTables>
    </MasterTableView>
</telerik:RadGrid>

<br /><br />

<telerik:RadGrid
    ID="RadGrid3"
    runat="server"
    Width="800px"
    CssClass="MyExpandCol"
    GroupingEnabled="true"
    ShowGroupPanel="true"
    MasterTableView-ExpandCollapseColumn-HeaderStyle-Width="10px"
    OnColumnCreated="RadGrid3_ColumnCreated"
    OnNeedDataSource="RadGrid_NeedDataSource">
    <MasterTableView HierarchyLoadMode="Client">
        <GroupByExpressions>
            <telerik:GridGroupByExpression>
                <GroupByFields>
                    <telerik:GridGroupByField FieldName="Column1" />
                </GroupByFields>
                <SelectFields>
                    <telerik:GridGroupByField FieldName="Column1" />
                </SelectFields>
            </telerik:GridGroupByExpression>
        </GroupByExpressions>
        <DetailTables>
            <telerik:GridTableView Width="100%" />
        </DetailTables>
    </MasterTableView>
</telerik:RadGrid>

</form>
</body>
</html>

Regards,
Dimo
the Telerik team

[Guss]

No, no, no..... all this long code -> just do it with CSS !
So I assumed you did all this:

.RadGrid_Bootstrap th.rgGroupCol, .RadGrid_Bootstrap td.rgGroupCol { padding-left: 0px !important; padding-right: 0px !important; }
.RadGrid_Bootstrap th.rgGroupCol button, .RadGrid_Bootstrap td.rgGroupCol button { padding: 0px !important }

 and still it does not want to go smaller. Does not matter what server side tricks you try.

Look carefully, just under the table.rgMasterTable, there is this:

<colgroup>
<col style="width:36px">
<col style="width:36px">
<col style="width:46px">
<col style="width:20%">
<col style="display:none;">
<col>
<col style="width:20%">
<col style="width:46px">
</colgroup>

Can you  now see why you do not get these column narrower than 36px (in my case above, I have two expressions / groups.

I created myself a style like this:

.RadGrid_Bootstrap.ColumnGroupWidth2323 colgroup col:first-child { width: 23px !important }
.RadGrid_Bootstrap.ColumnGroupWidth2323 colgroup col:nth-child(2) { width: 23px !important }

And I added to my Grid a Css = "ColumnGroupWidth2323"

That's all, no need to try and beat Elon to mars :-) (I also tried that :-) )

[Guss]

I have chosen 23px cause the two groups, then give me 23*2  46px, and this is exactly the width of my edit command column... I like lines to be collinear, inline with each other.

[Dimo]

Hello Guss,

It's always curious to see a 10-year long thread be resurrected :) I appreciate your comment.

Your approach is surely valid. Just keep in mind that the col selectors can produce undesired side effects if you allow the users to ungroup the Grid, or if you can have grouping by different numbers of columns at any time. In such cases ColumnCreated will be the more safe and simple technique.

Regards,
Dimo
Progress Telerik