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

RadButton not follow Horizontal-Scrolling in RadGrid (Frozen Col setting) in IE9

1 Answer 136 Views

Button

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

ALEX asked on 05 Mar 2012, 09:57 AM

IE8-Frozen-Before-Move-Hor.png

IE8-Frozen-Correct.png

IE9-Frozen-Before-Horz.png

IE9-Frozen-After-Move-Horz.png

IE9-Frozen-ButtonVsRadButton-Before-Horz.png

IE9-Frozen-ButtonVsRadButton-After-Move-Horz.png

Hi Team,

I'm facing with RadButton is not follow the horizontal-scroll moving in RadGrid (Frozen Column Setting).
I created the radbutton in radgrid template column and then i set grid column setting is frozen 1 column. If i move the horizontal-scroll bar those radbutton is not moving. It stay same position. If i replace with asp button , it following the Horizontal-scroll. RadButton Vertical scrolling is i solved by this thread RadButton Not Displaying correctly in Grid

Please find my attachment.

Here is my grid setting.

<telerik:RadAjaxPanel ID="_radAjaPnl" runat="server" Width="100%" Height="100%">

<telerik:RadGrid ID="_radGrid" runat="server" ShowGroupPanel="false" ShowStatusBar="false"

AllowPaging="True" AllowSorting="false" EnableEmbeddedSkins="false" Skin="mscSkinOffice"

AutoGenerateColumns="false" GridLines="none" PageSize="100" OnDataBound="_radGrid_DataBound"

OnItemCommand="_radGrid_ItemCommand" OnItemDataBound="_radGrid_ItemDataBound"

OnUpdateCommand="_radGrid_UpdateCommand" OnNeedDataSource="_radGrid_NeedDataSource"

Width="880" Visible="true">

<MasterTableView EditMode="PopUp" TableLayout="fixed" AutoGenerateColumns="False"

DataKeyNames="Key,Document_Type,Document_No,Line_No,Document_Status,Type,Line_Formatting"

Width="100%" CommandItemDisplay="TopAndBottom" EnableHeaderContextMenu="true">

<Columns>

<telerik:GridButtonColumn UniqueName="_radGridImgbtnInsert" ButtonType="ImageButton"

CommandName="InitInsert" Text="New line" ImageUrl="../site_images/_lineadd.png"

ConfirmDialogType="RadWindow" ConfirmText="Do you want to insert new line?" ConfirmTitle="New line"

ConfirmDialogHeight="130" ConfirmDialogWidth="300" Groupable="false" Display="false">

<HeaderStyle Width="28px" HorizontalAlign="center" />

<ItemStyle Width="28px" HorizontalAlign="center" />

</telerik:GridButtonColumn>

<telerik:GridEditCommandColumn UniqueName="_radGridImgBtnUpdate" ButtonType="ImageButton"

EditImageUrl="../site_images/_lineedit.png" EditText="Edit line" Groupable="false"

Display="false">

<HeaderStyle Width="28px" HorizontalAlign="center" />

<ItemStyle Width="28px" HorizontalAlign="center" />

</telerik:GridEditCommandColumn>

<telerik:GridButtonColumn UniqueName="_radGridImgBtnDelete" ButtonType="ImageButton"

CommandName="Delete" Text="Delete line" ImageUrl="../site_images/_linedelete.png"

ConfirmDialogType="RadWindow" ConfirmText="Delete the costing line?" ConfirmTitle="Delete line"

ConfirmDialogHeight="130" ConfirmDialogWidth="250" Groupable="false" Display="false">

<HeaderStyle Width="28px" HorizontalAlign="center" />

<ItemStyle Width="28px" HorizontalAlign="center" />

</telerik:GridButtonColumn>

<telerik:GridTemplateColumn HeaderText="Status" SortExpression="Status" UniqueName="tmpcolStatus"

FilterControlAltText="Filter tmpcolStatus column" Groupable="false" Visible="false"

Display="false">

<ItemTemplate>

<asp:Label ID="Label1" runat="server" Text='<%# Eval("Document_Status") %>'></asp:Label>

</ItemTemplate>

<HeaderStyle HorizontalAlign="Center" Width="80px" />

<ItemStyle HorizontalAlign="Center" />

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn HeaderText="S/No." SortExpression="S_No" UniqueName="tmpcolS_No"

FilterControlAltText="Filter tmpcolS_No column" DataField="S_No" DataType="System.String"

Groupable="false">

<ItemTemplate>

<telerik:RadTextBox runat="server" ID="_radtxtS_No" Text='<%# DataBinder.Eval(Container.DataItem, "S_No") %>'

MaxLength="20" TextMode="SingleLine" BorderStyle="None" Width="35">

</telerik:RadTextBox>

</ItemTemplate>

<HeaderStyle Wrap="false" HorizontalAlign="Left" Width="50" />

<ItemStyle Wrap="false" HorizontalAlign="Left" Width="50" />

</telerik:GridTemplateColumn>

<telerik:GridBoundColumn DataField="Type" DataType="System.Int32" FilterControlAltText="Filter Type column"

HeaderText="Type" SortExpression="Type" UniqueName="Type" Groupable="false" Display="false">

<HeaderStyle HorizontalAlign="left" Width="108" />

<ItemStyle HorizontalAlign="left" Width="108" />

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="No" FilterControlAltText="Filter No column" HeaderText="No."

SortExpression="No" UniqueName="No" Groupable="false">

<HeaderStyle HorizontalAlign="left" Width="130" />

<ItemStyle HorizontalAlign="left" Width="130" />

</telerik:GridBoundColumn>

<telerik:GridTemplateColumn HeaderText="Description" SortExpression="" UniqueName="tmpcolDescription"

FilterControlAltText="Filter tmpcolDescription column" DataField="Description"

Groupable="false">

<ItemTemplate>

<telerik:RadTextBox runat="server" ID="_radtxtDescription" Text='<%# DataBinder.Eval(Container.DataItem, "Description") %>'

MaxLength="50" TextMode="SingleLine" BorderStyle="none" Width="300">

</telerik:RadTextBox>

</ItemTemplate>

<HeaderStyle Wrap="false" HorizontalAlign="Left" Width="270" />

<ItemStyle Wrap="false" HorizontalAlign="Right" Width="270" />

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn HeaderText="Quantity" SortExpression="" UniqueName="tmpcolQuantity"

FilterControlAltText="Filter tmpcolQuantity column" Groupable="false">

<ItemTemplate>

<telerik:RadNumericTextBox ID="_radnumQuantity" runat="server" EmptyMessage="" ShowSpinButtons="false"

Type="Number" Width="60px" InvalidStyleDuration="300" Value='<%# Convert.ToDecimal(DataBinder.Eval(Container.DataItem, "Quantity")) %>'

BorderStyle="None" Height="13px" EnableOldBoxModel="true" EnabledStyle-HorizontalAlign="Right"

IncrementSettings-InterceptArrowKeys="false">

<NumberFormat AllowRounding="true" KeepNotRoundedValue="False" />

</telerik:RadNumericTextBox>

</ItemTemplate>

<HeaderStyle Wrap="false" HorizontalAlign="Right" Width="80" />

<ItemStyle Wrap="false" HorizontalAlign="Right" Width="80" />

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn HeaderText="Unit Cost" SortExpression="" UniqueName="tmpcolUnit_Cost"

FilterControlAltText="Filter tmpcolUnit_Cost column" Groupable="false">

<ItemTemplate>

<telerik:RadNumericTextBox ID="_radnumUnit_Cost" runat="server" EmptyMessage="" ShowSpinButtons="false"

Type="Number" Width="80%" InvalidStyleDuration="300" Value='<%# Convert.ToDecimal(DataBinder.Eval(Container.DataItem, "Unit_Cost")) %>'

BorderStyle="None" Height="13px" EnableOldBoxModel="true" EnabledStyle-HorizontalAlign="Right"

IncrementSettings-InterceptArrowKeys="false">

<NumberFormat AllowRounding="true" DecimalDigits="5" KeepNotRoundedValue="False" />

</telerik:RadNumericTextBox>

<telerik:RadButton ID="_btnunitcost" runat="server" Text="..." Skin="Office2007"

OnClientClicking="OnClientClickingGrid" AutoPostBack="false" ButtonType="StandardButton"

Width="10px">

</telerik:RadButton>

</ItemTemplate>

<HeaderStyle Wrap="false" HorizontalAlign="Right" Width="130" />

<ItemStyle Wrap="false" HorizontalAlign="Right" Width="130" />

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn HeaderText="Cost Markup %" SortExpression="" UniqueName="tmpcolCost_Markup_Percent"

FilterControlAltText="Filter tmpcolCost_Markup_Percent column" Groupable="false">

<ItemTemplate>

<telerik:RadNumericTextBox ID="_radnumCost_Markup_Percent" runat="server" EmptyMessage=""

ShowSpinButtons="false" Type="Number" Width="90%" InvalidStyleDuration="300"

Value='<%# Convert.ToDecimal(DataBinder.Eval(Container.DataItem, "Cost_Markup_Percent")) %>'

BorderStyle="None" Height="13px" EnableOldBoxModel="true" EnabledStyle-HorizontalAlign="Right"

IncrementSettings-InterceptArrowKeys="false">

<NumberFormat AllowRounding="true" KeepNotRoundedValue="False" />

</telerik:RadNumericTextBox>

</ItemTemplate>

<HeaderStyle Wrap="false" HorizontalAlign="Right" Width="130" />

<ItemStyle Wrap="false" HorizontalAlign="Right" Width="130" />

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn HeaderText="Unit Price" SortExpression="" UniqueName="tmpcolUnit_Price"

FilterControlAltText="Filter tmpcolUnit_Price column" Groupable="false">

<ItemTemplate>

<telerik:RadNumericTextBox ID="_radnumUnit_Price" runat="server" EmptyMessage=""

ShowSpinButtons="false" Type="Number" Width="90%" InvalidStyleDuration="300"

Value='<%# Convert.ToDecimal(DataBinder.Eval(Container.DataItem, "Unit_Price")) %>'

BorderStyle="None" EnableEmbeddedSkins="false" Skin="None" Height="13px" EnableOldBoxModel="true"

EnabledStyle-HorizontalAlign="Right" IncrementSettings-InterceptArrowKeys="false">

<NumberFormat AllowRounding="true" KeepNotRoundedValue="False" />

</telerik:RadNumericTextBox>

</ItemTemplate>

<HeaderStyle Wrap="false" HorizontalAlign="Right" Width="130" />

<ItemStyle Wrap="false" HorizontalAlign="Right" Width="130" />

</telerik:GridTemplateColumn>

<telerik:GridNumericColumn DataField="LineAmountText" DataType="System.Decimal" FilterControlAltText="Filter LineAmountText column"

HeaderText="Line Amount" SortExpression="LineAmountText" UniqueName="LineAmountText"

DataFormatString="{0:#,0.#0;-#,0.#0; }">

<HeaderStyle HorizontalAlign="right" Width="120" />

<ItemStyle HorizontalAlign="right" />

</telerik:GridNumericColumn>

<telerik:GridTemplateColumn HeaderText="Vendor" SortExpression="" UniqueName="tmpcolVendor"

FilterControlAltText="Filter tmpcolVendor column" Groupable="false">

<ItemTemplate>

<telerik:RadTextBox runat="server" ID="_radtxtVendor" Text='<%# DataBinder.Eval(Container.DataItem, "Vendor") %>'

MaxLength="50" TextMode="SingleLine" BorderStyle="none" Width="335">

</telerik:RadTextBox>

</ItemTemplate>

<HeaderStyle Wrap="false" HorizontalAlign="Left" Width="350" />

<ItemStyle Wrap="false" HorizontalAlign="Left" Width="350" />

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn HeaderText="Remarks" SortExpression="" UniqueName="tmpcolRemarks"

FilterControlAltText="Filter tmpcolRemarks column" Groupable="false">

<ItemTemplate>

<telerik:RadTextBox runat="server" ID="_radtxtRemarks" Text='<%# DataBinder.Eval(Container.DataItem, "Remarks") %>'

MaxLength="50" TextMode="SingleLine" BorderStyle="none" Width="335">

</telerik:RadTextBox>

</ItemTemplate>

<HeaderStyle Wrap="false" HorizontalAlign="Left" Width="350" />

<ItemStyle Wrap="false" HorizontalAlign="Left" Width="350" />

</telerik:GridTemplateColumn>

</Columns>

<EditFormSettings UserControlName="../controls/project/costing_lines.ascx" EditFormType="WebUserControl"

InsertCaption="Add new item" CaptionFormatString="Edit Item No.:<span style='font-weight:bold'> {0} </span>"

CaptionDataField="No">

<PopUpSettings Width="870" Modal="true" CloseButtonToolTip="Close" />

</EditFormSettings>

<CommandItemSettings ShowAddNewRecordButton="false" />

<CommandItemTemplate>

<div style="text-align: left; vertical-align: middle; padding-left: 30px; table-layout: fixed">

<telerik:RadButton ID="_btnUpdateAll" runat="server" Text="Update All..." EnableEmbeddedSkins="false"

Skin="mscSkinOffice" OnClientClicking="OnClientClicking" AutoPostBack="false"

ButtonType="StandardButton">

<Icon PrimaryIconUrl="../site_images/_right_arrow.png" PrimaryIconTop="5px" PrimaryIconLeft="7px"

PrimaryHoveredIconUrl="../site_images/_right_arrow.png" SecondaryIconTop="5px"

SecondaryIconRight="7px" SecondaryIconUrl="../site_images/_left_arrow.png" SecondaryHoveredIconUrl="../site_images/_left_arrow.png" />

</telerik:RadButton>

</div>

</CommandItemTemplate>

</MasterTableView>

<ClientSettings Scrolling-UseStaticHeaders="true" AllowDragToGroup="false">

<Selecting AllowRowSelect="false" />

<Scrolling AllowScroll="true" UseStaticHeaders="true" FrozenColumnsCount="1" SaveScrollPosition="false" />

<ClientEvents OnPopUpShowing="PopUpShowing" />

</ClientSettings>

<HeaderStyle />

<AlternatingItemStyle />

<ItemStyle />

<PagerStyle Mode="NextPrev" PagerTextFormat="{4} Page <strong>{0}</strong> of <strong>{1}</strong>." />

</telerik:RadGrid>

Please Suggest to me.

Version: 2011.3 1305 Jan 5, 2012 (HotFixed)

Regards,
Alex

1 Answer, 1 is accepted

answered on 07 Mar 2012, 11:49 AM

RadButtonPositioning.zip

Hello Alex,

From the attached screenshots it appears that you have encountered the IE6/7 positioning bug that is described in the linked forum thread. This help article also contains information on the problem at hand. Have you tried applying position relative the container HTML element in the RadGrid, as suggested in the forum thread?

<style type="text/css">

.RadGrid .rgDataDiv

{

position: relative;

}

</style>

I have attached a sample page, demonstrating the presented solution. You can use it as a reference for your further development.

If you are still having difficulties after checking the information above, please describe the modifications that should be applied to the attached sample in order to reproduce the issue at hand so that I can provide an according solution.

Regards,
Slav
the Telerik team

If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.