RadGrid Display Issue

2 posts, 0 answers
  1. Ana
    Ana avatar
    1 posts
    Member since:
    Jun 2015

    Posted 21 Jun 2015 Link to this post

    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 ​ ​

  2. Viktor Tachev
    Admin
    Viktor Tachev avatar
    2286 posts

    Posted 23 Jun 2015 Link to this post

    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.




    Regards,
    Viktor Tachev
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top