How to specify Prometheus RadGrid Column Width?

[Kia]

Hi,

I've tried everything I could dig up in every combination, but the Grid column widths just won't become static. I want to specify exact column size, but as it is, every grid and column shows up a different size depending on the data and it looks very bad.

This is the ASMX(I set the datasource via code):

    <telerik:RadGrid ID="rgrdOrders" runat="server" EnableEmbeddedSkins="False" ImagesPath="~\RadControls\Skins\GluckVision\Grid"
        Skin="GluckVision" AutoGenerateColumns="False" GridLines="None" AllowFilteringByColumn="True" AllowPaging="True" AllowSorting="True" Width="100%">
        <ExportSettings>
            <Pdf FontType="Subset" PaperSize="Letter" />
            <Excel Format="Html" />
            <Csv ColumnDelimiter="Comma" RowDelimiter="NewLine" />
        </ExportSettings>
        <PagerStyle FirstPageImageUrl="~\RadControls\Skins\GluckVision\Grid\PagingFirst.gif"
            LastPageImageUrl="~\RadControls\Skins\GluckVision\Grid\PagingLast.gif" NextPageImageUrl="~\RadControls\Skins\GluckVision\Grid\PagingNext.gif"
            PrevPageImageUrl="~\RadControls\Skins\GluckVision\Grid\PagingPrev.gif" />
        <MasterTableView CommandItemDisplay="None" CurrentResetPageIndexAction="SetPageIndexToFirst"
            Dir="LTR" Frame="Border" TableLayout="Auto">
            <CommandItemSettings AddNewRecordImageUrl="~\RadControls\Skins\GluckVision\Grid\AddRecord.gif"
                RefreshImageUrl="~\RadControls\Skins\GluckVision\Grid\Refresh.gif" />
            <RowIndicatorColumn CurrentFilterFunction="NoFilter" FilterImageUrl="~\RadControls\Skins\GluckVision\Grid\Filter.gif"
                FilterListOptions="VaryByDataType" SortAscImageUrl="~\RadControls\Skins\GluckVision\Grid\SortAsc.gif"
                SortDescImageUrl="~\RadControls\Skins\GluckVision\Grid\SortDesc.gif" Visible="False">
                <HeaderStyle Width="20px" />
            </RowIndicatorColumn>
            <ExpandCollapseColumn CollapseImageUrl="~\RadControls\Skins\GluckVision\Grid\SingleMinus.gif"
                CurrentFilterFunction="NoFilter" ExpandImageUrl="~\RadControls\Skins\GluckVision\Grid\SinglePlus.gif"
                FilterImageUrl="~\RadControls\Skins\GluckVision\Grid\Filter.gif" FilterListOptions="VaryByDataType"
                Resizable="False" SortAscImageUrl="~\RadControls\Skins\GluckVision\Grid\SortAsc.gif"
                SortDescImageUrl="~\RadControls\Skins\GluckVision\Grid\SortDesc.gif" Visible="False">
                <HeaderStyle Width="20px" />
            </ExpandCollapseColumn>
            <EditFormSettings>
                <EditColumn CancelImageUrl="~\RadControls\Skins\GluckVision\Grid\Cancel.gif" CurrentFilterFunction="NoFilter"
                    EditImageUrl="~\RadControls\Skins\GluckVision\Grid\Edit.gif" FilterImageUrl="~\RadControls\Skins\GluckVision\Grid\Filter.gif"
                    FilterListOptions="VaryByDataType" InsertImageUrl="~\RadControls\Skins\GluckVision\Grid\Insert.gif"
                    SortAscImageUrl="~\RadControls\Skins\GluckVision\Grid\SortAsc.gif" SortDescImageUrl="~\RadControls\Skins\GluckVision\Grid\SortDesc.gif"
                    UpdateImageUrl="~\RadControls\Skins\GluckVision\Grid\Update.gif">
                </EditColumn>
            </EditFormSettings>
            <PagerStyle FirstPageImageUrl="~\RadControls\Skins\GluckVision\Grid\PagingFirst.gif"
                LastPageImageUrl="~\RadControls\Skins\GluckVision\Grid\PagingLast.gif" NextPageImageUrl="~\RadControls\Skins\GluckVision\Grid\PagingNext.gif"
                PrevPageImageUrl="~\RadControls\Skins\GluckVision\Grid\PagingPrev.gif" />
            <Columns>
                <telerik:GridBoundColumn CurrentFilterFunction="NoFilter" DataField="OrderNo" FilterImageUrl="RadControls/Skins/GluckVision/Grid\Filter.gif"
                    FilterListOptions="VaryByDataType" ForceExtractValue="None" HeaderText="Order #"
                    SortAscImageUrl="RadControls/Skins/GluckVision/Grid\SortAsc.gif" SortDescImageUrl="RadControls/Skins/GluckVision/Grid\SortDesc.gif"
                    UniqueName="column">
                    <FooterStyle Width="100px" />
                    <HeaderStyle Width="100px" />
                    <ItemStyle Width="100%" />
                </telerik:GridBoundColumn>
                <telerik:GridBoundColumn CurrentFilterFunction="NoFilter" DataField="Status" FilterImageUrl="RadControls/Skins/GluckVision/Grid\Filter.gif"
                    FilterListOptions="VaryByDataType" ForceExtractValue="None" HeaderText="Status"
                    SortAscImageUrl="RadControls/Skins/GluckVision/Grid\SortAsc.gif" SortDescImageUrl="RadControls/Skins/GluckVision/Grid\SortDesc.gif"
                    UniqueName="column1">
                </telerik:GridBoundColumn>
                <telerik:GridDateTimeColumn CurrentFilterFunction="NoFilter" DataField="OrderDate" DataFormatString="{0:dd/MM/yy}"
                    FilterImageUrl="RadControls/Skins/GluckVision/Grid\Filter.gif" FilterListOptions="VaryByDataType"
                    ForceExtractValue="None" HeaderText="Order Date" SortAscImageUrl="RadControls/Skins/GluckVision/Grid\SortAsc.gif"
                    SortDescImageUrl="RadControls/Skins/GluckVision/Grid\SortDesc.gif" UniqueName="column2" DataType="System.DateTime">
                </telerik:GridDateTimeColumn>
            </Columns>
        </MasterTableView>
        <FilterMenu NotSelectedImageUrl="~\RadControls\Skins\GluckVision\Grid\NotSelectedMenu.gif"
            SelectedImageUrl="~\RadControls\Skins\GluckVision\Grid\SelectedMenu.gif"></FilterMenu>
        <ClientSettings AllowColumnsReorder="True" ReorderColumnsOnClient="True">
        </ClientSettings>
        <HeaderStyle Width="100px" />
    </telerik:RadGrid>

This grid uses a custom skin and column filters.

Any ideas?

Thanks,
Kia

[Kia]

For a moment I though that it was the "AllowFilterByColumns" property that was causing it. But now I see that I have this issue regardless.

I think the custom skinning(EnableEmbeddedSkins="False") is causing the problem.

[Vlad]

Hello Kia,

Please set TableLayout="Fixed" for MasterTableView to achieve this.

Sincerely yours,
Vlad
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[Kia]

Now that's what I was after. Thanks.

[farooq]

Hi,

i 'hv same problem. i tried TableLayout="Fixed". Its working but its hiding some columns. i 'hv autogenerated column becouse my no. of columns are not fixed.
 here is my markup

<telerik:RadGrid ID="RadGrid1" runat="server" GridLines="None" Skin="Inox"> 

<MasterTableView TableLayout="Fixed">
        <ExpandCollapseColumn>
            <HeaderStyle Width="20px" />
            </ExpandCollapseColumn>
        <RowIndicatorColumn>
            <HeaderStyle Width="20px" />
        </RowIndicatorColumn>
</MasterTableView>
</telerik:RadGrid>

VB

 Protected  Sub RadGrid1_ColumnCreated(ByVal sender As Object, ByVal e As Telerik.Web.UI.GridColumnCreatedEventArgs) Handles RadGrid1.ColumnCreated 

If TypeOf e.Column Is GridBoundColumn Then 
    Dim col As GridBoundColumn = DirectCast(e.Column, GridBoundColumn) 
        Try  
                If col.UniqueName = "ColumnName" Then 
                    col.ItemStyle.Width = Unit.Pixel(100)
                    col.HeaderStyle.Width = Unit.Pixel(100)
                End If 
Catch ex As Exception 
    Throw ex 
End Try 

End If  
 End Sub

I am binding my grid on button click.

RadGrid1.DataSource = lobjGridTable
RadGrid1.DataBind()

Any ideas?

Thanks,
Farq

 

 

 

 

 

[Sebastian]

Hello farooq,

Have you tried fixed width for the grid (through its Width property) which matches the sum of all auto-generated columns in it? Furthermore, I recommend you using advanced binding for the control through its NeedDataSource event instead of simple binding with DataBind(). Moreover, verify that you are using the latest version of RadControls for ASP.NET AJAX (2008.2.1001).

Finally, if the problem persists, you may consider using IE developer toolbar or Firebug to inspect the html source of the page, find the cause of the abnormality and eliminate it.

Best regards,
Stephen
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[farooq]

Hi Stephen ,

Thanks for reply

IE developer toolbar  solved my problem. Actually i just want to specify my first column width. so i had 4 column. 1 of them was hidden because
first column width i specified 50px but my 3 columns width which i found there It was 50% in css. i solved my problem using some calculation for width

Dim dblwidth As Double = 90 / (RadGrid1.MasterTableView.AutoGeneratedColumns.Length - 1)
            For Each col As GridBoundColumn In RadGrid1.MasterTableView.AutoGeneratedColumns
                If Not col.UniqueName = "DateTime" Then
                    col.ItemStyle.Width = Unit.Percentage(dblwidth)
                    col.HeaderStyle.Width = Unit.Percentage(dblwidth)
                ElseIf col.UniqueName = "DateTime" Then
                    col.ItemStyle.Width = Unit.Percentage(10.0)
                    col.HeaderStyle.Width = Unit.Percentage(10.0)
                End If
            Next

[Rakan]

I need to set the width property of some columns to be fixed but allow other columns to expand automatically according to the window size.. I've tried setting the ItemStyle-Width, HeaderStyle-Width & FooterStyle-Width but NO LUCK...
Setting the TableLayout=Fixed simply makes the whole table a fixed width and that's not what I need..
Basically I want the EDIT & DELETE columns to have fixed widths and the rest to auto size according to content, which also doesn't seem to work that way for some reason.. It wraps text in certain columns when other columns dont really need to be that wide...

Also I am having issues setting the EXPAND/COLLAPSE column's width
so can you please tell me what do i need to do exactly to accomplish this?
Thanks I appreciate ur help

[Sachidanand]

Has anybody resolved this issue. I wanted to achieve same thing .. to make the column width autosize.