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

IE8 Hierarchical Grid : Footer Button Jumps/Disappears in DetailView

11 Answers 104 Views

Grid

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

Stuart asked on 06 Jun 2011, 09:57 AM

correctLayout.JPG

buttonissue.JPG

Hello

Having an issue using IE8 with my Grid. I have placed a "Confirm" button in the footer of the details view in my grid, the button is moving up and down the bages, and dissappear/reappearing , not stating in the grid footer. I have not seen this issue in Chrome / Firefox but IE8 is the default browser needed for this app. ANy Suggestion greatly appreciated

Thanks
Stuart

11 Answers, 1 is accepted

answered on 08 Jun 2011, 04:50 PM

<telerik:RadGrid ID="gvDefleetCapIds" runat="server" AllowSorting="True"

AutoGenerateColumns="False" CellSpacing="0" Font-Names="Verdana"

Font-Size="X-Small" GridLines="None"

ondetailtabledatabind="gvDefleetCapIds_DetailTableDataBind"

oneditcommand="gvDefleetCapIds_EditCommand"

onitemcommand="gvDefleetCapIds_ItemCommand"

onneeddatasource="gvDefleetCapIds_NeedDataSource"

onupdatecommand="gvDefleetCapIds_UpdateCommand" Width="1200px"

AllowPaging="True" PageSize="30" AllowCustomPaging="True">

<headercontextmenu cssclass="GridContextMenu GridContextMenu_Default">

</headercontextmenu>

<mastertableview autogeneratecolumns="False" cellspacing="0"

datakeynames="CapID,Year,Plate" font-names="Verdana" font-size="X-Small">

<DetailTables>

<telerik:GridTableView AutoGenerateColumns="False"

DataKeyNames="RegNumber" Font-Names="Verdana" Font-Size="X-Small"

Name="TheVehicles" PageSize="10" ShowFooter="true">

<HeaderStyle BackColor="Aqua" ForeColor="DarkGray"

HorizontalAlign="Justify" />

<CommandItemSettings ExportToPdfText="Export to PDF" />

<RowIndicatorColumn FilterControlAltText="Filter RowIndicator column">

</RowIndicatorColumn>

<ExpandCollapseColumn FilterControlAltText="Filter ExpandColumn column">

</ExpandCollapseColumn>

<Columns>

<telerik:GridEditCommandColumn

UniqueName="EditCommandColumn">

</telerik:GridEditCommandColumn>

<telerik:GridBoundColumn DataField="RegNumber" HeaderText="RegNumber">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="Mileage" HeaderText="Mileage">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="CAPListPrice" HeaderText="CAP_Price">

</telerik:GridBoundColumn>

<telerik:GridTemplateColumn FooterStyle-HorizontalAlign="Right" FooterStyle-VerticalAlign="Bottom" >

<FooterTemplate>

<telerik:RadButton ID="confirm" runat="server" CssClass="UpdateButton"

OnClick="RadButton2_Click" Skin="WebBlue" Text="Confirm Changes" Visible="true">

</telerik:RadButton>

</FooterTemplate>

</telerik:GridTemplateColumn>

</Columns>

<%-- <ItemStyle CssClass="RadGrid" />--%>

<EditFormSettings EditFormType="Template">

<EditColumn FilterControlAltText="Filter EditCommandColumn1 column"

UniqueName="EditCommandColumn1">

</EditColumn>

<FormTemplate>

<table ID="Table2" border="0" cellpadding="1" cellspacing="2" rules="none"

style="border-collapse: collapse; background: white;" width="100%">

<tr>

<td>

<b>Update Mileage</b>

</td>

</tr>

<tr>

<td>

<table ID="Table3">

<tr>

<td>

<asp:Label ID="Label2" runat="server" Text="RegNo: "></asp:Label>

</td>

<td>

<asp:Label ID="lbl1" runat="server" Text='<%# Bind("RegNumber") %>'></asp:Label>

</td>

</tr>

<tr>

<td>

<asp:Label ID="Label3" runat="server" Text="Mileage: "></asp:Label>

</td>

<td>

<asp:TextBox ID="TextBox7" runat="server" Text='<%# Bind("Mileage") %>'>

</asp:TextBox>

</td>

<td align="right">

<asp:Button ID="Button1" runat="server"

CommandName='<%# (Container is GridEditFormInsertItem) ? "PerformInsert" : "Update" %>'

Text='<%# (Container is GridEditFormInsertItem) ? "Insert" : "Update" %>' />

<asp:Button ID="Button2" runat="server" CausesValidation="False"

CommandName="Cancel" Text="Cancel" />

</td>

</tr>

</table>

</td>

</tr>

</table>

</FormTemplate>

</EditFormSettings>

<FooterStyle HorizontalAlign="Right" />

</telerik:GridTableView>

</DetailTables>

<CommandItemSettings ExportToPdfText="Export to PDF" />

<RowIndicatorColumn FilterControlAltText="Filter RowIndicator column">

</RowIndicatorColumn>

<ExpandCollapseColumn FilterControlAltText="Filter ExpandColumn column"

Visible="True">

</ExpandCollapseColumn>

<Columns>

<telerik:GridBoundColumn DataField="CapID"

FilterControlAltText="Filter column2 column" HeaderText="CapID"

UniqueName="column2">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="V_Description"

FilterControlAltText="Filter column1 column" HeaderText="V_Description"

UniqueName="column1">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="Units"

FilterControlAltText="Filter column6 column" HeaderText="Units"

UniqueName="column6">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="Price"

FilterControlAltText="Filter column3 column" HeaderText="CAP_Price"

UniqueName="column3">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="Plate"

FilterControlAltText="Filter column column" HeaderText="Plate"

UniqueName="column">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="Year"

FilterControlAltText="Filter column4 column" HeaderText="Year"

UniqueName="column4">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn Aggregate="Sum" DataField="AvgMiles"

FilterControlAltText="Filter column5 column" HeaderText="AvgMiles"

UniqueName="column5">

</telerik:GridBoundColumn>

<telerik:GridButtonColumn ButtonType="ImageButton" CommandName="Delete"

ConfirmDialogType="RadWindow" ConfirmText="Delete this CAPID ?"

ConfirmTitle="Confirm Delete" Text="Delete" UniqueName="DeleteColumn">

<ItemStyle CssClass="DeleteButton" HorizontalAlign="Center" />

</telerik:GridButtonColumn>

</Columns>

<EditFormSettings>

<EditColumn FilterControlAltText="Filter EditCommandColumn column">

</EditColumn>

</EditFormSettings>

</mastertableview>

<%-- <clientsettings>

<Scrolling AllowScroll="True" ScrollHeight="625px" />

</clientsettings>--%>

<filtermenu enableimagesprites="False">

</filtermenu>

</telerik:RadGrid

>





I Cant seeem to click off this code block... :( 



Thanks for the replay Iana,

Above is the radgrid markup, I do have a cssClass on that button CssClass="UpdateButton"  in the footer

I will remove that. I wont be able to report if this worked until Monday coming. I will post my findings.



Thanks

Stuart

answered on 10 Jun 2011, 12:13 PM

HgridonChrome.JPG


 

 
.UpdateButton


 

 
 

{
 

background: red 
;


 

 
 
 
 
}

Unfortunatley the UpdateButton class has nothing to it...it was never really fully used so it may not be the source of the issue. Attached is the Hierarchical Grid in chrome , which is rendered the full sie of the grid, which is what would be expected.

Thanks
Stuart

answered on 15 Jun 2011, 10:41 AM

2011-06-15-1238.png

RadGridButtonIssue.zip

Hello Stuart,

You are right that the css class is not the reason for the issue.
However I added the code to a runnable sample and it works find on my side (attached an image). Can you run the sample and let me know how it goes on your end?

Kind regards,
Iana
the Telerik team

Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

answered on 25 Aug 2011, 02:26 PM

Hello Stuart,

You can try using Firebug for Firefox and the Web Developer for IE (both activated with F12) to inspect the rendered html elements and see what styles are applied to them. The tool give you the ability to disable certain css properties for testing purposes, so I believe using them you will be able to find what is the difference in the rendering and where the issue comes from.

Greetings,
Iana
the Telerik team

Thank you for being the most amazing .NET community! Your unfailing support is what helps us charge forward! We'd appreciate your vote for Telerik in this year's DevProConnections Awards. We are competing in mind-blowing 20 categories and every vote counts! VOTE for Telerik NOW >>