Splitter with Grid scrolling

5 posts, 0 answers
  1. luc bonenfant
    luc bonenfant avatar
    53 posts
    Member since:
    Sep 2007

    Posted 09 Nov 2009 Link to this post

    Hello,

    This test brings to light a problem to view all the data in the RadGrid. Grid contents 10 fields, but horizontal grid scrolling don't show all of them.
    If I move the splitter bar, I can see more or less of the content, and i don't want Splitter interferes to display columns.
    I'm using Q2 2009.

    Thank you for help.

    <%@ Register TagPrefix="Telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %> 
    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="TestSplitterWithGrid._Default" %> 
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
     
    <html xmlns="http://www.w3.org/1999/xhtml" > 
    <head runat="server">  
        <title></title>  
    </head> 
    <body> 
        <form id="form1" runat="server">  
        <div> 
        <asp:ScriptManager ID="SC1" runat="server" /> 
     
        <telerik:RadSplitter id="RadSplitter_All" runat="server" Height="600" Width="800" orientation="Vertical" VisibleDuringInit="false">  
     
            <telerik:RadPane id="RadPane_Left" runat="server" Width="220" Scrolling="None">  
     
            </telerik:RadPane> 
     
            <telerik:RadSplitBar id="RadSplitbar_Vert" runat="server" CollapseMode="Forward" Width="22" /> 
              
            <telerik:RadPane id="RadPane_Right" runat="server" Width="100%" Scrolling="None">  
     
                <Telerik:RadGrid ID="RadGrid1" runat="server" Height="100%" Width="100%" 
                    AutoGenerateColumns="False" GridLines="None" AllowPaging="False"   
                    onneeddatasource="RadGrid1_NeedDataSource">  
                    <mastertableview> 
                        <Columns> 
                            <Telerik:GridBoundColumn DataField="DataField0" HeaderText="Field0" /> 
                            <Telerik:GridBoundColumn DataField="DataField1" HeaderText="Field1" /> 
                            <Telerik:GridBoundColumn DataField="DataField2" HeaderText="Field2" /> 
                            <Telerik:GridBoundColumn DataField="DataField3" HeaderText="Field3" /> 
                            <Telerik:GridBoundColumn DataField="DataField4" HeaderText="Field4" /> 
                            <Telerik:GridBoundColumn DataField="DataField5" HeaderText="Field5" /> 
                            <Telerik:GridBoundColumn DataField="DataField6" HeaderText="Field6" /> 
                            <Telerik:GridBoundColumn DataField="DataField7" HeaderText="Field7" /> 
                            <Telerik:GridBoundColumn DataField="DataField8" HeaderText="Field8" /> 
                            <Telerik:GridBoundColumn DataField="DataField9" HeaderText="Field9" /> 
                        </Columns> 
                    </mastertableview> 
                    <HeaderStyle Width="100" /> 
                    <clientsettings> 
                        <Scrolling AllowScroll="true" UseStaticHeaders="true" FrozenColumnsCount="3" /> 
                    </clientsettings> 
                </Telerik:RadGrid> 
     
            </telerik:RadPane> 
     
        </telerik:RadSplitter> 
     
        </div> 
        </form> 
    </body> 
    </html> 
     
    using System;  
    using System.Collections.Generic;  
    using System.Linq;  
    using System.Web;  
    using System.Web.UI;  
    using System.Web.UI.WebControls;  
    using System.Data;  
     
    namespace TestSplitterWithGrid  
    {  
        public partial class _Default : System.Web.UI.Page  
        {  
            protected void Page_Load(object sender, EventArgs e)  
            {  
            }  
     
            protected void RadGrid1_NeedDataSource(object source, Telerik.Web.UI.GridNeedDataSourceEventArgs e)  
            {  
                //AllData[] AD = GetData();  
                //RadGrid1.MasterTableView.DataSource = AD;  
     
     
                DataTable table = new DataTable();  
                table.Columns.Add("DataField0"typeof(string));  
                table.Columns.Add("DataField1"typeof(string));  
                table.Columns.Add("DataField2"typeof(string));  
                table.Columns.Add("DataField3"typeof(string));  
                table.Columns.Add("DataField4"typeof(string));  
                table.Columns.Add("DataField5"typeof(string));  
                table.Columns.Add("DataField6"typeof(string));  
                table.Columns.Add("DataField7"typeof(string));  
                table.Columns.Add("DataField8"typeof(string));  
                table.Columns.Add("DataField9"typeof(string));  
     
                table.Rows.Add("A0""A1""A2""A3""A4""A5""A5""A6""A8""A9");  
                table.Rows.Add("B0""B1""B2""B3""B4""B5""B5""B6""B8""B9");  
                table.Rows.Add("C0""C1""C2""C3""C4""C5""C5""C6""C8""C9");  
                table.Rows.Add("D0""D1""D2""D3""D4""D5""D5""D6""D8""D9");  
                table.Rows.Add("E0""E1""E2""E3""E4""E5""E5""E6""E8""E9");  
                table.Rows.Add("F0""F1""F2""F3""F4""F5""F5""F6""F8""F9");  
                table.Rows.Add("G0""G1""G2""G3""G4""G5""G5""G6""G8""G9");  
                table.Rows.Add("H0""H1""H2""H3""H4""H5""H5""H6""H8""H9");  
                table.Rows.Add("I0""I1""I2""I3""I4""I5""I5""I6""I8""I9");  
     
                RadGrid1.MasterTableView.DataSource = table;  
     
            }  
        }  
    }  
     
  2. luc bonenfant
    luc bonenfant avatar
    53 posts
    Member since:
    Sep 2007

    Posted 10 Nov 2009 Link to this post

    Can you help me about this please ?

    If you test this small project, you can't see the last columns (..., Field9, Field10) normally. I would like to see all the 10 columns (with first three columns frozen). I had the js event GridCreated to change ScrollWidth but it doesn't work anymore.

    Thank you for reply.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Iana Tsolova
    Admin
    Iana Tsolova avatar
    3388 posts

    Posted 12 Nov 2009 Link to this post

    Hello,

    Please try modifying your code as below and see if it works for you:

    <telerik:RadSplitter ID="RadSplitter_All" runat="server" Height="600px" Width="800px"
        Orientation="Vertical" VisibleDuringInit="false">
        <telerik:RadPane ID="RadPane_Left" runat="server" Width="220px" Scrolling="None">
        </telerik:RadPane>
        <telerik:RadSplitBar ID="RadSplitbar_Vert" runat="server" CollapseMode="Forward"
            Width="22px" />
        <telerik:RadPane ID="RadPane_Right" runat="server" Width="100%" Scrolling="None">
            <telerik:RadGrid ID="RadGrid1" runat="server" AutoGenerateColumns="False" OnNeedDataSource="RadGrid1_NeedDataSource"
                Height="100%">
                <MasterTableView>
                    <Columns>
                        <telerik:GridBoundColumn DataField="DataField0" HeaderText="Field0" />
                        <telerik:GridBoundColumn DataField="DataField1" HeaderText="Field1" />
                        <telerik:GridBoundColumn DataField="DataField2" HeaderText="Field2" />
                        <telerik:GridBoundColumn DataField="DataField3" HeaderText="Field3" />
                        <telerik:GridBoundColumn DataField="DataField4" HeaderText="Field4" />
                        <telerik:GridBoundColumn DataField="DataField5" HeaderText="Field5" />
                        <telerik:GridBoundColumn DataField="DataField6" HeaderText="Field6" />
                        <telerik:GridBoundColumn DataField="DataField7" HeaderText="Field7" />
                        <telerik:GridBoundColumn DataField="DataField8" HeaderText="Field8" />
                        <telerik:GridBoundColumn DataField="DataField9" HeaderText="Field9" HeaderStyle-Width="300px" />
                    </Columns>
                </MasterTableView>
                <HeaderStyle Width="100px" />
                <ClientSettings>
                    <Scrolling AllowScroll="true" UseStaticHeaders="true" FrozenColumnsCount="3" />
                </ClientSettings>
            </telerik:RadGrid>
        </telerik:RadPane>
    </telerik:RadSplitter>

    In order to display all columns when using frozen columns you need to increase the HeaderStyle Width of the last column in RadGrid. Thus you should be able to navigate to the leftmost column as expected to see the information in it.
    Additionally, please note that you need to consider the number of frozen columns with the width of the last column in the RadGrid control.

    All the best,
    Iana
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  5. luc bonenfant
    luc bonenfant avatar
    53 posts
    Member since:
    Sep 2007

    Posted 12 Nov 2009 Link to this post

    Yes, it's what I did, but when I move the scrolling to to the right, my last column reduces its width.
    It's not a big problem because if i take a large width, i always see the last column. But, in this case, the appearance is bad due to large space at the end, and the scroll is less handy.

    If there is no solution to view all columns normally (addition of columns widths only) when i resize grid with splitter, i will add a large width for the last column as you mention, no problem.

    Thank you.

  6. Iana Tsolova
    Admin
    Iana Tsolova avatar
    3388 posts

    Posted 16 Nov 2009 Link to this post

    Hello,

    Indeed, setting larger width for the last column is the only workaround for now. And you can try different width values in order to achieve desired result. However, we are working on improving the grid frozen columns functionality and hope we can find a better resolution of this issue.

    Greetings,
    Iana
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017