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

Telerik.Web.UI Rad Grid Issues for column Freeze, Merge header

3 Answers 204 Views

General Discussions

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

kalyan gupta asked on 08 Mar 2011, 04:48 PM

UI.JPG

Screenshot1.JPG

Screenshot2.JPG

Screenshot3.JPG

Screenshot4.JPG

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="uclFleet.ascx.cs" Inherits="UserControls_uclFleet" %>

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

<telerik:RadScriptManager runat="server" ID="RadScriptManager1" />

<script type="text/javascript">

function fnGridCreated(sender, args) {

var scrollArea = sender.GridDataDiv;

var dataHeight = sender.get_masterTableView().get_element().clientHeight;

if (dataHeight < 350) {

scrollArea.style.height = dataHeight + 10 + "px";

}

</script>

<telerik:RadGrid ID="tlrkDgrFleet" runat="server" EnableViewState="true" CellPadding="0"

CellSpacing="0" GridLines="Both" Width="750px"

Skin="Office2007" HeaderStyle-Font-Size="8pt"

HeaderStyle-Font-Bold="true" AllowPaging="true" ShowHeader="true" OnNeedDataSource="tlrkDgrFleet_NeedDataSource" OnItemDataBound="tlrkDgrFleet_OnItemDataBound">

<MasterTableView CellPadding="0" CellSpacing="0" Width="99%" TableLayout="Fixed" ShowHeader="true" AutoGenerateColumns="false"

AllowPaging="true" ShowFooter="false">

<Columns>

<telerik:GridTemplateColumn HeaderStyle-HorizontalAlign="Center" HeaderStyle-Width="50px"

UniqueName="SerialNo" ItemStyle-HorizontalAlign="Right">

<HeaderTemplate>

<table border="0" cellpadding="0" cellspacing="0" width="100%">

<tr>

<td style="border: 0" rowspan="2">

Serial

<br />

No.

</td>

</tr>

</table>

</HeaderTemplate>

<ItemTemplate>

<asp:Label ID="lblSerialNo" runat="server"><%# Eval("A") %></asp:Label>

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn HeaderStyle-HorizontalAlign="Center" HeaderStyle-Width="100px"

UniqueName="ColHeader" ItemStyle-HorizontalAlign="left">

<HeaderTemplate>

<table border="0" cellpadding="0" cellspacing="0" width="100%">

<tr>

<td style="width:100%" colspan="2">

Column header

<br /><hr />

</td>

</tr>

<tr>

<td>

Sub Col A

</td>

<td>

Sub Col B

</td>

</tr>

</table>

</HeaderTemplate>

<ItemTemplate>

<table border="0" cellpadding="0" cellspacing="0" >

<tr>

<td>

<asp:Label ID="lblA" runat="server" ><%# Eval("B") %></asp:Label>

</td>

<td>

<asp:Label ID="lblE" runat="server"><%# Eval("C") %></asp:Label>

</td>

</tr>

</table>

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn HeaderStyle-HorizontalAlign="Center" HeaderStyle-Width="100px"

UniqueName="Delivery" ItemStyle-HorizontalAlign="left">

<HeaderTemplate>

<table border="0" cellpadding="0" cellspacing="0" width="100%">

<tr>

<td style="border: 1" colspan="2">

Delivery<br /><hr />

</td>

</tr>

<tr>

<td>

Owner

</td>

<td>

Operator

</td>

</tr>

</table>

</HeaderTemplate>

<ItemTemplate>

<asp:Label ID="lblOwn" runat="server"><%# Eval("D") %></asp:Label>

</ItemTemplate>

<ItemTemplate>

<asp:Label ID="lblOper" runat="server"><%# Eval("E") %></asp:Label>

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn HeaderStyle-HorizontalAlign="Center" HeaderStyle-Width="150px"

UniqueName="Current" ItemStyle-HorizontalAlign="left">

<HeaderTemplate>

<table border="0" cellpadding="0" cellspacing="0" >

<tr>

<td style="border:0" colspan="3">

Current<br /><hr />

</td>

</tr>

<tr>

<td>

Own

</td>

<td>

LEAST

</td>

<td>

SLE123

</td>

</tr>

</table>

</HeaderTemplate>

<ItemTemplate>

<table border="0" cellpadding="0" cellspacing="0" >

<tr>

<td>

<asp:Label ID="lblCurrOwn" runat="server"><%# Eval("F") %></asp:Label>

</td>

<td>

<asp:Label ID="lblCurrLE" runat="server"><%# Eval("G")%></asp:Label>

</td>

<td>

<asp:Label ID="lblCurrSLE" runat="server"><%# Eval("H") %></asp:Label>

</td>

</tr>

</table>

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn HeaderStyle-HorizontalAlign="Center" HeaderStyle-Width="50px"

UniqueName="Future" ItemStyle-HorizontalAlign="left">

<HeaderTemplate>

<table border="0" cellpadding="0" cellspacing="0" width="100%">

<tr>

<td style="border: 0" rowspan="2">

Future

<br />

Owner

</td>

</tr>

</table>

</HeaderTemplate>

<ItemTemplate>

<asp:Label ID="lblr" runat="server"><%# Eval("I") %></asp:Label>

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn HeaderStyle-HorizontalAlign="Center" HeaderStyle-Width="50px"

UniqueName="Bus" ItemStyle-HorizontalAlign="left">

<HeaderTemplate>

<table border="0" cellpadding="0" cellspacing="0" width="100%">

<tr>

<td style="border: 0" rowspan="2">

Bus

<br />

Contract

</td>

</tr>

</table>

</HeaderTemplate>

<ItemTemplate>

<asp:Label ID="lblBusCon" runat="server"><%# Eval("J") %></asp:Label>

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn HeaderStyle-HorizontalAlign="Center" HeaderStyle-Width="50px"

UniqueName="Number" ItemStyle-HorizontalAlign="left">

<HeaderTemplate>

<table border="0" cellpadding="0" cellspacing="0" width="100%">

<tr>

<td style="border: 0" rowspan="2">

House

<br />

Number

</td>

</tr>

</table>

</HeaderTemplate>

<ItemTemplate>

<asp:Label ID="lblNo" runat="server"><%# Eval("K") %></asp:Label>

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn HeaderStyle-HorizontalAlign="Center" HeaderStyle-Width="50px"

UniqueName="CurrentSet" ItemStyle-HorizontalAlign="left">

<HeaderTemplate>

<table border="0" cellpadding="0" cellspacing="0" width="100%">

<tr>

<td style="border: 0" rowspan="2">

Current

<br />

Set.

</td>

</tr>

</table>

</HeaderTemplate>

<ItemTemplate>

<asp:Label ID="lblCurrentSet" runat="server"><%# Eval("L") %></asp:Label>

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn HeaderStyle-HorizontalAlign="Center" HeaderStyle-Width="50px"

UniqueName="LaneNo" ItemStyle-HorizontalAlign="left">

<HeaderTemplate>

<table border="0" cellpadding="0" cellspacing="0" width="100%">

<tr>

<td style="border: 0" rowspan="2">

Lane

<br />

No.

</td>

</tr>

</table>

</HeaderTemplate>

<ItemTemplate>

<asp:Label ID="lblLaneNo" runat="server"><%# Eval("M") %></asp:Label>

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn HeaderStyle-HorizontalAlign="Center" HeaderStyle-Width="50px"

UniqueName="PurDate" ItemStyle-HorizontalAlign="center">

<HeaderTemplate>

<table border="0" cellpadding="0" cellspacing="0" width="100%">

<tr>

<td style="border: 0" rowspan="2">

Purchase

<br />

Date

</td>

</tr>

</table>

</HeaderTemplate>

<ItemTemplate>

<asp:Label ID="lblDeliveryDate" runat="server"><%# Eval("N") %></asp:Label>

</ItemTemplate>

</telerik:GridTemplateColumn>

</Columns>

</MasterTableView>

<ClientSettings>

<Scrolling AllowScroll="true" FrozenColumnsCount= "3" UseStaticHeaders="true" SaveScrollPosition="true" />

<ClientEvents OnGridCreated="fnGridCreated" />

</ClientSettings>

</telerik:RadGrid>

//User Control uclFleet.ascx.cs file

using System;

using System.Data;

using System.Configuration;

using System.Collections;

using System.Web;

using System.Web.Security;

using System.Web.UI;

using Telerik.Web.UI;

using System.Text;

public partial class UserControls_uclFleet : System.Web.UI.UserControl

{

protected void tlrkDgrFleet_NeedDataSource(object source,

Telerik.Web.UI.GridNeedDataSourceEventArgs e)

{

DataTable dt = new DataTable();

dt.Columns.Add("A");

dt.Columns.Add("B");

dt.Columns.Add("C");

dt.Columns.Add("D");

dt.Columns.Add("E");

dt.Columns.Add("F");

dt.Columns.Add("G");

dt.Columns.Add("H");

dt.Columns.Add("I");

dt.Columns.Add("J");

dt.Columns.Add("K");

dt.Columns.Add("L");

dt.Columns.Add("M");

dt.Columns.Add("N");

for (int i = 0; i < 10; i++)

{

DataRow dr;

dr = dt.NewRow();

dr["A"] = "1234";

dr["B"] = "ABCD - hjkl";

dr["C"] = "123-90";

dr["D"] = "13434";

dr["E"] = "1545";

dr["F"] = "1656";

dr["G"] = "1453";

dr["H"] = "15435";

dr["I"] = "5341";

dr["J"] = "1345";

dr["K"] = "135";

dr["L"] = "135";

dr["M"] = "1345";

dr["N"] = "11/07/2010";

dt.Rows.Add(dr);

DataRow dr1;

dr1 = dt.NewRow();

dr1["A"] = "1234";

dr1["B"] = "AWER - POUT";

dr1["C"] = "123-90";

dr1["D"] = "13434";

dr1["E"] = "1545";

dr1["F"] = "1656";

dr1["G"] = "ASD";

dr1["H"] = "15435";

dr1["I"] = "DSFSF";

dr1["J"] = "1345";

dr1["K"] = "135";

dr1["L"] = "EWEWR";

dr1["M"] = "1345";

dr1["N"] = "11/07/2010";

dt.Rows.Add(dr1);

}

tlrkDgrFleet.DataSource = dt;

}

protected void tlrkDgrFleet_OnItemDataBound(object sender, Telerik.Web.UI.GridItemEventArgs e)

{

}

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

<%@ Register Src="~/UserControls/uclFleet.ascx" TagName="uclFleet" TagPrefix="uc2" %>

<%@ 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">

<table style="table-layout:fixed" width="100%"><tr><td>

<uc2:uclFleet ID="uclFleet" runat="server" /> </td></tr>

</table>

</form>

</body>

</html>

Hi,

1) I want a header in which there will be one main heading and under it there can be sub headings, the main header will span across its multiple sub headings, user can sort the grid by clicking on the sub headings. Please refer to the "UI.jpg"

2) The requirement is like i will be needing the Radgrid as usercontrol, which we will bind on Page. when we run the page, the screen looks fine except for the Merged Columns where in we need the headings and the Subheadeing, refer "Screenshot1.JPG"

The second issue which we I am facing is, The rad grd will have horizontal scroll and first 3 columns would be frozed.
But when we try to freeze the columns we face the following issues:

a) When we scroll, the complete alignment of the grid gets messed up, and one Grid line remains there and shows up in the middle of all scrolling columns. Refer "Screenshot2.JPG" .

b) After we scroll, the horizontal scroll itself disappears. Refer "Screenshot3.JPG" .

c) If we change the page size in pagination, the pagination also disappears. Refer "Screenshot4.JPG" .

Please refer to the code as well, We have created a user control "uclFleet.ascx" which we register in our page "Test_Fleet.aspx".

Thanks.

Telerik.Web.UI Rad Grid Issues for column Freeze, Merge header

3 Answers, 1 is accepted