Column hide / show does not resize correctly

[Guillaume]

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

[Guillaume]

Any news on that issue ?

Thanks !

[Venelin]

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

 

 

[Thomas]

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

[Thomas]

Picture 1:

[Thomas]

Picture 2:

[Thomas]

Picture 3:

(Sorry, I get an error, if I attach 3 files at ones)

[Guillaume]

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

[Venelin]

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

 

 

[Guillaume]

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.

[Thomas]

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

[Venelin]

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

 

 

[Guillaume]

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

[Thomas]

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

[Venelin]

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

 

 

[Anoop]

 

 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