RadGrid Display Issue

[Ana]

Hi there,

I am very new to Telerik controls basically because I have never used it and now I have to as I am supporting an application which uses Telerik controls. Issue: Issue is with the RadGrid control which is not displaying properly with proper width, border and vertical scroll bar. It was working fine and all of sudden this started to happen. The issue is in our DEV system and all good at the production. As I compared the rendered markups with the two systems I found that both are different. I have attached the screenshots of both pages.

Telerik control version: 2012.1.411.40

Below is the code snippet from the affected page that has two RadGrid controls side-by-side and other controls to add / remove items from the first grid to the second one.

<table border="0" cellPadding="0" cellspacing="4" runat="server">
<tr>
<td>
<telerik:RadGrid ID="RadGridLeft" runat="server" gridlines="None" width="365px" height="200px" showheader="False" BackColor="White" >
<MasterTableView AutoGenerateColumns="False" DataKeyNames="Value" >
<NoRecordsTemplate>
<p>Please select a value from the right column to remove from the search criteria. </p>
Use > button to add checked item(s) to the list.<br />
Use >> button to add all items to the list.<br />
Use < button to remove checked item(s) from the list.<br />
Use << button to remove all items from the list.<br />
</NoRecordsTemplate>
<RowIndicatorColumn Visible="False">
<HeaderStyle Width="20px"></HeaderStyle>
</RowIndicatorColumn>
<ExpandCollapseColumn Visible="False" Resizable="False">
<HeaderStyle Width="20px"></HeaderStyle>
</ExpandCollapseColumn>
<Columns>
<telerik:GridBoundColumn DataField="Value" DataType="System.Int32" ReadOnly="True" UniqueName="Value" Visible="false" />
<telerik:GridBoundColumn DataField="Text" ReadOnly="True" UniqueName="Text" Visible="false" />
<telerik:GridTemplateColumn >
<ItemTemplate>
<asp:CheckBox runat="server" ID="chkLeft" />&nbsp;&nbsp;
<asp:Label runat="server" ID="lblText" Text='<%#Eval("Text") %>' />
</ItemTemplate>
</telerik:GridTemplateColumn>
</Columns>
<EditFormSettings>
<PopUpSettings ScrollBars="None"></PopUpSettings>
</EditFormSettings>
</MasterTableView>
<ClientSettings>
<Scrolling AllowScroll="True" UseStaticHeaders="True" />
</ClientSettings>
</telerik:RadGrid>
</td>
<td>
<asp:Button ID="btnAdd" runat="server" CssClass="defaultButton" Text=">" ToolTip="Add Selected Country(s)" /><br />
<asp:Button ID="btnAddAll" runat="server" CssClass="defaultButton" Text=">>" ToolTip="Add All Countries" /><br />
<asp:Button ID="btnRemove" runat="server" CssClass="defaultButton" Text="<" ToolTip="Remove Selected Country(s)" /><br />
<asp:Button ID="btnRemoveAll" runat="server" CssClass="defaultButton" Text="<<" ToolTip="Remove All Countries" />
</td>
<td>
<telerik:RadGrid id="RadGridRight" runat="server" gridlines="None" width="365px" height="200px" showheader="False" BackColor="White">
<MasterTableView AutoGenerateColumns="False" DataKeyNames="Value">
<NoRecordsTemplate>
<p>Please select a value from the left column to add to the search criteria.</p>
Use > button to add checked item(s) to the list.<br />
Use >> button to add all items to the list.<br />
Use < button to remove checked item(s) from the list.<br />
Use << button to remove all items from the list.<br />
</NoRecordsTemplate>
<RowIndicatorColumn Visible="False">
<HeaderStyle Width="20px"></HeaderStyle>
</RowIndicatorColumn>
<ExpandCollapseColumn Visible="False" Resizable="False">
<HeaderStyle Width="20px"></HeaderStyle>
</ExpandCollapseColumn>
<Columns>
<telerik:GridBoundColumn DataField="Value" DataType="System.Int32" ReadOnly="True" UniqueName="Value" Visible="false" />
<telerik:GridBoundColumn DataField="Text" ReadOnly="True" UniqueName="Text" Visible="false" />
<telerik:GridTemplateColumn >
<ItemTemplate>
<asp:CheckBox runat="server" ID="chkRight" />&nbsp;&nbsp;
<asp:Label runat="server" ID="lblText" Text='<%#Eval("Text") %>' />
</ItemTemplate>
</telerik:GridTemplateColumn>
</Columns>
<EditFormSettings>
<PopUpSettings ScrollBars="None"></PopUpSettings>
</EditFormSettings>
</MasterTableView>
<ClientSettings>
<Selecting AllowRowSelect="True" />
<Scrolling AllowScroll="True" UseStaticHeaders="True" />
</ClientSettings>
</telerik:RadGrid>
</td>
</tr>
</table>

 

Your help would be much appreciated. Please let me know should you require further details.

Thanks & Regards,

A ​ ​

[Viktor Tachev]

Hello,

I examined the provided code, however, I do not see something that would cause the behavior from the screenshot. Would you disable any custom CSS that is applied on the page and see ho the behavior changes?

On a side note, in order to implement the functionality you should consider using a RadListBox control. It supports moving items between two RadListBox controls out of the box.

Check out the online demo below that illustrates how the control works.

• http://demos.telerik.com/aspnet-ajax/listbox/examples/overview/defaultcs.aspx

Regards,
Viktor Tachev
Telerik