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

Splitter with Grid scrolling

4 Answers 84 Views
Splitter
This is a migrated thread and some comments may be shown as answers.
luc bonenfant
Top achievements
Rank 1
luc bonenfant asked on 09 Nov 2009, 09:44 AM
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;  
 
        }  
    }  
}  
 

4 Answers, 1 is accepted

Sort by
0
luc bonenfant
Top achievements
Rank 1
answered on 10 Nov 2009, 10:26 AM
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.
0
Iana Tsolova
Telerik team
answered on 12 Nov 2009, 11:01 AM
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.
0
luc bonenfant
Top achievements
Rank 1
answered on 12 Nov 2009, 11:24 AM
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.

0
Iana Tsolova
Telerik team
answered on 16 Nov 2009, 11:45 AM
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.
Tags
Splitter
Asked by
luc bonenfant
Top achievements
Rank 1
Answers by
luc bonenfant
Top achievements
Rank 1
Iana Tsolova
Telerik team
Share this question
or