Telerik Forums / UI for ASP.NET AJAX
This is a migrated thread and some comments may be shown as answers.

Scrolling and Header issue

7 Answers 102 Views
Grid
This is a migrated thread and some comments may be shown as answers.
RvdGrint
Top achievements
Rank 1
RvdGrint asked on 08 Feb 2012, 12:24 PM
Hello,

I've a question about the RadGrid, scrolling and headers. I've defined a RadGrid with none StaticHeader because I want my customers to drag and drop the columns to create their own preferred view (column order). The grid is scrollable, scrollheight is set to 197px, which means in my case a viewport of 7 record/lines. When scrolling  I want to 'freeze' the header row, at this moment the header scroll's with the lines so it scrolls out of the viewport.
I've read several articles on the web and the solution is : use static headers. As a mentioned before, that is not an options because I want the user to decided which column order het wants to use (with drag and drop).
On the web I found an article where they do something with CSS on a normal GridView to force the header in the viewport (http://forums.asp.net/t/1162406.aspx) but that solution does not work for the RadGrid.

Hopefullty there's someone with a solotion for this issue.

Regards,
  Jos

7 Answers, 1 is accepted

Sort by
0
RvdGrint
Top achievements
Rank 1
answered on 09 Feb 2012, 01:01 PM
Anyone?

Regards,
  JosM
0
Galin
Telerik team
answered on 10 Feb 2012, 12:42 PM
Hello Jos,

I am not quite sure that I correctly understand the case you are describing.
Column reordering is supported with static header. Could you please give us more details on what you are trying to achieve or possibly a small running project that we can use to reproduce the case?
Alternatively, a live URL will help us as well.

Looking forward to your reply.

Regards,
Galin
the Telerik team
Sharpen your .NET Ninja skills! Attend Q1 webinar week and get a chance to win a license! Book your seat now >>
0
RvdGrint
Top achievements
Rank 1
answered on 10 Feb 2012, 01:00 PM
Galin,

I mean column resizing instead of columen reordering. I'm sorry.

Regards, 
 Jos
0
RvdGrint
Top achievements
Rank 1
answered on 10 Feb 2012, 01:47 PM

Galin,

Here is my example.

aspx:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication1.PanelBar_Default" %>
 
 
<%@ Register Src="~/PanelBar/WebUserControl.ascx" TagName="ucpb" TagPrefix="usercpb" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head id="Head1" runat="server">
    <title></title>
    <style type="text/css">
         
    </style>
        <script type="text/javascript">
        </script>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager ID="ScriptManager1" runat="server">
    </telerik:RadScriptManager>
    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" DefaultLoadingPanelID="RadAjaxLoadingPanel1">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="RadGrid1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadGrid1" LoadingPanelID="RadAjaxLoadingPanel1" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
    <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Skin="Outlook">
    </telerik:RadAjaxLoadingPanel>
    <telerik:RadScriptBlock ID="ScriptBlock1" runat="server">
        <script type="text/javascript">
          function SelectFirstOnGridCreated(sender, args) {
 
            if (sender.get_masterTableView().get_dataItems().length > 0) {
              sender.set_activeRow(sender.get_masterTableView().get_dataItems()[0].get_element());
              sender.get_masterTableView().get_dataItems()[0].set_selected(true);
            }
          }
        </script>
    </telerik:RadScriptBlock>
<telerik:RadAjaxPanel runat="server" ID="rapHourControl" LoadingPanelID="RadAjaxLoadingPanel1">
  <asp:Panel ID="pnlHourControl" runat="server" Width="100%" ScrollBars="auto">
    <telerik:RadGrid ID="rgHCTotal" runat="server" PageSize="7" AllowPaging="true" OnNeedDataSource="rgHCTotal_NeedDataSource"
      OnItemCreated="rgHCTotal_ItemCreated" OnItemCommand="rgHCTotal_ItemCommand">
      <MasterTableView AutoGenerateColumns="False" UseAllDataFields="True" DataKeyNames="PersonID,Date"
        ClientDataKeyNames="PersonID,Date">
        <Columns>
          <telerik:GridButtonColumn ButtonType="ImageButton" ImageUrl="~/Images/RadGrid/16pxSearch.png"
            CommandName="View" UniqueName="ViewColumn" Text="View">
            <HeaderStyle CssClass="rgHeader ButtonColumnHeader"></HeaderStyle>
            <ItemStyle CssClass="ButtonColumn"></ItemStyle>
          </telerik:GridButtonColumn>
          <telerik:GridTemplateColumn UniqueName="IsAccord" HeaderText="" Visible="true" DataField="IsAccord">
            <ItemTemplate>
              <asp:CheckBox ID="cbIsAccord" runat="server" Checked='<%# DataBinder.Eval(Container.DataItem, "IsAccord") %>' />
            </ItemTemplate>
          </telerik:GridTemplateColumn>
          <telerik:GridTemplateColumn UniqueName="Date" HeaderText="Date" Visible="true" DataField="Date">
            <ItemTemplate>
              <%#DataBinder.Eval(Container.DataItem, "Date", "{0:d}")%>
            </ItemTemplate>
          </telerik:GridTemplateColumn>
          <telerik:GridTemplateColumn UniqueName="StartTime" HeaderText="Start time" ItemStyle-HorizontalAlign="Right"
            HeaderStyle-HorizontalAlign="Right" DataField="StartTime">
            <ItemTemplate>
              <%#DataBinder.Eval(Container.DataItem, "StartTime", "{0:t}")%>
            </ItemTemplate>
          </telerik:GridTemplateColumn>
          <telerik:GridTemplateColumn UniqueName="EndTime" HeaderText="End time" ItemStyle-HorizontalAlign="Right"
            HeaderStyle-HorizontalAlign="Right" DataField="EndTime">
            <ItemTemplate>
              <%#DataBinder.Eval(Container.DataItem, "EndTime", "{0:t}")%>
            </ItemTemplate>
          </telerik:GridTemplateColumn>
          <telerik:GridTemplateColumn UniqueName="Duration" HeaderText="Duration" ItemStyle-HorizontalAlign="Right"
            HeaderStyle-HorizontalAlign="Right" DataField="Duration">
            <ItemTemplate>
              <%#DataBinder.Eval(Container.DataItem, "Duration", "{0:T}")%>
            </ItemTemplate>
          </telerik:GridTemplateColumn>
        </Columns>
      </MasterTableView>
      <ClientSettings AllowKeyboardNavigation="true">
        <Selecting AllowRowSelect="true" />
        <KeyboardNavigationSettings EnableKeyboardShortcuts="true" AllowSubmitOnEnter="false" />
        <ClientEvents OnGridCreated="SelectFirstOnGridCreated" />
      </ClientSettings>
    </telerik:RadGrid>
  </asp:Panel>
</telerik:RadAjaxPanel>
    </form>
</body>
</html>

aspx.cs:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
 
using Telerik.Web.UI;
using System.Data;
 
namespace WebApplication1
{
  public partial class PanelBar_Default : System.Web.UI.Page
  {
    private const string sRGTotalCode = "TMS_HourControl_0001_RG01";
    private const string sRGDetailCode = "TMS_HourControl_0001_RG02";
 
    private const string sTotKeyField = "PersonID";
    private const string sTotEntity = "Hour Control Totals";
    private const string sTotViewState = "LoadGridSettingsHCTotal";
 
    private const string sDetKeyField = "TripID";
    private const string sDetEntity = "Hour Control Details";
    private const string sDetViewState = "LoadGridSettingsHCDetail";
 
    protected override void OnLoad(EventArgs e)
    {
      BuildColumns();
      base.OnLoad(e);
    }
 
    protected void Page_Load(object sender, EventArgs e)
    {
      GetSettings();
    }
 
    protected override void OnInit(EventArgs e)
    {
      base.OnInit(e);
    }
 
    private class ColumnTemplate : ITemplate
    {
      string _colName;
 
      public ColumnTemplate(string sColName)
      {
        _colName = sColName;
      }
 
      public void InstantiateIn(Control container)
      {
        Label _value = new Label();
        _value.Attributes.Add("DataField", _colName);
        _value.DataBinding += new EventHandler(_value_DataBinding);
        container.Controls.Add(_value);
      }
 
      void _value_DataBinding(object sender, EventArgs e)
      {
        Label lblValue = (Label)sender;
        GridDataItem container = (GridDataItem)lblValue.NamingContainer;
 
        TimeSpan tsValue = (TimeSpan)((DataRowView)container.DataItem)[lblValue.Attributes["DataField"].ToString()];
 
        if (tsValue.Ticks > 0)
          lblValue.Text = String.Format("{0}:{1:" + @"mm\:ss" + "}", ((tsValue.Days * 24) + tsValue.Hours), tsValue);
        else
          lblValue.Text = "--:--:--";
      }
    }
 
    private void BuildColumns()
    {
      int iNumCol = 2;
      string[] sCol = new string[] { "Load", "Unload" };
 
      for (int iCol = 0; iCol < iNumCol; iCol++)
      {
        GridColumn gcHC = rgHCTotal.MasterTableView.Columns.FindByUniqueNameSafe(sCol[iCol]);
 
        GridTemplateColumn gtcHC = new GridTemplateColumn();
 
        if (gcHC != null)
        {
          gtcHC = (GridTemplateColumn)gcHC;
          gtcHC.ItemTemplate = new ColumnTemplate(sCol[iCol]);
        }
        else
        {
          gtcHC.UniqueName = sCol[iCol];
          rgHCTotal.MasterTableView.Columns.Add(gtcHC);
          gtcHC.DataField = sCol[iCol];
          gtcHC.HeaderText = sCol[iCol];
          gtcHC.HeaderStyle.HorizontalAlign = HorizontalAlign.Right;
          gtcHC.ItemStyle.HorizontalAlign = HorizontalAlign.Right;
          gtcHC.ItemTemplate = new ColumnTemplate(sCol[iCol]);
        }
      }
    }
 
    private void GetSettings()
    {
      ApplyGridSettings();
    }
 
    private void ApplyGridSettings()
    {
      if (Convert.ToBoolean(ViewState[sTotViewState]) == true || ViewState[sTotViewState] == null)
      {
        DateTime dtStartDate = new DateTime(2012, 1, 1);
        DateTime dtEndDate = new DateTime(2012, 1, 31, 23, 59, 59, 999);
 
        int iSpan = 31;
 
        rgHCTotal.AllowPaging = true;
        rgHCTotal.VirtualItemCount = iSpan;
        rgHCTotal.MasterTableView.VirtualItemCount = iSpan;
        rgHCTotal.ClientSettings.Scrolling.AllowScroll = true;
        rgHCTotal.PageSize = iSpan;
        rgHCTotal.ClientSettings.Scrolling.EnableVirtualScrollPaging = true;
        rgHCTotal.ClientSettings.Scrolling.UseStaticHeaders = true;
        rgHCTotal.ClientSettings.Scrolling.SaveScrollPosition = true;
        rgHCTotal.ClientSettings.Scrolling.ScrollHeight = Unit.Pixel(265);
        rgHCTotal.ClientSettings.KeyboardNavigationSettings.AllowActiveRowCycle = false;
        rgHCTotal.MasterTableView.CommandItemDisplay = GridCommandItemDisplay.None;
 
        ViewState[sTotViewState] = false;
      }
    }
 
    protected void rgHCTotal_ItemCommand(object sender, Telerik.Web.UI.GridCommandEventArgs e)
    {
      switch (e.CommandName)
      {
        case RadGrid.InitInsertCommandName:
          e.Canceled = true;
          break;
        case RadGrid.EditCommandName:
        case "View":
          {
            rgHCTotal.Rebind();
            e.Canceled = true;
          }
          break;
      }
    }
 
    protected void rgHCTotal_NeedDataSource(object sender, Telerik.Web.UI.GridNeedDataSourceEventArgs e)
    {
      rgHCTotal.DataSource = GetHCTotalTable();
    }
 
    protected void rgHCTotal_ItemCreated(object sender, Telerik.Web.UI.GridItemEventArgs e)
    {
    }
 
    private DataTable GetHCTotalTable()
    {
      DataTable dtHCTotal = new DataTable("HCTotal");
 
      if (ViewState["dtHCTotal"] == null)
      {
        GetHCTotalTableDef(ref dtHCTotal);
 
        CheckHCTotalData(ref dtHCTotal);
 
        ViewState["dtHCTotal"] = dtHCTotal;
      }
      else
      {
        DataTable _dt = (DataTable)ViewState["dtHCTotal"];
        dtHCTotal.Merge(_dt);
      }
 
      return dtHCTotal;
    }
 
    private void GetHCTotalTableDef(ref DataTable _table)
    {
      DataColumn dcolDate = new DataColumn() { ColumnName = "Date", DataType = System.Type.GetType("System.DateTime") };
      DataColumn dcolPerson = new DataColumn() { ColumnName = "PersonID", DataType = System.Type.GetType("System.Int32") };
      DataColumn[] keys = new DataColumn[2];
      keys[0] = dcolPerson;
      keys[1] = dcolDate;
 
      _table.Columns.Add();
      _table.Columns.Add(dcolPerson);
      _table.Columns.Add(dcolDate);
      _table.Columns.Add(new DataColumn() { ColumnName = "IsAccord", DataType = System.Type.GetType("System.Boolean") });
      _table.Columns.Add(new DataColumn() { ColumnName = "StartTime", DataType = System.Type.GetType("System.DateTime") });
      _table.Columns.Add(new DataColumn() { ColumnName = "EndTime", DataType = System.Type.GetType("System.DateTime") });
      _table.Columns.Add(new DataColumn() { ColumnName = "Duration", DataType = System.Type.GetType("System.DateTime") });
      _table.Columns.Add(new DataColumn() { ColumnName = "IsDummy", DataType = System.Type.GetType("System.Boolean") });
 
      //Add from settings
      _table.Columns.Add(new DataColumn() { ColumnName = "Load", DataType = System.Type.GetType("System.TimeSpan") });
      _table.Columns.Add(new DataColumn() { ColumnName = "Unload", DataType = System.Type.GetType("System.TimeSpan") });
 
      _table.PrimaryKey = keys;
    }
 
    protected void CheckHCTotalData(ref DataTable _table)
    {
      DateTime dtStartDate = new DateTime(2012, 1, 1);
      DateTime dtEndDate = new DateTime(2012, 1, 31, 23, 59, 59, 999);
 
      int iSpan = 31;
 
      for (int iDay = 0; iDay < iSpan; iDay++)
      {
        DateTime dtDate = dtStartDate.AddDays(iDay);
        int iPersonID = 1;
 
        DataRow _exists = _table.Rows.Find(new object[] { iPersonID, dtDate });
        if (_exists == null)
        {
          DataRow _new = _table.NewRow();
          _new["PersonID"] = iPersonID;
          _new["Date"] = dtDate;
          _new["IsAccord"] = false;
          _new["IsDummy"] = true;
 
          //Columns added by code
          _new["Load"] = 0;
          _new["Unload"] = 0;
 
          _table.Rows.Add(_new);
        }
      }
    }
 
  }
}

As you will see in this example, scrolling is working but I can not resize the columns. Ik want both. Scrolling and resizing columns with moving the header outside the viewport when scrolling.

Regards, 
  Jos

0
Galin
Telerik team
answered on 10 Feb 2012, 03:24 PM
Hi Jos,

Thank you for sending the sample.

Resizing and scrolling with static headers is supported scenario, too.

However, in you are sample you are creating the columns on Page_Load. Column templates must be added in the Page_Init event handler, so that the template controls can be added to the ViewState.

Please modify your project by following this help topic and let me know how it goes.


Kind regards,
Galin
the Telerik team
Sharpen your .NET Ninja skills! Attend Q1 webinar week and get a chance to win a license! Book your seat now >>
0
RvdGrint
Top achievements
Rank 1
answered on 13 Feb 2012, 08:44 AM
Galin,

that makes no differences.
When I specify Resizeable attribute on the aspx/ascx than the columns are resizable again. So problem is solves at the moment.

Regards, 
  Jos.
0
Galin
Telerik team
answered on 14 Feb 2012, 04:21 PM
Hello,

I agree the resizing feature will work in both cases.

However, I remind you to modify the dynamic creation of  the columns, because there are scenarios as filtering, which will not be working as expected. Please refer to the help topic.

Please let me know if I can assist you any further.

Greetings,
Galin
the Telerik team
Sharpen your .NET Ninja skills! Attend Q1 webinar week and get a chance to win a license! Book your seat now >>
Tags
Grid
Asked by
RvdGrint
Top achievements
Rank 1
Answers by
RvdGrint
Top achievements
Rank 1
Galin
Telerik team
Share this question
or