Horizontal and vertical scoller

[Francis]

Hi,

here is what I want for my RadGrid :

• fixed width -> ok
• all rows with same heigth -> ok
• horizontal scoller -> ok
• no vertical scoller -> ko
• dynamic grid heigth -> ko

I can set the height of my grid because all rows have the same height. But users can change the number of displayed lines. And in this case, the heigth of the grid don't change and a vertical scroller appears.

Is it possible that the grid automatically set its heigth from its content ?


Thank you

[Pavlina]

Hi Francis,

If you want the RadGrid control to expand vertically, depending on the number of its rows, you can use the following CSS rule:

<style type="text/css">
        .MyGridClass .rgDataDiv
        {
            height: auto !important;
        }
    </style>

"MyGridClass" is some custom CSS class to the RadGrid control, that you should set to prevent the CSS rule be applied to all RadGrid instances on the page / website.

Greetings,
Pavlina
the Telerik team

[Francis]

Hi Pavlina,

nice, it works great without the trick with the "custom class". With just :

<style type="text/css">

.rgDataDiv

{

height: auto!important;

}

</style>It's ok, but with :


It works fine. But with :

<style type="text/css">
.MyClass .rgDataDiv
{
height: auto!important;
}
</style>

and


<telerik:RadGrid class="MyClass" ...

it doesn't work. Any idea ?

And there is a bug with IE9. I made a little video but I can't attach them to my post. I will try to explain.

When the mouse "enter" in the grid, an extra blank line shown between last row and footer. And each time the mouse pass on another row, an extra blank line shown. Very strange.

I use Telerik version 4.0.30319 and IE 9.0.8112.16421 (on Windows 7 64 bits).

Here is the code of my grid :

<telerik:RadGrid ID="RadGrid1" runat="server" AutoGenerateColumns="false" OnNeedDataSource="RadGrid_NeedDataSource"
AllowFilteringByColumn="True" AllowPaging="True" AllowSorting="True" ShowStatusBar="True"
Width="800px">
<PagerStyle Mode="NextPrevAndNumeric" />
<ClientSettings EnableRowHoverStyle="True" EnablePostBackOnRowClick="True">
<Scrolling AllowScroll="true" UseStaticHeaders="true" SaveScrollPosition="true" />
</ClientSettings>
<MasterTableView AutoGenerateColumns="False" TableLayout="Auto">
<RowIndicatorColumn FilterControlAltText="Filter RowIndicator column">
<HeaderStyle Width="20px"></HeaderStyle>
</RowIndicatorColumn>
<ExpandCollapseColumn FilterControlAltText="Filter ExpandColumn column">
<HeaderStyle Width="20px"></HeaderStyle>
</ExpandCollapseColumn>
<Columns>
<telerik:GridNumericColumn HeaderText="Num. élève" DataField="NumEleve" UniqueName="NumEleve"
SortExpression="NumEleve" ShowFilterIcon="false" />
<telerik:GridBoundColumn HeaderText="Nom" DataField="Nom" UniqueName="Nom" SortExpression="Nom"
DataFormatString="<nobr>{0}</nobr>" />
<telerik:GridBoundColumn HeaderText="Prénom" DataField="Prenom" UniqueName="Prenom"
SortExpression="Prenom" ShowFilterIcon="false" DataFormatString="<nobr>{0}</nobr>" />
<telerik:GridBoundColumn HeaderText="Prénom" DataField="Prenom" UniqueName="Prenom1"
SortExpression="Prenom" ShowFilterIcon="false" DataFormatString="<nobr>{0}</nobr>" />
<telerik:GridBoundColumn HeaderText="Prénom" DataField="Prenom" UniqueName="Prenom2"
SortExpression="Prenom" ShowFilterIcon="false" DataFormatString="<nobr>{0}</nobr>" />
<telerik:GridBoundColumn HeaderText="Prénom" DataField="Prenom" UniqueName="Prenom3"
SortExpression="Prenom" ShowFilterIcon="false" DataFormatString="<nobr>{0}</nobr>" />
<telerik:GridDateTimeColumn HeaderText="Date nais." DataField="DateDeNaissance" UniqueName="DateDenaissance"
SortExpression="DateDeNaissance" ShowFilterIcon="false" DataFormatString="<nobr>{0:dd.MM.yyyy}</nobr>"
FilterControlWidth="100px" />
</Columns>
</MasterTableView>
</telerik:RadGrid>

[Princy]

Hello Francis,

In order to use CustomClass you should use CssClass property in RadGrid.
aspx:

<telerik:RadGrid   CssClass="MyClass" . . . . >
 . . . .
</telerik:RadGrid>

Thanks,
Princy.

[Francis]

Oh, sorry, my mistake. Thank you !

And what about the bug in IE9 ?

[Pavlina]

Hi Francis,

Can you reproduce the described IE9  issue in one of the scrolling demos of our RadGrid control?

All the best,
Pavlina
the Telerik team

[Francis]

Hi Pavlina,

no, I can't reproduce the problem on the demos. Here is the code to reproduce it :

BugIE9.aspx :

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="BugIE9.aspx.cs" Inherits="DEmosTelerik.BugIE9" %>

<!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>
    <style type="text/css">
        .LargeGridClass .rgDataDiv
        {
            height: auto !important;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager ID="RadScriptManager1" runat="server"></telerik:RadScriptManager>
    <div>
        <telerik:RadGrid CssClass="LargeGridClass" ID="RadGrid1" runat="server" AutoGenerateColumns="false"
            OnNeedDataSource="RadGrid_NeedDataSource" AllowFilteringByColumn="True" AllowPaging="True"
            AllowSorting="True" ShowStatusBar="True" Width="800px">
            <PagerStyle Mode="NextPrevAndNumeric" />
            <ClientSettings EnableRowHoverStyle="True" EnablePostBackOnRowClick="True">
                <Scrolling AllowScroll="true" UseStaticHeaders="true" SaveScrollPosition="true" />
            </ClientSettings>
            <MasterTableView AutoGenerateColumns="False" TableLayout="Auto">
                <Columns>
                    <telerik:GridBoundColumn HeaderText="Num. élève" DataField="NumStudent" UniqueName="NumStudent"
                        SortExpression="NumStudent" ShowFilterIcon="false" AutoPostBackOnFilter="true" />
                    <telerik:GridBoundColumn HeaderText="Nom" DataField="Nom" UniqueName="Nom" SortExpression="Nom"
                        ShowFilterIcon="false" DataFormatString="<nobr>{0}</nobr>" AutoPostBackOnFilter="true"
                        FilterControlWidth="100%" />
                    <telerik:GridBoundColumn HeaderText="Prénom" DataField="Prenom" UniqueName="Prenom"
                        SortExpression="Prenom" ShowFilterIcon="false" DataFormatString="<nobr>{0}</nobr>"
                        AutoPostBackOnFilter="true" FilterControlWidth="100%" />
                    <telerik:GridBoundColumn HeaderText="Prénom" DataField="Prenom" UniqueName="Prenom1"
                        SortExpression="Prenom" ShowFilterIcon="false" DataFormatString="<nobr>{0}</nobr>"
                        AutoPostBackOnFilter="true" FilterControlWidth="100%" />
                    <telerik:GridBoundColumn HeaderText="Prénom" DataField="Prenom" UniqueName="Prenom2"
                        SortExpression="Prenom" ShowFilterIcon="false" DataFormatString="<nobr>{0}</nobr>"
                        AutoPostBackOnFilter="true" FilterControlWidth="100%" />
                    <telerik:GridBoundColumn HeaderText="Prénom" DataField="Prenom" UniqueName="Prenom3"
                        SortExpression="Prenom" ShowFilterIcon="false" DataFormatString="<nobr>{0}</nobr>"
                        AutoPostBackOnFilter="true" FilterControlWidth="100%" />
                    <telerik:GridDateTimeColumn HeaderText="Date nais." DataField="DateDeNaissance" UniqueName="DateDenaissance"
                        SortExpression="DateDeNaissance" ShowFilterIcon="false" DataFormatString="<nobr>{0:dd.MM.yyyy}</nobr>"
                        AutoPostBackOnFilter="true" FilterControlWidth="100px" />
                </Columns>
            </MasterTableView>
        </telerik:RadGrid>
    </div>
    </form>
</body>
</html>

BugIE9.aspx.cs :

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace DEmosTelerik
{
    public partial class BugIE9 : System.Web.UI.Page
    {

        protected void RadGrid_NeedDataSource(object source, Telerik.Web.UI.GridNeedDataSourceEventArgs e)
        {
            List<Student> Students = new List<Student>();

            Students.Add(new Student(1, "Garnier né par ici, pas encore mort, ça va les gars ????", "Francis", new DateTime(1972, 11, 15)));
            Students.Add(new Student(2, "Derouwaux", "Sylvie", new DateTime(1977, 12, 5)));
            Students.Add(new Student(3, "Godet", "Olivier, bla bla bla bla bla lba bla", new DateTime(1972, 11, 9)));
            Students.Add(new Student(4, "Garnier", "Gunnar", new DateTime(1970, 3, 23)));
            Students.Add(new Student(5, "Garnier", "Francis", new DateTime(1972, 11, 15)));
            Students.Add(new Student(6, "Derouwaux", "Sylvie", new DateTime(1977, 12, 5)));
            Students.Add(new Student(7, "Godet", "Olivier", new DateTime(1972, 11, 9)));
            Students.Add(new Student(8, "Garnier", "Gunnar", new DateTime(1970, 3, 23)));
            Students.Add(new Student(9, "Garnier", "Francis", new DateTime(1972, 11, 15)));
            Students.Add(new Student(10, "Derouwaux", "Sylvie", new DateTime(1977, 12, 5)));
            Students.Add(new Student(11, "Godet", "Olivier", new DateTime(1972, 11, 9)));
            Students.Add(new Student(12, "Garnier", "Gunnar", new DateTime(1970, 3, 23)));
            Students.Add(new Student(13, "Garnier", "Francis", new DateTime(1972, 11, 15)));
            Students.Add(new Student(14, "Derouwaux", "Sylvie", new DateTime(1977, 12, 5)));
            Students.Add(new Student(15, "Godet", "Olivier", new DateTime(1972, 11, 9)));
            Students.Add(new Student(16, "Garnier", "Gunnar", new DateTime(1970, 3, 23)));
            Students.Add(new Student(17, "Derouwaux", "Sylvie", new DateTime(1977, 12, 5)));
            Students.Add(new Student(18, "Godet", "Olivier", new DateTime(1972, 11, 9)));
            Students.Add(new Student(19, "Garnier", "Gunnar", new DateTime(1970, 3, 23)));
            Students.Add(new Student(20, "Derouwaux", "Sylvie", new DateTime(1977, 12, 5)));
            Students.Add(new Student(21, "Godet", "Olivier", new DateTime(1972, 11, 9)));
            Students.Add(new Student(22, "Garnier", "Gunnar", new DateTime(1970, 3, 23)));
            Students.Add(new Student(23, "Garnier", "Francis", new DateTime(1972, 11, 15)));
            Students.Add(new Student(24, "Derouwaux", "Sylvie", new DateTime(1977, 12, 5)));
            Students.Add(new Student(25, "Godet", "Olivier", new DateTime(1972, 11, 9)));
            Students.Add(new Student(26, "Garnier", "Gunnar", new DateTime(1970, 3, 23)));
            Students.Add(new Student(27, "Derouwaux", "Sylvie", new DateTime(1977, 12, 5)));
            Students.Add(new Student(28, "Godet", "Olivier", new DateTime(1972, 11, 9)));
            Students.Add(new Student(29, "Garnier", "Gunnar", new DateTime(1970, 3, 23)));

            ((Telerik.Web.UI.RadGrid)source).DataSource = Students;
        }
    }
}
public class Student
{
    private int _numStudent;
    public int NumStudent
    {
        get { return _numStudent; }
        set { _numStudent = value; }
    }

    private string _nom;
    public string Nom
    {
        get { return _nom; }
        set { _nom = value; }
    }

    private string _prenom;
    public string Prenom
    {
        get { return _prenom; }
        set { _prenom = value; }
    }

    private DateTime _dateDeNaissance;
    public DateTime DateDeNaissance
    {
        get { return _dateDeNaissance; }
        set { _dateDeNaissance = value; }
    }

    public Student(int numStudent,string nom,string prenom,DateTime dateDeNaissance)
    {
        NumStudent = numStudent;
        Nom = nom;
        Prenom = prenom;
        DateDeNaissance = dateDeNaissance;
    }
}

[Pavlina]

Hello Francis,

The described issue is an IE9. However, to resolve it you can use the CSS code snippet below:

<style type="text/css">
       .LargeGridClass .rgDataDiv
       {
           overflow-x: scroll!important;
       }
   </style>

and to expand the RadGrid vertically, depending on the number of its rows you can set ScrollHeight="". 

Moreover, I am sending you a modified project that is working properly in IE9. Give it a try and let me know if any problems arise.

Regards,
Pavlina
the Telerik team

[Francis]

Yes, it works great !

Thank you