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

Problems fitting RadGrid into a RadPane

6 Answers 387 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Chris
Top achievements
Rank 1
Chris asked on 12 Feb 2009, 10:19 PM
Hello,

My sample webform below is trying to get the grid to "fit 100%" within the radpane. I think i have followed all the advice so far in these forums, but i could have missed something.  It is close but their are "showstopper" problems.

Problem: the radgrid item cells and cell borders are not left aligned with the ragrid column headers!  the cells are "shifted to the right"
Q: how can i get these to align?  

Problem: can't get rid of horizontal scrollbar.
Q: how do i specify the column widths such that the grid "fits neatly" in the radpane "without" generating a horizontal scrollbar? in other words, how do i configure the grid to not generate a horizontal scrollbar when the radgrid width is 100%?  i want to keep the vertical scrollbar though which is working ok.

Problem:  i can't seem to get the "GridLines" consistently.  I want horz and vertical gridlines but they appear to be random.
Q:  what do i do to (consistenly) turn on horizontal and vertical gridlines?

Thanks in advance!

-chris



<%@ Page Language="C#" AutoEventWireup="true" CodeFile="GridInSplitter.aspx.cs" Inherits="_Default" %>

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<!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">
        html
        {
            padding: 0px;
            margin: 0px;
            width: 100%;
            height: 100%;
            border: none;
            overflow: hidden;
        }
        body, form
        {
            padding: 0px;
            margin: 0px;
            width: 100%;
            height: 100%;
            border: none;           
            margin-left: 0px;
            margin-top: 0px;
            margin-right: 0px;
            margin-bottom: 0px;
            overflow: hidden;
        }
    </style>
</head>
<body>

    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <div>
        <telerik:RadSplitter ID="RadSplitter1" ResizeWithBrowserWindow="true" ResizeWithParentPane="true"
            LiveResize="true" Orientation="Horizontal" Width="100%" Height="100%" BorderSize="0"
            BorderStyle="None" BorderWidth="0" runat="server">
            <telerik:RadPane ID="RadPane1" Width="100%" Height="150px" Scrolling="None" runat="server">
                <telerik:RadGrid ID="RadGrid1" DataSourceID="SqlDataSource1" Width="100%" Height="100%"
                    AllowSorting="True" AllowPaging="True" PageSize="50" runat="server" AutoGenerateColumns="False"
                    BorderStyle="None" BorderWidth="0px">
                    <HeaderContextMenu>
                        <CollapseAnimation Duration="200" Type="OutQuint" />
                    </HeaderContextMenu>
                    <PagerStyle Mode="NumericPages" />
                    <MasterTableView DataKeyNames="CustomerID" Width="100%">
                        <Columns>
                            <telerik:GridBoundColumn DataField="CustomerID" HeaderText="aCustomerID" UniqueName="column1">
                                <HeaderStyle Font-Bold="False" Font-Italic="False" Font-Overline="False" Font-Strikeout="False"
                                    Font-Underline="False" Width="50px" Wrap="True" />
                            </telerik:GridBoundColumn>
                            <telerik:GridBoundColumn DataField="CompanyName" HeaderText="aCompanyName" UniqueName="column2">
                                <HeaderStyle Width="100px" />
                            </telerik:GridBoundColumn>
                            <telerik:GridBoundColumn DataField="ContactName" HeaderText="aContactName" UniqueName="column3">
                                <HeaderStyle Width="200px" />
                            </telerik:GridBoundColumn>
                            <telerik:GridBoundColumn DataField="ContactTitle" HeaderText="aContactTitle" UniqueName="column4">
                                <HeaderStyle Width="50px" />
                            </telerik:GridBoundColumn>
                        </Columns>
                    </MasterTableView>
                    <ClientSettings AllowColumnsReorder="true" ReorderColumnsOnClient="true">
                        <Scrolling AllowScroll="true" UseStaticHeaders="true" />
                        <Resizing ResizeGridOnColumnResize="false" AllowColumnResize="true" />
                    </ClientSettings>
                    <FilterMenu>
                        <CollapseAnimation Duration="200" Type="OutQuint" />
                    </FilterMenu>
                </telerik:RadGrid>
                <br />
                <asp:SqlDataSource ID="SqlDataSource1" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
                    ProviderName="System.Data.SqlClient" SelectCommand="SELECT CustomerID, CompanyName, ContactName, ContactTitle FROM Customers"
                    runat="server"></asp:SqlDataSource>
            </telerik:RadPane>
            <telerik:RadSplitBar ID="RadSplitBar1" runat="server" />
            <telerik:RadPane ID="RadPane2" Width="100%" Scrolling="None" runat="server">
            </telerik:RadPane>
        </telerik:RadSplitter>
    </div>
    </form>
</body>
</html>

6 Answers, 1 is accepted

Sort by
0
Sebastian
Telerik team
answered on 16 Feb 2009, 04:53 PM

Hi Chris,

First of all, verify that you are using the latest release 2008.3.1314 of RadControls for ASP.NET AJAX in your project. After that, review the information/code snippets from the following online resources of the product which can provide answers to each of your questions:

http://demos.telerik.com/aspnet-ajax/controls/examples/integration/gridandsplitterresizing/defaultcs.aspx?product=grid (resize grid in RadSplitter pane)

http://demos.telerik.com/aspnet-ajax/grid/examples/client/scrolling/defaultcs.aspx (Description tab - avoid horizontal scroll appearance)

http://www.telerik.com/support/kb/aspnet-ajax/grid/how-to-align-radgrid-cells-when-using-scrolling-and-gridlines.aspx (the embedded skins of RadGrid for ASP.NET AJAX are optimized to synchronize the grid lines without any modifications)

Kind regards,

Sebastian
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.
0
Chris
Top achievements
Rank 1
answered on 17 Feb 2009, 12:23 AM

Hi Sebastian,

 

Thanks for your reply.  I still am having issues with the header cells not aligned with the grid row cells.  I have spent "a lot" of time trying your suggestion (http://www.telerik.com/support/kb/aspnet-ajax/grid/how-to-align-radgrid-cells-when-using-scrolling-and-gridlines.aspx), but am getting the same misalignment results.  I think that it is old as  I see that the ".MasterTable_Gray th" style mentioned in the above article is no longer present in the "Grid.Gray.css" file.

I have included a "very simple example of this issue" - the source code is below.  It is using the built-in "Gray" skin.  

If you would be so kind as to load this into vs2008 and run in the debugger (you'll have to add a simple connection string to your northwind db), you will see:

1) the initial display is correct - the header row cells are left aligned with the data row cells.
2) if you horizontally scroll back and forth, then the header "row" and data "rows" scroll horizontally together - just fine.
3) now, if you simply resize the browser window larger by about 100px, you will see the misalignment occur - the data row cells are shifted to the right relative to their header cell.
4) now, scroll horizontally again back and forth - you will see that the header row no longer scrolls, but the data rows scroll.
5) finally, how do i hide that horizontal scrollbar?  I don't want it there!
6) I have IE7 loaded.

This example is so insanely easy, yet i cannot get the results needed - please help - we are evaluating this powerful toolkit for use throughout our organization and want to use your grid control throughout our application!

Thank you again in advance!

-chris

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="GridOnly.aspx.cs" Inherits="Default2" %>

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<!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">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <div style="width: 100%; height: 300px;">
        <telerik:RadGrid ID="RadGrid1" DataSourceID="SqlDataSource1" Width="100%" Height="100%"
            AllowSorting="True" AllowPaging="True" PageSize="30" runat="server" AutoGenerateColumns="False"
            ShowFooter="false" Skin="Gray">
            <PagerStyle Mode="NumericPages" />
            <MasterTableView DataKeyNames="CustomerID" Width="100%">
                <Columns>
                    <telerik:GridBoundColumn DataField="CustomerID" HeaderText="CustomerID" UniqueName="column1">
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn DataField="CompanyName" HeaderText="CompanyName" UniqueName="column2">
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn DataField="ContactName" HeaderText="ContactName" UniqueName="column3">
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn DataField="ContactTitle" HeaderText="ContactTitle" UniqueName="column4">
                    </telerik:GridBoundColumn>
                </Columns>
            </MasterTableView>
            <ClientSettings AllowColumnsReorder="true" ReorderColumnsOnClient="true">
                <Scrolling AllowScroll="true" UseStaticHeaders="true" />
            </ClientSettings>
        </telerik:RadGrid>
        <br />
        <asp:SqlDataSource ID="SqlDataSource1" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
            ProviderName="System.Data.SqlClient" SelectCommand="SELECT CustomerID, CompanyName, ContactName, ContactTitle FROM Customers"
            runat="server"></asp:SqlDataSource>
    </div>
    </form>
</body>
</html>


 

0
Chris
Top achievements
Rank 1
answered on 17 Feb 2009, 05:09 PM
Hi Sebastian,

I just noticed that the Telerik Grid demo page:  http://demos.telerik.com/aspnet-ajax/grid/examples/client/virtualscrollpaging/defaultcs.aspx also has the same "shifting of cells" issue that I my sample above demonstrates.  Check out the second grid "Yahoo-style scrolling" example - the cells are not aligned with the header when you move the horizontal scrollbar.  Hope this helps!

Thanks again

-chris
0
Chris
Top achievements
Rank 1
answered on 17 Feb 2009, 06:00 PM

Hi Sebastian,

I just got the Grid to behave the way I wanted:

1) the horizontal scrollbar only appears if the widths of all columns exceed the grid width
2) the data cells are aligned with the headers cells (I'm still using UseStaticHeaders="true")

What I did to the sample code above was to change this <MasterTableView> declaration from this:

<telerik:RadGrid width="100%" .... >
    ...

    <MasterTableView width="100%" ...>
    ...
    </MasterTableView>
    ...
</telerik:RadGrid>

 

to be this:

 

<telerik:RadGrid width="100%" .... >
    ...

    <MasterTableView ...>
    ...
    </MasterTableView>
    ...
</telerik:RadGrid>

NOTE: the change was to "remove" the attribute Width="100%" from <MasterTableView> element!

why would removing Width="100%" change the behavior of the RadGrid ?!?

i guess i don't quite understand how the <MasterTableView> and all its attributes and child elements "are related to" the main <telerik:RadGrid> attributes and child elements! 

could you be so kind as to point me to a video, kb article and/or documentation/help link that would educate me on this relationship?

Thanks so much!

-chris

0
Sebastian
Telerik team
answered on 19 Feb 2009, 02:18 PM

Hello Chris,

Specifying the width of the master table in the grid may result in conflict with the header/cell padding/margin settings for a particular skin and this may cause the discrepancy you observed. As explained previously, if you use the latest release 2008.3.1314 of RadControls for ASP.NET AJAX you should not experience the issue since the embedded skins are optimized to work with scrolling, static headers and grid lines.

Additionally, you can try out the new Default/Vista skins from the Q1 2009 Beta release of our controls which will be announced officially by the end of the week. The rest of the embedded skins will be additionally improved/polished for the official Q1 2009 release, expected in the middle of March.

Kind regards,

Sebastian
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.
0
wael
Top achievements
Rank 1
answered on 21 Aug 2014, 11:54 PM
set RadGrid Width="99.8%"
Tags
Grid
Asked by
Chris
Top achievements
Rank 1
Answers by
Sebastian
Telerik team
Chris
Top achievements
Rank 1
wael
Top achievements
Rank 1
Share this question
or