I used the following code to display data in a radwindow, which contains a repeater control. But the columns on one row shifted, as can be seen from the attachment. The same works fine on IE8. Does anybody know how to fix this issue? I am using Telerik for asp.net ajax version 2012.3.1308.35
<telerik:RadWindow ID="rwinDetail" runat="server" RestrictionZoneID="ContentTemplateZone" Modal="false" Width="450" Height="300" Behaviors="Close,Move,Resize,Minimize" Visible="True"> <ContentTemplate> <div style="font-size:small;" id="rwinDetail"> <asp:Repeater ID="repDetail" runat="server">
<HeaderTemplate> <table id="tableDetail" cellspacing="0" cellpadding="0">
<tr>
<td colspan="2">
<asp:Button
ID="btnDetail"
runat="server"
CommandArgument='<%#Eval("Code") %>'
CommandName="DisplayAll"
Text="Display All"
Font-Size="Small"
Font-Bold="True" />
</td>
<td style="visibility:hidden"></td>
<td style="text-align:left; font-weight:bold;"><asp:Button ID="btnPrintQuality" runat="server" Text="" CssClass="ButtonsLink" /></td> </tr>
<tr>
<th style="border:solid 1px;">JID</th>
<th style="border:solid 1px; border-left:none;"> CODE</th>
<th style="border:solid 1px; border-left:none;"> ACTIVE</th>
<th style="border:solid 1px; border-left:none;"> STATUS</th>
</tr> </HeaderTemplate> <ItemTemplate> <tr id="trDetail">
<td style="border:solid 1px; border-top:none;">
<asp:Button ID="btnDettt" runat="server"
CommandArgument='<%#Eval("Code")%>
CssClass="ButtonsLink"
Text='<%#DataBinder.Eval(Container.DataItem, "JID") %>' Font-Size="Small" />
</td>
<td style="border-bottom:solid 1px; border-right:solid 1px;">
<asp:Label ID="lbCode" runat="server" Text='<%#DataBinder.Eval(Container.DataItem, "Code") %>' Font-Size="Small" />
</td>
<td style="border-bottom:solid 1px; border-right:solid 1px;">
<asp:Label ID="lbActive" runat="server" Text='<%#DataBinder.Eval(Container.DataItem, "Active") %>' Font-Size="Small" />
</td>
<td style="border-bottom:solid 1px; border-right:solid 1px;">
<asp:Label ID="lbStatus" runat="server" Text='<%#DataBinder.Eval(Container.DataItem, "Status") %>' Font-Size="Small" />
</td>
</tr> </ItemTemplate> <FooterTemplate></table></FooterTemplate>
</asp:Repeater>
</div>
</ContentTemplate>
</telerik:RadWindow>
7 Answers, 1 is accepted
Hi John,
This code would not compile because an apostrophe is missing on the button declaration:
<asp:Button ID="btnDettt" runat="server" CommandArgument='<%#Eval("Code")%>' CssClass="ButtonsLink" Text='<%#DataBinder.Eval(Container.DataItem, "JID") %>' Font-Size="Small" />That aside, there should be no difference between the code in a RadWindow and out of it. Can you confirm that the repeater renders as expected outside of a RadWindow?
On my end it does in both cases, which leads me to believe the issue lies with the page itself. Here are some ideas that can be helpful:
- make sure the page has a valid doctype. Xhtml 1.0 Transitional is one of the most forgiving and easiest to satisfy
- make sure the page HTML is valid
- make sure that no CSS is interfering with the repeater
- try with different data, if the original data contains some (invalid) HTML, it could break the repeater. Judging from the screenshot, the second record's Code field may be causing the problem
- try upgrading to the latest Telerik controls version to see if this helps. The version you have is quite old and does not support modern browsers
Regards,
Marin BratanovTelerik
See What's Next in App Development. Register for TelerikNEXT.
Rank 1
Marin, thanks for your reply. Please see my answers below:
Can you confirm that the repeater renders as expected outside of a RadWindow?
>>>Yes, the repeater renders normally outside of a RadWindow.
make sure the page has a valid doctype. Xhtml 1.0 Transitional is one of the most forgiving and easiest to satisfy. make sure the page HTML is valid.
>>>I tried <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> and <!DOCTYPE html>, but got the same results
make sure that no CSS is interfering with the repeater
>>>no CSS interference
try with different data, if the original data contains some (invalid) HTML, it could break the repeater. Judging from the screenshot, the second record's Code field may be causing the problemtry
>>>I tried just put simple characters such ABC on each column, but still got the same results. The rows which have shifted columns are random. Sometimes it's row 3, sometiems it's row 9. There are not just one row with the issue.
upgrading to the latest Telerik controls version to see if this helps. The version you have is quite old and does not support modern browsers
>>>I installed the latest version 2015.1.401.35 but still got the same issue
Rank 1
Rank 1
It seems the issue was caused by the following codes:
<telerik:AjaxSetting AjaxControlID="repD">
<UpdatedControls>
<telerik:AjaxUpdatedControl ControlID="repDetail" />
</UpdatedControls>
</telerik:AjaxSetting>
How can we solve this problem? If i don't include the above codes, the data will not show up in the repeater repDetail
Hi John,
Adding that AJAX setting should only wrap the repeater in a div element, as this is how RadAjax renders its UpdatePanels by default. Thus, it should not result in such a behavior change.
I tried the code again with AJAX settings in the picture and I am attaching the test case I build here as a reference, so you can compare it with yours.
In the meantime, I can suggest trying an asp:UpdatePanel instead to see if it makes a difference. You can use its AsyncTriggers collection to add the external control, or its Update() server method in case its UpdateMode==Conditional.
Regards,
Telerik
See What's Next in App Development. Register for TelerikNEXT.
Rank 1
hi Marin, can you post a sample code for using the asp:UpdatePanel with RadWindow, repeater? In another word, where should i put the asp:UpdatePanel in the codes of the first post. Also, when we use AjaxSettings, if the number of reocrds is small, it's fine. But if the number of records is big, for example, 200, the columns on some rows will shift
Hello John,
The following article treats using a RadWindow with AJAX: http://www.telerik.com/help/aspnet-ajax/window-ajaxifying.html.
Here is a basic example of how to use it, based on my previous sample. It does the same thing, but with asp:UpdatePanel instead of RadAjax:
<asp:Button ID="repD" Text="repD" OnClick="repD_Click" runat="server" /><telerik:RadWindow ID="rwinDetail" runat="server" RestrictionZoneID="ContentTemplateZone" Modal="false" Width="450" Height="300" Behaviors="Close,Move,Resize,Minimize" Visible="True"> <ContentTemplate> <asp:UpdatePanel ID="Updatepanel1" runat="server"> <Triggers> <asp:AsyncPostBackTrigger ControlID="repD" /> </Triggers> <ContentTemplate> <div style="font-size:small;" id="Div1"> <asp:Repeater ID="repDetail" runat="server"> . . . . </asp:Repeater> </div> </ContentTemplate> </asp:UpdatePanel> </ContentTemplate></telerik:RadWindow> Regards, Marin Bratanov
Telerik
See What's Next in App Development. Register for TelerikNEXT.