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

Changing grid width when a column width changes

1 Answer 718 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Jack
Top achievements
Rank 1
Jack asked on 09 Apr 2019, 04:48 AM

I have a radgrid with 2 columns at 400px each. I have set the width of the grid to 600px and AllowScroll=true. I also have AllowColumnResize=true, when i resize column 1 to 500px by dragging, it will automatically resize column 2 down to 300px, maintaining the original overall width of a combined 800px for the 2 columns. Is there anyway to maintain the size of column 2 when column 1 is resized such that column 1 is the new resized 500px and column 2 stays at 400px, increasing the overall combined size to 900px? I looked at ReizeGridOnColumnResize=true but that causes my grid width of 600px and allowscroll to be ignored and the width of the grid is displayed as the full 900px causing the rest of my page layout to be stretched.

                               <telerik:RadGrid ID="RadGrid1" runat="server"
                                ClientSettings-Scrolling-AllowScroll="true"                                     
                                OnNeedDataSource="RadGrid_NeedDataSource"
                                height="200"
                                Width="600">
                              <ClientSettings>
                                <Resizing AllowColumnResize="True" ResizeGridOnColumnResize="false" />
                              </ClientSettings>
                                <MasterTableView AutoGenerateColumns="false" >
                                    <Columns>                                        
                                        <telerik:GridTemplateColumn HeaderStyle-Width="400" HeaderText="1">
                                        </telerik:GridTemplateColumn>
                                        <telerik:GridTemplateColumn HeaderStyle-Width="400" HeaderText="2">
                                        </telerik:GridTemplateColumn>                                        
                                    </Columns>
                                </MasterTableView>
                            </telerik:RadGrid>

1 Answer, 1 is accepted

Sort by
0
Accepted
Eyup
Telerik team
answered on 11 Apr 2019, 01:42 PM
Hi Jack,

Yes, you can achieve this requirement using the following steps:

1. Remove the Width property of the grid.

2. Enable this property:
<Resizing ... ResizeGridOnColumnResize="true" />

3. Add the following CSS rule:
<style>
    div.RadGrid {
        max-width: 600px;
    }
</style>

I hope this will prove helpful.

Regards,
Eyup
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
Grid
Asked by
Jack
Top achievements
Rank 1
Answers by
Eyup
Telerik team
Share this question
or