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

Column lines does not fit to headers

4 Answers 79 Views
Grid
This is a migrated thread and some comments may be shown as answers.
R
Top achievements
Rank 1
R asked on 05 Aug 2013, 09:48 AM
Hi Everyone,
I Have lot of RadGrids in site, and about 20% have this issue: column lines are not fit to column headers. Can anyone help with this ?
I saw, that if in grid is lot of data, headers are moved. If I limit records to show, radgrid displays data properly. Is any property, which i have to set?

I have attached sample screenshot.

4 Answers, 1 is accepted

Sort by
0
Princy
Top achievements
Rank 1
answered on 05 Aug 2013, 11:40 AM
Hi ,

I guess you are setting width to the columns.Please try setting HeaderStyle-Width and TableLayout property is set to Fixed and see if it makes any difference.Another approach is to use resizeToFit to resizes the column to fit the widest cell's content without wrapping.
If this doesn't help please provide your code.

Thanks
Princy
0
R
Top achievements
Rank 1
answered on 05 Aug 2013, 01:06 PM
Hi, thanks for reply.

My HeaderStyle-Width always equal ItemStyle-Width. TableLayout property was set to Fixed.
I have implement ResizeToFit function after item databounding and it's works fine, but i have empty space after last column. My radgrid not occupy 100% of width. Is there any solution for this?
I'm attaching sample code and screenshot

<telerik:RadGrid ID="rgTGK" AllowMultiRowSelection="true" AllowFilteringByColumn="false"
               Height="99%" Width="100%" OnLoad="setObjectSkin" runat="server" GridLines="None" AllowPaging="false"
               AllowSorting="true" OnItemDataBound="rgTGK_ItemDataBound">
               <PagerStyle Mode="NumericPages" AlwaysVisible="true" PagerTextFormat="<%$ Resources:General, RadGridStrony%>">
               </PagerStyle>
               <ClientSettings EnableRowHoverStyle="true">
                   <ClientEvents OnRowClick="PokazKlientTabTGK" OnCommand="RadGrid1_CommandTGK" OnRowMouseOut="RowMouseOut"
                       OnRowMouseOver="RowMouseOver" OnHierarchyExpanded="HierarchyExpanded" OnHierarchyCollapsed="HierarchyCollapsed"
                       OnHierarchyExpanding="RadGrid1_HierarchyExpandingTGK" OnRowDataBound="RadGrid1_RowDataBoundTGK"
                       OnDataBound="RadGrid1_DataBound" />
                   <Scrolling AllowScroll="true" UseStaticHeaders="true" />
                   <Selecting AllowRowSelect="true" />
                   <Resizing AllowColumnResize="true" AllowResizeToFit="true" ResizeGridOnColumnResize="true" />
               </ClientSettings>
               <MasterTableView AutoGenerateColumns="false" TableLayout="Fixed" HierarchyLoadMode="Client"
                   ClientDataKeyNames="idklient,targetrealizacje,targetprodukt" DataKeyNames="idklient,targetprodukt"
                   NoMasterRecordsText="<%$ Resources:General, BrakDanych%>" ExpandCollapseColumn-HeaderStyle-Width="30px"
                   ExpandCollapseColumn-ItemStyle-Width="30px">
                   <Columns>
                   // Lots of columns like  <telerik:GridBoundColumn HeaderStyle-Width="45px" ItemStyle-Width="45px" UniqueName="lp" HeaderText="Lp.">
                   </Columns>
                                   </MasterTableView>
           </telerik:RadGrid>


and JS codefor resizing:
function RadGrid1_DataBound(sender, args) {
    var grid = $find("<%= rgTGK.ClientID %>");
    var columns = grid.get_masterTableView().get_columns();
    for (var i = 0; i < columns.length; i++) {
        columns[i].resizeToFit();
    }
}


0
Accepted
Princy
Top achievements
Rank 1
answered on 06 Aug 2013, 03:14 AM
Hi,

Please note that when using resizing with scrolling and static headers, only the GridTableView is resized - RadGrid's width remains fixed.Since you are using resizeToFit,i don't think there is any need to add HeaderStyle-Width or ItemStyle-width,try removing the width of the last column and see if it makes any difference.If it doesn't help can you try setting UseStaticHeaders=False.


Thanks,
Princy
0
R
Top achievements
Rank 1
answered on 06 Aug 2013, 09:26 AM
Finally found a solution!

UseStaticHeaders=False is good solution, but we need to have Headers always visible, so i wrote a simple js code.
It works for me ;)
function RadGrid1_DataBound(sender, args) {
    var x = $get("rdTresc_C_TGKlienci_rgTGK_ctl00").offsetHeight;
    var y = $get("rdTresc_C_TGKlienci_rgTGK_GridData").offsetHeight;
    var z = $get("rdTresc_C_TGKlienci_rgTGK_GridHeader");
    if (x > y) {
        var szerokosc = z.clientWidth;
        szerokosc -= 17;
    z.setAttribute("style", "width:"+szerokosc+"px");
    }
}

if scrollbar appears (x > y), I change clientWidth of RadGridHeader. 17px is width of scrollbar
Tags
Grid
Asked by
R
Top achievements
Rank 1
Answers by
Princy
Top achievements
Rank 1
R
Top achievements
Rank 1
Share this question
or