Programmatic grid - Horizontal scrolling problem

[Rick]

Hi,

I have a user control that builds a grid programmatic-ally where column definitions are dynamically created and can change during a postback. I am trying to implement frozen columns so that only 5 or so are displayed, and the rest should be available with the scrolling feature. The problem is that when my grid is rendered, only the first 5 columns are displayed and no scrollbar. If I re-size the other columns, then the missing ones start appearing.

I have set the MasterTableView.Width = to the total width of all columns.

My columns are defined in an xml document as such:

<columns>
  <column
    HeaderText="Site"
    FooterText="Total"
    DataTextField="Site"
    DataValueField="Site"
    DataFormatString=""
    Sorting="true"
    Filtering="true"
    Aggregate="None"
    Hyperlinks="false"
    Hidden="false"
    CanHide="true"
    Width="20%"
    />
  <column
    HeaderText="PCount"
    FooterText=""
    DataTextField="PCount"
    DataValueField="PCount"
    DataFormatString=""
    Sorting="true"
    Filtering="true"
    Aggregate="Sum"
    Hyperlinks="false"
    Hidden="false"
    CanHide="true"
    Width="20%"
    />
  <column
    HeaderText="Number of Forms"
    FooterText=""
    DataTextField="FormCount"
    DataValueField="FormCount"
    DataFormatString=""
    Sorting="true"
    Filtering="true"
    Aggregate="Sum"
    Hyperlinks="false"
    Hidden="false"
    CanHide="true"
    Width="20%"
    />
  <column
    HeaderText="No Data"
    FooterText=""
    DataTextField="NoData"
    DataValueField="NoData"
    DataFormatString=""
    Sorting="true"
    Filtering="true"
    Aggregate="Sum"
    Hyperlinks="false"
    Hidden="false"
    CanHide="true"
    Width="20%"
    />
  <column
    HeaderText="Incomplete"
    FooterText=""
    DataTextField="Incomplete"
    DataValueField="Incomplete"
    DataFormatString=""
    Sorting="true"
    Filtering="true"
    Aggregate="Sum"
    Hyperlinks="false"
    Hidden="false"
    CanHide="true"
    Width="20%"
    />
  <column
    HeaderText="Complete"
    FooterText=""
    DataTextField="Complete"
    DataValueField="Complete"
    DataFormatString=""
    Sorting="true"
    Filtering="true"
    Aggregate="Sum"
    Hyperlinks="false"
    Hidden="false"
    CanHide="true"
    Width="20%"
    />
  <column
    HeaderText="Test"
    FooterText=""
    DataTextField="Test"
    DataValueField="Test"
    DataFormatString=""
    Sorting="true"
    Filtering="true"
    Aggregate="None"
    Hyperlinks="true"
    Hidden="false"
    CanHide="true"
    Width="10%"
    />
  <column
    HeaderText="Column1"
    FooterText=""
    DataTextField="Column1"
    DataValueField="Column1"
    DataFormatString=""
    Sorting="true"
    Filtering="true"
    Aggregate="None"
    Hyperlinks="false"
    Hidden="false"
    CanHide="true"
    Width="10%"/>
  <column
    HeaderText="Column2"
    FooterText=""
    DataTextField="Column2"
    DataValueField="Column2"
    DataFormatString=""
    Sorting="true"
    Filtering="true"
    Aggregate="None"
    Hyperlinks="false"
    Hidden="false"
    CanHide="true"
    Width="10%"
    />
  <column
  HeaderText="Column3"
  FooterText=""
  DataTextField="Column3"
  DataValueField="Column3"
  DataFormatString=""
  Sorting="true"
  Filtering="true"
  Aggregate="None"
  Hyperlinks="false"
  Hidden="false"
  CanHide="true"
  Width="10%"
  />
  <column
    HeaderText="Column4"
    FooterText=""
    DataTextField="Column4"
    DataValueField="Column4"
    DataFormatString=""
    Sorting="true"
    Filtering="true"
    Aggregate="None"
    Hyperlinks="false"
    Hidden="false"
    CanHide="true"
    Width="10%"
    />
</columns>

My grid is defined programmatically as such:

private void DefineGridStructure()
        {
            // general
            this.grid = new RadGrid();
            grid.ID = "Grid1";
            grid.DataMember = DataMember;
            grid.MasterTableView.AutoGenerateColumns = false;
            if (!MasterKeyField.Equals(String.Empty))
                grid.MasterTableView.DataKeyNames = new string[] { MasterKeyField };

            // formatting
            grid.Width = Unit.Percentage(100);
            grid.MasterTableView.Width = Unit.Percentage(170);
            grid.Skin = "Outlook";
            grid.MasterTableView.TableLayout = GridTableLayout.Fixed;

            // column resizing
            grid.ClientSettings.Resizing.AllowColumnResize = AllowColumnResizing;

            // scrolling
            grid.ClientSettings.Scrolling.AllowScroll = AllowScroll;
            grid.ClientSettings.Scrolling.UseStaticHeaders = UseStaticHeaders;
            grid.ClientSettings.ClientEvents.OnGridCreated = "GridCreated";
            grid.ClientSettings.Scrolling.FrozenColumnsCount = 5;

            // sorting
            grid.MasterTableView.AllowMultiColumnSorting = AllowMultiColumnSorting;
            grid.AllowSorting = AllowSorting;

            // header context menu
            grid.MasterTableView.EnableHeaderContextMenu = AllowHeaderContextMenu;

            // viewstate
            grid.EnableViewState = true;
            grid.MasterTableView.EnableColumnsViewState = false;

            // paging
            grid.AllowPaging = AllowPaging;
            grid.PageSize = 20;
            grid.MasterTableView.PagerStyle.AlwaysVisible = AllowPaging;
            grid.MasterTableView.PagerStyle.Position = GridPagerPosition.Bottom;
            grid.MasterTableView.PagerStyle.Mode = GridPagerMode.NextPrevNumericAndAdvanced;

            // filtering
            grid.MasterTableView.AllowFilteringByColumn = true;
            grid.FilterMenu.ExpandAnimation.Type = AnimationType.OutQuad;
            grid.FilterMenu.ExpandAnimation.Duration = 2;

            // hierarchy load mode
            grid.MasterTableView.HierarchyLoadMode = GridChildLoadMode.ServerOnDemand;

            // export settings
            grid.MasterTableView.CommandItemDisplay = GridCommandItemDisplay.None;
            grid.ExportSettings.ExportOnlyData = true;
            grid.ExportSettings.Excel.Format = GridExcelExportFormat.ExcelML;
            grid.ExportSettings.IgnorePaging = true;
            grid.ExportSettings.OpenInNewWindow = true;
        }

Please help  with this issue.

Thanks,
Rick

[Pavlina]

Hi Rick,

Note that in order to display horizontal scroll for navigation, you need to make sure that the total width of the columns exceeds the width of the grid (as demonstrated in the following online demo):
http://demos.telerik.com/aspnet-ajax/grid/examples/client/scrolling/defaultcs.aspx

All the best,
Pavlina
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.