Column hide / show does not resize correctly

16 posts, 0 answers
  1. Guillaume
    Guillaume avatar
    15 posts
    Member since:
    Oct 2010

    Posted 18 Mar 2014 Link to this post

    Hi I am having some issue when using the option for showing / hiding column via the context menu in the header of a grid.

    My grid is made so it fits on the width of the screens we used. We have a column hidden by default. When i decide to show the hidden column, the grid does not resize and instead it is the columns which are resized. I would like instead that the columns stay at the width I already set in my page with the property "HeaderStyle-Width" and that a scrollbar appears at the bottom of my grid. 

    Is it possible to do that ?

    Thanks

    Guillaume
  2. Guillaume
    Guillaume avatar
    15 posts
    Member since:
    Oct 2010

    Posted 20 Mar 2014 Link to this post

    Any news on that issue ?

    Thanks !
  3. Venelin
    Admin
    Venelin avatar
    352 posts

    Posted 21 Mar 2014 Link to this post

    Hi Guillaume,

    In one case this is an expected behavior, but I cannot determine if this is your case based on the provided information. So I would like to ask few questions:

    1. Is RadGrid initially displayed with horizontal scroll or not?
    2. Does RadGrid have StaticHeaders or TableLayout = "Fixed"?

    If RadGrid is initially displayed without scroll and the total width of all columns is less than the width of the grid, then the columns will be expanded in order to fit the whole space. So if the grid is 1000px wide and you have say 5 column with HeaderStyle-Width = "100px" then their real width will become 200px (5x200px =1000px) instead of 100px. After displaying the invisible column it won't trigger the horizontal scroll because, in reality there is enough space to fit it. So this behavior in this specific case is logical and expected.

    Please see if this is not your situation too. If not you can send your markup so I can review it in details.

    Regards,
    Venelin
    Telerik
     

    Build cross-platform mobile apps using Visual Studio and .NET. Register for the online webinar on 03/27/2014, 11:00AM US ET.. Seats are limited.

     
  4. Thomas
    Thomas avatar
    14 posts
    Member since:
    Feb 2014

    Posted 21 Mar 2014 Link to this post

    Hi,
    I think, I have the same Issue.

    Picture 1 shows the columns Initial (correct).
    Then I add the column "Preview" with the Context menu.
    Then Picture 2 shows the result:
    The Item-Widths are correct, but the Header-Widths are wrong ("Preview" has the width from "Category", "Category has the width from "Date Request Decision", ...).
    After I reset the Layout (Order a Column, use a filter or swap a column), the Layout is once again correct (Picture 3)

    What can I do?

    Regards
    Thomas
  5. Thomas
    Thomas avatar
    14 posts
    Member since:
    Feb 2014

    Posted 21 Mar 2014 Link to this post

    Picture 1:
  6. Thomas
    Thomas avatar
    14 posts
    Member since:
    Feb 2014

    Posted 21 Mar 2014 in reply to Thomas Link to this post

    Picture 2:
  7. Thomas
    Thomas avatar
    14 posts
    Member since:
    Feb 2014

    Posted 21 Mar 2014 Link to this post

    Picture 3:

    (Sorry, I get an error, if I attach 3 files at ones)
  8. Guillaume
    Guillaume avatar
    15 posts
    Member since:
    Oct 2010

    Posted 21 Mar 2014 in reply to Venelin Link to this post

    Hi
    First of all, the grid is not displayed initially with a scroll but I do have the propery in ClientSettings : Scrolling-UseStaticHeaders="True" 

    But I don't think it is an expected behavior because as soon as the the gris is rebind / refresh the scrollbar appears.
    Also after showing this column without refresh, some of the columns have their header title shrinked ,( Ex : instead of "Comments" it displays "C..."

    Here is the markup I use :
    <telerik:RadGrid ID="gridWorkflow" runat="server"   
                        Width="99%"  
                        Height="630"                   
                        BorderWidth="1px" 
                        AllowSorting="True" 
                        AllowPaging="True" PageSize="20"
                        AllowFilteringByColumn="False"
                        AllowAutomaticDeletes="True"
                        AllowMultiRowSelection="True"          
                        AutoGenerateColumns="False"
                        OnItemCreated="gridWorkflow_OnUcRadGridItemCreated"              
                        OnItemDataBound="gridWorkflow_ItemDataBound" 
                        OnDeleteCommand="gridWorkflow_DeleteCommand" 
                        onitemcommand="gridWorkflow_ItemCommand"
                        OnNeedDataSource="gridWorkflow_OnNeedDataSource"
                        AlternatingItemStyle-BackColor="WhiteSmoke" 
                        GridLines="None"                      
                        Culture="(Default)"
                        EnableHeaderContextMenu="True" 
                        EnableAjaxSkinRendering="True"
                        EnableViewState="True"
                        GroupingEnabled="False"
                        GroupingSettings-CaseSensitive="False"
                        OnGridCreated=""
                        SortingSettings-EnableSkinSortStyles="false" >
                        
                        <HeaderContextMenu EnableTheming="True" Skin="Default" EnableEmbeddedSkins="True">
                            <CollapseAnimation Duration="200" Type="OutQuint" />
                        </HeaderContextMenu>
                        <ExportSettings ExportOnlyData="True" FileName="Workflows" HideStructureColumns="True"
                            IgnorePaging="True" OpenInNewWindow="True">
                        </ExportSettings>
                        <AlternatingItemStyle BackColor="WhiteSmoke" />
                        
                        <ClientSettings
                            Scrolling-AllowScroll="True"
                            Scrolling-UseStaticHeaders="True" 
                            Scrolling-SaveScrollPosition="True"
                            Scrolling-ScrollHeight="450"
                            Selecting-AllowRowSelect="false"
                            Selecting-UseClientSelectColumnOnly="True">
                            <%--<ClientEvents OnGridCreated="GetGridObject" OnFilterMenuShowing="ucRadGridControlfilterMenuShowing"></ClientEvents> --%>
                            <ClientEvents OnGridCreated="GetGridObject" OnRowCreated="RowCreated" OnFilterMenuShowing="ucRadGridControlfilterMenuShowing"></ClientEvents>
                        </ClientSettings>
    <MasterTableView 
                            DataKeyNames="WorkflowId"
                            ClientDataKeyNames="WorkflowId"
                            EditMode="InPlace"
                            ShowHeader="True" 
                            CommandItemDisplay="Top" 
                            CommandItemStyle-VerticalAlign="Middle">
                            
                            <CommandItemTemplate>
                                <telerik:RadToolBar runat="server" ID="radToolBar" AutoPostBack="true" Description=""
                                    Title="" TitleIconImageUrl="" TitleUrl="" Width="100%" Height="100%" OnClientButtonClicking="onRadToolBarClientButtonClicking" OnButtonClick="RadToolBar_Click"
                                    OnClientLoad="onRadToolBarHeaderClientLoad" Style="white-space: normal !important;">
                                    <Items>
                                        <telerik:RadToolBarButton Text="<%$Resources:Telerik, ApplyFilters%>" Hidden="False"
                                            runat="server" ID="applyFiltersToolbarItem" ImageUrl="~/Images/Filter.png" CommandName="ShowFilter"
                                            ForeColor="Black" Value="applyFiltersToolbarItem" />
                                        <telerik:RadToolBarButton Text="<%$Resources:Telerik, ExportTo%>" Hidden="False"
                                            runat="server" ID="exportToToolbarItem" ImageUrl="~/Images/Excel.gif"
                                            CommandName="Export" ForeColor="Black" Value="exportToToolbarItem" ToolTip="<%$Resources:recworkflow_list,Export%>" />
                                        <telerik:RadToolBarButton Text="Actions" Hidden="False"
                                            runat="server" ID="ActionOnSelectedItem" ImageUrl="~/Images/lightning.png"
                                            CommandName="Actions" ForeColor="Black" Value="actionsToolbarItem" ToolTip="" />    
                                    </Items>
                                </telerik:RadToolBar>
                            </CommandItemTemplate>

                            <CommandItemStyle BackColor="White" Font-Names="Verdana" Font-Size="10px" />

                            <PagerStyle Mode="NextPrevAndNumeric" AlwaysVisible="True" ></PagerStyle>
                            
                            <Columns>
                                <telerik:GridBoundColumn DataType="System.Int32" HeaderText="WorkflowId"
                                    ReadOnly="True" HeaderStyle-Width="2" UniqueName="WorkflowID" Visible="False" FilterControlAltText="Filter WorkflowID column">
                                </telerik:GridBoundColumn>
                                
                                <telerik:GridTemplateColumn HeaderStyle-Width="35" AllowFiltering="False">
                                    <HeaderTemplate>
                                        <asp:CheckBox runat="server" ID="chkAllOnPage" onclick="javascript:return CheckAllOnPage(this)"/>
                                    </HeaderTemplate>
                                    <ItemTemplate>
                                        <asp:CheckBox ID="CheckBox1" runat="server" />
                                    </ItemTemplate>
                                </telerik:GridTemplateColumn>

                                <telerik:GridHyperLinkColumn UniqueName="Name" SortExpression="Name"
                                    DataType="System.String" HeaderText="<%$ Resources:recworkflow_list, EmployeeName %>" FilterControlWidth="115"
                                    HeaderStyle-Width="170" HeaderStyle-HorizontalAlign="Left" ItemStyle-HorizontalAlign="Left"
                                    FilterControlAltText="Filter LastName column">
                                </telerik:GridHyperLinkColumn>
                                
                                <telerik:GridBoundColumn UniqueName="IsFileTypeEx" SortExpression="IsFileTypeEx" 
                                    ReadOnly="True" DataType="System.String" HeaderText="Ex" FilterControlWidth="10"
                                    HeaderStyle-Width="50" HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Center"
                                    FilterControlAltText="Filter IsFileTypeEx column" Visible="False">
                                </telerik:GridBoundColumn>
                                
                                <telerik:GridBoundColumn UniqueName="Status" SortExpression="Status" 
                                    ReadOnly="True" HeaderText="Status" FilterControlWidth="10"
                                    HeaderStyle-Width="50" HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Center"
                                    FilterControlAltText="Filter Status column" Visible="False">
                                </telerik:GridBoundColumn>

                                <telerik:GridBoundColumn UniqueName="CandidateId" SortExpression="CandidateId"
                                    ReadOnly="True" DataType="System.String" HeaderText="CandidateId" FilterControlWidth="10"
                                    HeaderStyle-Width="50" HeaderStyle-HorizontalAlign="Left" ItemStyle-HorizontalAlign="Left"
                                    FilterControlAltText="Filter CandidateId column" Visible="False">
                                </telerik:GridBoundColumn>

                                <telerik:GridBoundColumn UniqueName="Email" SortExpression="Email"
                                    ReadOnly="True" DataType="System.String" HeaderText="<%$ Resources:recworkflow_list, Email %>" FilterControlWidth="60"
                                    HeaderStyle-Width="100" HeaderStyle-HorizontalAlign="Left" ItemStyle-HorizontalAlign="Left"
                                    FilterControlAltText="Filter Email column" Visible="False">
                                </telerik:GridBoundColumn>
                                
                                <telerik:GridBoundColumn UniqueName="LanguageId" SortExpression="LanguageId"
                                    ReadOnly="True" DataType="System.String" HeaderText="<%$ Resources:recworkflow_list, Language %>" FilterControlWidth="45"
                                    HeaderStyle-Width="90" HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Center">
                                </telerik:GridBoundColumn>                           
                                
                                <telerik:GridDateTimeColumn UniqueName="CreatedDate" SortExpression="CreatedDate" 
                                    ReadOnly="True" HeaderText="<%$ Resources:recworkflow_list, CreationDate %>" HeaderStyle-Width="137" FilterControlWidth="97" HeaderStyle-HorizontalAlign="Left" ItemStyle-HorizontalAlign="Left" 
                                    DataFormatString="{0:yyyy/MM/dd}" FooterAggregateFormatString="{0:yyyy/MM/dd">                            
                                </telerik:GridDateTimeColumn>

                                <telerik:GridBoundColumn UniqueName="ProcessCenterId" SortExpression="ProcessCenterId" 
                                    ReadOnly="True" DataType="System.String" HeaderText="<%$ Resources:recworkflow_list, ProcessingCenter %>" FilterControlWidth="115"
                                    HeaderStyle-Width="155" HeaderStyle-HorizontalAlign="Left" ItemStyle-HorizontalAlign="Left"
                                    FilterControlAltText="Filter ProcessCenterId column" Display="false" Visible="true">
                                </telerik:GridBoundColumn>
                                
                                <telerik:GridBoundColumn UniqueName="DelegateUserId" SortExpression="DelegateUserId" 
                                    ReadOnly="True" DataType="System.String" HeaderText="<%$ Resources:recworkflow_list, DelegateTo %>" FilterControlWidth="115"
                                    HeaderStyle-Width="155" HeaderStyle-HorizontalAlign="Left" ItemStyle-HorizontalAlign="Left"
                                    FilterControlAltText="Filter DelegateUserId column" Visible="True">
                                </telerik:GridBoundColumn>

                                <telerik:GridBoundColumn UniqueName="CreatedUserId" SortExpression="CreatedUserId" 
                                    ReadOnly="True" DataType="System.String" HeaderText="<%$ Resources:recworkflow_list, CreatedBy %>" FilterControlWidth="115"
                                    HeaderStyle-Width="155" HeaderStyle-HorizontalAlign="Left" ItemStyle-HorizontalAlign="Left"
                                    FilterControlAltText="Filter CreatedUserId column" Visible="False">
                                </telerik:GridBoundColumn>
                                
                                <telerik:GridDateTimeColumn UniqueName="ApprovedDate" SortExpression="ApprovedDate"  MinDate="0001-01-01"
                                    ReadOnly="True" HeaderText="<%$ Resources:recworkflow_list, ApprobationDate %>" HeaderStyle-Width="137" FilterControlWidth="97" HeaderStyle-HorizontalAlign="Left" ItemStyle-HorizontalAlign="Left" 
                                    DataFormatString="{0:yyyy/MM/dd}" FooterAggregateFormatString="{0:yyyy/MM/dd">                            
                                </telerik:GridDateTimeColumn>
                                
                                <telerik:GridBoundColumn UniqueName="ApprovedUserName" SortExpression="ApprovedUserName" 
                                    ReadOnly="True" DataType="System.String" HeaderText="<%$ Resources:recworkflow_list, ApprovedBy %>" FilterControlWidth="115"
                                    HeaderStyle-Width="160" HeaderStyle-HorizontalAlign="Left" ItemStyle-HorizontalAlign="Left"
                                    FilterControlAltText="Filter ApprovedUserName column" Visible="True">
                                </telerik:GridBoundColumn>
                                
                                <telerik:GridBoundColumn UniqueName="SupervisorEmail" SortExpression="SupervisorEmail" 
                                    ReadOnly="True" DataType="System.String" HeaderText="<%$ Resources:recworkflow_list, SupervisorEmail %>" FilterControlWidth="202"
                                    HeaderStyle-Width="242" HeaderStyle-HorizontalAlign="Left" ItemStyle-HorizontalAlign="Left"
                                    FilterControlAltText="Filter SupervisorEmail column" Visible="True">
                                </telerik:GridBoundColumn>
                                
                                <telerik:GridTemplateColumn UniqueName="DivisionalCoordinatorName" SortExpression="DivisionalCoordinatorName" 
                                    ReadOnly="False" DataType="System.String" HeaderText="<%$ Resources:recworkflow_list, DivisionalCoordinator %>" FilterControlWidth="115"
                                    HeaderStyle-Width="155" HeaderStyle-HorizontalAlign="Left" ItemStyle-HorizontalAlign="Left"
                                    FilterControlAltText="Filter DivisionalCoordinatorName column" Visible="True" CurrentFilterFunction="EqualTo">                                
                                    <ItemTemplate>
                                        <asp:Label ID="lblCoordinatorUserName" runat="server" CssClass="standard" Text='<%# Eval("DivisionalCoordinatorName") %>'></asp:Label>
                                    </ItemTemplate>
                                </telerik:GridTemplateColumn>

                                <telerik:GridBoundColumn UniqueName="IsSubmitted" SortExpression="IsSubmitted" 
                                    ReadOnly="True" DataType="System.String" HeaderText="<%$ Resources:recworkflow_list, Submitted %>" FilterControlWidth="50"
                                    HeaderStyle-Width="90" HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Center"
                                    FilterControlAltText="Filter IsSubmitted column" Visible="True">
                                </telerik:GridBoundColumn>
                                
                                <telerik:GridDateTimeColumn UniqueName="LastUpdatedDate" SortExpression="LastUpdatedDate" 
                                    ReadOnly="True" HeaderText="<%$ Resources:recworkflow_list, LastUpdateDate %>" HeaderStyle-Width="137" FilterControlWidth="97" HeaderStyle-HorizontalAlign="Left" ItemStyle-HorizontalAlign="Left" 
                                    DataFormatString="{0:yyyy/MM/dd}" FooterAggregateFormatString="{0:yyyy/MM/dd}">
                                </telerik:GridDateTimeColumn>
                                
                                <telerik:GridBoundColumn UniqueName="LastUpdatedUserId" SortExpression="LastUpdatedUserId" 
                                    ReadOnly="True" DataType="System.String" HeaderText="<%$ Resources:recworkflow_list, ModifiedBy %>" FilterControlWidth="130"
                                    HeaderStyle-Width="170" HeaderStyle-HorizontalAlign="Left" ItemStyle-HorizontalAlign="Left"
                                    FilterControlAltText="Filter LastUpdatedUserId column" Visible="True">
                                </telerik:GridBoundColumn>

                                <telerik:GridTemplateColumn UniqueName="ApprovedComments" HeaderText="<%$ Resources:recworkflow_list, Comments %>" ReadOnly="True" AllowFiltering="False"
                                     HeaderStyle-Width="85" ItemStyle-HorizontalAlign="Center">
                                 <ItemStyle CssClass="standard" />  
                                    <ItemTemplate>
                                        <asp:Image ID="ImgCom" ImageUrl="~\images\user_comment.png" runat="server" Visible='<%# DataBinder.Eval(Container, "DataItem.ApprovedComments") != String.Empty%>' ></asp:Image>
                                        <telerik:RadToolTip ID="RadToolTip1" AutoCloseDelay="0" runat="server" TargetControlID="ImgCom" RelativeTo="Element"
                                          Position="BottomCenter" RenderInPageRoot="true" >
                                            <%# DataBinder.Eval(Container, "DataItem.ApprovedComments")%>
                                        </telerik:RadToolTip>
                                    </ItemTemplate>
                                </telerik:GridTemplateColumn>

                                <telerik:GridTemplateColumn UniqueName="CanBeReactivated" 
                                    HeaderText="" ReadOnly="True" FilterControlAltText="Filter CanBeReactivated column" 
                                    AllowFiltering="False" HeaderStyle-Width="30">
                                    <ItemStyle CssClass="standard" />  
                                </telerik:GridTemplateColumn>

                                <telerik:GridTemplateColumn UniqueName="Guid" 
                                    HeaderText="<%$ Resources:recworkflow_list, Link %>" ReadOnly="True" FilterControlAltText="Filter Guid column" 
                                    AllowFiltering="False" HeaderStyle-Width="30">
    </telerik:GridTemplateColumn>

                                <telerik:GridButtonColumn UniqueName="DeleteCommand" CommandName="Delete" ImageUrl="images/del.gif" ButtonType="ImageButton" 
                                    HeaderStyle-Width="30" ConfirmTitle="Delete?" FilterControlAltText="Filter DeleteCommand column">
                                    <ItemStyle BorderStyle="None" />
                                </telerik:GridButtonColumn>
                            </Columns>
                            <RowIndicatorColumn FilterControlAltText="Filter RowIndicator column">
                            </RowIndicatorColumn>
                            <ExpandCollapseColumn FilterControlAltText="Filter ExpandColumn column">
                            </ExpandCollapseColumn>
                             <CommandItemSettings ExportToPdfText="Export to Pdf" />
                            </MasterTableView>
                        <FilterMenu EnableTheming="True" Skin="Default" EnableEmbeddedSkins="true" EnableImageSprites="true">
                            <CollapseAnimation Duration="200" Type="OutQuint" />
                        </FilterMenu>
                        <SortingSettings SortToolTip="" />
                    </telerik:RadGrid>

    Thanks,

    Guillaume





  9. Venelin
    Admin
    Venelin avatar
    352 posts

    Posted 26 Mar 2014 Link to this post

    Hi Guillaume,

    I've tried to replicate the issue based on the provided code but the grid still behaves as expected: here is a short video that shows the result. As you can see, when there is a scroll displayed initially, this means that the total width of all columns is more than grid's width and there is not enough space. That's why the newly added column does not shrink the rest of the column it is just added and the scroll becomes smaller in order to scroll all columns.

    "First of all, the grid is not displayed initially with a scroll[...]as soon as the the gris is rebind / refresh the scrollbar appears."

    --> This is where the true issue might reside, you should see the horizontal scroll unless you are using really wide monitor (the total width of all visible columns is approximately 2000px).

    Please send us a code that replicates this behavior and additionally let us know which version of the controls do you use, on which browsers do you observe the problem and so on.

    To answer Thomas, could you please try to add Width="100%" to the MasterTable? About the column reordering/swapping, this should "swap" the styles too like shown on this demo: Grid - Column/Row Resize/Reorder. Please have a look at the video I captured where you can see how the styles are "swapped" too:

    Regards,
    Venelin
    Telerik
     

    Build cross-platform mobile apps using Visual Studio and .NET. Register for the online webinar on 03/27/2014, 11:00AM US ET.. Seats are limited.

     
  10. Guillaume
    Guillaume avatar
    15 posts
    Member since:
    Oct 2010

    Posted 26 Mar 2014 Link to this post

    Hi Venelin,

    The only difference I see here is that on my side the "processing center" column is hidden when the grid is loaded (as the cde I gave to you show "display=false"). I can see on your video that all columns are displayed. Maybe that's why this is working on you side. Because in deed, when i rebind th gris after showing the column, it is displayed correctly and I have the scrollbar.
    FYI we are using IE 9 and a pretty old version of Telerik : 2010.3.1317.20

    Thanks.
  11. Thomas
    Thomas avatar
    14 posts
    Member since:
    Feb 2014

    Posted 27 Mar 2014 in reply to Venelin Link to this post

    Thanks for the answer.

    My problem arn't the swapping, its the Hiding/showing of columns via Contextmenu. The Problem is only on the IE, Opera and Firefox isn't the problem.

    width=100% brings the same result-


    Best Regards
    Thomas

  12. Venelin
    Admin
    Venelin avatar
    352 posts

    Posted 31 Mar 2014 Link to this post

    Hi,

    As you can see on 0:11 second of the video I refresh the page and the column "ProcessingCenter" is initially hidden, then I show it via the header context menu. It is kind of confusing that I didn't refresh the page at the beginning of the video, but It doesn't make difference on my side in these two cases.

    Please double check if your case is not the same as the one I described in my first post.If RadGrid is initially displayed without scroll and the total width of all columns is less than the width of the grid, then I will observe the "unwanted" behavior.

    Regards,
    Venelin
    Telerik
     

    Build cross-platform mobile apps using Visual Studio and .NET. Register for the online webinar on 03/27/2014, 11:00AM US ET.. Seats are limited.

     
  13. Guillaume
    Guillaume avatar
    15 posts
    Member since:
    Oct 2010

    Posted 09 Apr 2014 in reply to Venelin Link to this post

    Hi ! You'll find in attachment 3 screenshots.
    The first with the hidden column, the second with the visible column. Maybe my issue will be clearer. You can see on the 2nd picture that the column with the title "Comments" is shrinked to "C...."
    but on the 3rd picture, after rebinding (launch a new search) the page with the column set as visible, the scroll appears.

    Is that a correct behaviour ?

    Thanks
  14. Thomas
    Thomas avatar
    14 posts
    Member since:
    Feb 2014

    Posted 10 Apr 2014 Link to this post

    Hi again.
    I have make a new small Project to find the error. In this demo is the same Problem as in my program:

    <%

     

    @

    Page

    Language

    ="VB"

    AutoEventWireup

    ="false"

    CodeBehind

    ="Default.aspx.vb"

    Inherits

    ="TelerikWebAppColumnSaveBug._Default"

    %>

     

    <%

     

     

    @

    Register

    Assembly

    ="Telerik.Web.UI"

    Namespace

    ="Telerik.Web.UI"

    TagPrefix

    ="telerik"

    %>

     

     

    <!

     

     

    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

    id

    ="Head1"

    runat

    ="server">

     

     

     

     

    <

    title

    ></

    title

    >

     

    </

     

     

     

    head

    >

     

    <

     

     

     

    body

    >

     

     

     

     

    <

    form

    id

    ="form1"

    runat

    ="server">

     

     

     

     

     

    <

    telerik

    :

    RadScriptManager

    ID

    ="RadScriptManager1"

    runat

    ="server"></

    telerik

    :

    RadScriptManager

    >

     

     

     

     

     

    <

    div

    >

     

     

     

     

    <

    telerik

    :

    RadGrid

    ID

    ="RadGrid1"

    runat

    ="server"

    AllowFilteringByColumn

    ="True"

     

     

     

     

    AllowPaging

    ="True"

    PageSize

    ="50"

    Width

    ="100%"

    Height

    ="650"

    AllowSorting

    ="True"

    CellSpacing

    ="0"

     

     

     

     

    EnableHeaderContextMenu

    ="true"

    EnableHeaderContextFilterMenu

    ="true">

     

     

     

     

     

    <

    GroupingSettings

    CaseSensitive

    ="false"></

    GroupingSettings

    >

     

     

     

     

    <

    MasterTableView

    AutoGenerateColumns

    ="false"

    AllowFilteringByColumn

    ="True"

    CommandItemDisplay

    ="Top"

    width

    ="100%"

    ClientDataKeyNames

    ="ProductID">

     

     

     

     

    <

    PagerStyle

    AlwaysVisible

    ="true"

    Mode

    ="NextPrevAndNumeric"

    />

     

     

     

     

    <

    Columns

    >

     

     

     

     

    <

    telerik

    :

    GridBoundColumn

    DataField

    ="ProductID"

    Visible

    ="true"

    FilterControlWidth

    ="60%"

    HeaderStyle-Width

    ="80"

    ItemStyle-Width

    ="60"

    HeaderText

    ="ProductID"

    UniqueName

    ="Version2"

    ColumnGroupName

    ="SoftwareInformation"

    ItemStyle-HorizontalAlign

    ="Left"

    HeaderStyle-HorizontalAlign

    ="Left"

    />

     

     

     

     

    <

    telerik

    :

    GridBoundColumn

    DataField

    ="ProductName"

    Visible

    ="true"

    FilterControlWidth

    ="80%"

    HeaderStyle-Width

    ="200"

    ItemStyle-Width

    ="200"

    HeaderText

    ="Product Name"

    UniqueName

    ="ProductName"

    ColumnGroupName

    ="SoftwareInformation"

    ItemStyle-HorizontalAlign

    ="Left"

    HeaderStyle-HorizontalAlign

    ="Left"

    />

     

     

     

     

    <

    telerik

    :

    GridBoundColumn

    DataField

    ="UnitPrice"

     

     

     

     

    Visible

    ="true"

    DataType

    ="System.String"

    FilterListOptions

    ="VaryByDataType"

     

     

     

     

    FilterControlWidth

    ="80%"

    HeaderStyle-Width

    ="270"

    ItemStyle-Width

    ="270"

     

     

     

     

    HeaderText

    ="UnitPrice"

     

     

     

     

    UniqueName

    ="UnitPrice"

    ColumnGroupName

    ="SoftwareInformation"

     

     

     

     

    ItemStyle-HorizontalAlign

    ="Left"

    HeaderStyle-HorizontalAlign

    ="Left"/>

     

     

     

     

    <

    telerik

    :

    GridBoundColumn

    DataField

    ="ReorderLevel"

    Visible

    ="true"

    FilterControlWidth

    ="60%"

    HeaderStyle-Width

    ="80"

    ItemStyle-Width

    ="60"

    HeaderText

    ="ReorderLevel"

    UniqueName

    ="ReorderLevel"

    ColumnGroupName

    ="SoftwareInformation"

    ItemStyle-HorizontalAlign

    ="Left"

    HeaderStyle-HorizontalAlign

    ="Left"

    />

     

     

     

     

    <

    telerik

    :

    GridBoundColumn

    DataField

    ="Discontinued"

    Visible

    ="true"

    FilterControlWidth

    ="80%"

    HeaderStyle-Width

    ="200"

    ItemStyle-Width

    ="200"

    HeaderText

    ="Discontinued"

    UniqueName

    ="Discontinued"

    ColumnGroupName

    ="SoftwareInformation"

    ItemStyle-HorizontalAlign

    ="Left"

    HeaderStyle-HorizontalAlign

    ="Left"

    />

     

     

     

     

    </

    Columns

    >

     

     

     

     

    </

    MasterTableView

    >

     

     

     

     

     

    <

    ClientSettings

    AllowColumnsReorder

    ="true"

    ReorderColumnsOnClient

    ="false">

     

     

     

     

    <

    DataBinding

    Location

    ="http://demos.kendoui.com/service/Northwind.svc"

    ResponseType

    ="JSONP">

     

     

     

     

    <

    DataService

    TableName

    ="Products"

    Type

    ="OData"

    />

     

     

     

     

    </

    DataBinding

    >

     

     

     

     

    <

    Scrolling

     

     

     

     

    AllowScroll

    ="true"

     

     

     

     

    UseStaticHeaders

    ="true"

     

     

     

     

    ScrollHeight

    ="300px"

    />

     

     

     

     

    </

    ClientSettings

    >

     

     

     

     

    </

    telerik

    :

    RadGrid

    >

     

     

     

     

    </

    div

    >

     

     

     

     

    </

    form

    >

     

    </

     

     

     

    body

    >

     

    </

     

     

     

    html

    >

     

    Make the Following in IE:

     

    1. Hide the Column ProductID
    2. Unhide the Column ProductID​

    3. Close the contextmenu
    => The Header-Widths are different to the Item-Widths

    Could you please check this?

    Thanks
    thomas
  15. Venelin
    Admin
    Venelin avatar
    352 posts

    Posted 15 Apr 2014 Link to this post

    Hello Guillaume,

    Could you please check in your browser DOM Inspector how wide the grid is when displayed. After that sum up all visible column widths (HeaderStyle-Width) that are currently set in your aspx code and please provide these two numbers.

    To answer Thomas, please format your code, because VS is unable to format it.

    Regards,
    Venelin
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  16. Anoop
    Anoop avatar
    1 posts
    Member since:
    Nov 2014

    Posted 18 Nov 2015 in reply to Guillaume Link to this post

     

     Hi

    I have found one solution for this.

    Give width to all fields except one.

     

               

    columns.Bound(c => c.empcode).Title("Week").Width(100);<br>            columns.Bound(c => c.empname).Title("Model Code").Width(150); <br>            columns.Bound(c => c.empid).Title("Product Code").Width(200); <br>            columns.Bound(c => c.empdesc).Title("Description");<br>            columns.Bound(c => c.salary).Title("Sales").Width(100);<br>            columns.Bound(c => c.hra).Title("SOH").Width(100);

    See empdesc does not have width field.

    Like this you can do all.

     

    Thanks

     

     

     

     

     

Back to Top