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

column resizetofit

2 Answers 171 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Donna
Top achievements
Rank 1
Donna asked on 07 Nov 2017, 03:53 PM

How can I resize the column width to fit the size of footer where I have the running totals of each column?  Since the footer values are the biggest, I want my columns' width to be the size of the footer columns.

Also I noticed a lot of blank spaces on the right of the grid on IE, what kind of settings can I use to get rid of that blank space?

Currently I have this code which only resizes the columns to the grid content but not the footer on Internet Explorer.  It looks better on Chrome but on Chrome the columns are still hiding the second digit after the decimal at the footer:
  function pageLoad()
                {
                    var grid = $find("grid");
                    var columns = grid.get_masterTableView().get_columns();

                    for (var i = 3; i < columns.length; i++)
                    {
                        columns[i].resizeToFit();
                    }
                }

Grid:

 

    <telerik:RadGrid Skin="WebBlue" ID="grid" GridLines="None" runat="server" RenderMode="Lightweight" ShowFooter="True" AutoGenerateColumns="false" ShowStatusBar="true" OnBatchEditCommand="grid_BatchEditCommand" OnItemUpdated="grid_ItemUpdated" OnEditCommand="grid_EditCommand" OnItemCommand="grid_ItemCommand" OnPreRender="grid_PreRender" OnItemDataBound="grid_ItemDataBound" Width="100%" >
                <ClientSettings AllowKeyboardNavigation="true" ClientEvents-OnKeyPress="KeyPressed">
                    <KeyboardNavigationSettings AllowSubmitOnEnter="false" />
                    <Selecting AllowRowSelect="True" />
                    <ClientEvents OnGridCreated="GridCreated" OnBatchEditClosed="batchEditClosed" OnBatchEditCellValueChanged="CellValueChanged" />
                    
                    <Resizing AllowColumnResize="true" ResizeGridOnColumnResize="false" AllowResizeToFit="true" />
                    <Scrolling AllowScroll="True" UseStaticHeaders="true" ScrollHeight="600px" />
                </ClientSettings>
                <MasterTableView Font-Names="Arial" Font-Size="small" HeaderStyle-Font-Size="Medium" HeaderStyle-ForeColor="Window" FooterStyle-Font-Bold="true" FooterStyle-BackColor="#ffcc99" FooterStyle-Font-Size="11" CommandItemDisplay="Top" AllowMultiColumnSorting="false" AllowNaturalSort="false" AllowPaging="false" AllowCustomPaging="false" EditMode="Batch">

                    <CommandItemSettings ShowSaveChangesButton="false" ShowAddNewRecordButton="false" ShowRefreshButton="false" ShowCancelChangesButton="false" ShowExportToCsvButton="false" ShowExportToWordButton="false" ShowExportToExcelButton="true" ExportToExcelImageUrl="Images/ExportToExcel.png" />
                    <BatchEditingSettings EditType="Cell" />
                    <Columns>
                        <telerik:GridBoundColumn DataField="RESOURCE" HeaderText="Resource Name / PO" FilterControlAltText="Filter RESOURCE column"  SortExpression="RESOURCE" ReadOnly="True" UniqueName="RESOURCE" HeaderStyle-Width="125px">
                            <ColumnValidationSettings>
                            </ColumnValidationSettings>
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn DataField="RESOURCE_ID" HeaderText="Cost Center / Vendor" FilterControlAltText="Filter RESOURCE_ID column" HeaderStyle-Width="250px" SortExpression="RESOURCE_ID" ReadOnly="True" UniqueName="RESOURCE_ID">
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn visible="false" DataField="LABOUR_TYPE" HeaderText="Type" FilterControlAltText="Filter LABOUR_TYPE column"  SortExpression="LABOUR_TYPE" UniqueName="LABOUR_TYPE" ReadOnly="True"  HeaderStyle-Width="80px">
                        </telerik:GridBoundColumn>
                        <telerik:GridNumericColumn Aggregate="Sum" FooterText=" " DataField="P1" DataType="System.Double" FilterControlAltText="Filter P1 column" HeaderStyle-Width="65px" HeaderText="P1" ReadOnly="True" SortExpression="P1" UniqueName="P1" NumericType="Currency" FooterAggregateFormatString="{0:C}">
                            <ColumnValidationSettings>
                            </ColumnValidationSettings>
                        </telerik:GridNumericColumn>
                        <telerik:GridNumericColumn Aggregate="Sum" FooterText=" " DataField="P2" DataType="System.Double" FilterControlAltText="Filter P2 column" HeaderStyle-Width="65px" HeaderText="P2" SortExpression="P2" UniqueName="P2" NumericType="Currency" FooterAggregateFormatString="{0:C}">
                            <ColumnValidationSettings>
                            </ColumnValidationSettings>
                        </telerik:GridNumericColumn>
                        <telerik:GridNumericColumn Aggregate="Sum" FooterText=" " DataField="P3" DataType="System.Double" FilterControlAltText="Filter P3 column" HeaderStyle-Width="65px" HeaderText="P3" SortExpression="P3" UniqueName="P3" NumericType="Currency" FooterAggregateFormatString="{0:C}">
                            <ColumnValidationSettings>
                                <ModelErrorMessage Text="" />
                            </ColumnValidationSettings>
                        </telerik:GridNumericColumn>
                        <telerik:GridNumericColumn Aggregate="Sum" FooterText=" " DataField="P4" DataType="System.Decimal" FilterControlAltText="Filter P4 column" HeaderStyle-Width="65px" HeaderText="P4" SortExpression="P4" UniqueName="P4" NumericType="Currency" FooterAggregateFormatString="{0:C}">
                            <ColumnValidationSettings>
                                <ModelErrorMessage Text="" />
                            </ColumnValidationSettings>
                        </telerik:GridNumericColumn>
                        <telerik:GridNumericColumn Aggregate="Sum" FooterText=" " DataField="P5" DataType="System.Decimal" FilterControlAltText="Filter P5 column" HeaderStyle-Width="65px" HeaderText="P5" SortExpression="P5" UniqueName="P5" NumericType="Currency" FooterAggregateFormatString="{0:C}">
                            <ColumnValidationSettings>
                                <ModelErrorMessage Text="" />
                            </ColumnValidationSettings>
                        </telerik:GridNumericColumn>
                        <telerik:GridNumericColumn Aggregate="Sum" FooterText=" " DataField="P6" DataType="System.Decimal" FilterControlAltText="Filter P6 column" HeaderStyle-Width="65px" HeaderText="P6" SortExpression="P6" UniqueName="P6" NumericType="Currency" FooterAggregateFormatString="{0:C}">
                            <ColumnValidationSettings>
                                <ModelErrorMessage Text="" />
                            </ColumnValidationSettings>
                        </telerik:GridNumericColumn>
                        <telerik:GridNumericColumn Aggregate="Sum" FooterText=" " DataField="P7" DataType="System.Decimal" FilterControlAltText="Filter P7 column" HeaderStyle-Width="65px" HeaderText="P7" SortExpression="P7" UniqueName="P7" NumericType="Currency" FooterAggregateFormatString="{0:C}">
                            <ColumnValidationSettings>
                                <ModelErrorMessage Text="" />
                            </ColumnValidationSettings>
                        </telerik:GridNumericColumn>
                        <telerik:GridNumericColumn Aggregate="Sum" FooterText=" " DataField="P8" DataType="System.Decimal" FilterControlAltText="Filter P8 column" HeaderStyle-Width="65px" HeaderText="P8" SortExpression="P8" UniqueName="P8" NumericType="Currency" FooterAggregateFormatString="{0:C}">
                            <ColumnValidationSettings>
                                <ModelErrorMessage Text="" />
                            </ColumnValidationSettings>
                        </telerik:GridNumericColumn>
                        <telerik:GridNumericColumn Aggregate="Sum" FooterText=" " DataField="P9" DataType="System.Decimal" FilterControlAltText="Filter P9 column" HeaderStyle-Width="65px" HeaderText="P9" SortExpression="P9" UniqueName="P9" NumericType="Currency" FooterAggregateFormatString="{0:C}">
                            <ColumnValidationSettings>
                                <ModelErrorMessage Text="" />
                            </ColumnValidationSettings>
                        </telerik:GridNumericColumn>
                        <telerik:GridNumericColumn Aggregate="Sum" FooterText=" " DataField="P10" DataType="System.Decimal" FilterControlAltText="Filter P10 column" HeaderStyle-Width="65px" HeaderText="P10" SortExpression="P10" UniqueName="P10" NumericType="Currency" FooterAggregateFormatString="{0:C}">
                            <ColumnValidationSettings>
                                <ModelErrorMessage Text="" />
                            </ColumnValidationSettings>
                        </telerik:GridNumericColumn>
                        <telerik:GridNumericColumn Aggregate="Sum" FooterText=" " DataField="P11" DataType="System.Decimal" FilterControlAltText="Filter P11 column" HeaderStyle-Width="65px" HeaderText="P11" SortExpression="P11" UniqueName="P11" NumericType="Currency" FooterAggregateFormatString="{0:C}">
                        </telerik:GridNumericColumn>
                        <telerik:GridNumericColumn Aggregate="Sum" FooterText=" " DataField="P12" DataType="System.Decimal" FilterControlAltText="Filter P12 column" HeaderStyle-Width="65px" HeaderText="P12" SortExpression="P12" UniqueName="P12" NumericType="Currency" FooterAggregateFormatString="{0:C}">
                        </telerik:GridNumericColumn>
                        <telerik:GridCalculatedColumn HeaderText="Total" HeaderStyle-Width="120px" UniqueName="TotalPrice" DataType="System.Decimal"
                            DataFields="P1,P2,P3,P4,P5,P6,P7,P8,P9,P10,P11,P12" Expression="{0}+{1}+{2}+{3}+{4}+{5}+{6}+{7}+{8}+{9}+{10}+{11}" FooterText=" "
                            Aggregate="Sum" DataFormatString="{0:$###,##0.00}">
                        </telerik:GridCalculatedColumn>
                    </Columns>
                </MasterTableView>

            </telerik:RadGrid>

2 Answers, 1 is accepted

Sort by
0
Attila Antal
Telerik team
answered on 10 Nov 2017, 12:25 PM
Hi Donna,

I've noticed that you had submitted a support ticket regarding the same issue. Since I've replied to that already, I would suggest to continue our conversation there. 
Once we have the solution, we will post it in this forum thread.

Kind Regards,
Attila Antal
Progress Telerik
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Attila Antal
Telerik team
answered on 24 Nov 2017, 03:32 PM
Hello,

Solution is to set the width of the Master Table using CSS.

.rgMasterTable {
    width: 100% !important;
}

Also, please ensure the ResizeGridOnColumnResize property of RadGrid is set to True.

Kind Regards,
Attila Antal
Progress Telerik
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
Grid
Asked by
Donna
Top achievements
Rank 1
Answers by
Attila Antal
Telerik team
Share this question
or