RadGrid Horizontal scrolling

13 posts, 0 answers
  1. Amit
    Amit avatar
    53 posts
    Member since:
    Aug 2012

    Posted 19 Nov 2012 Link to this post

    Hello
    I have used radgrid .I have added columns dynamically to the grid at runtime.
    Radgrid width is 500 px so after added 8 column horizontal scrollbar should be appear but it is not appearing.
    please suggest me nice solution or example.

    Thanks.
  2. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 19 Nov 2012 Link to this post

    Hi,

    In order to display horizontal scroll for navigation, you need to make sure that the total width of the columns (either auto-generated or declaratively set) exceeds the width of the grid. Also check the following demo which implements the same.
    Grid / Scrolling

    Thanks,
    Princy.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Amit
    Amit avatar
    53 posts
    Member since:
    Aug 2012

    Posted 19 Nov 2012 Link to this post

    Thanks

    My columns auto generated at server side.
    In following Method I have set the width of columns so How should I come to know when my length got exceeds.

    private void CreateDyanicGridColumns()
            {
                DataSet ds = this.GetDataset();
                foreach (DataColumn oDataColumn in ds.Tables[0].Columns)
                {
                    GridBoundColumn oGridBoundColumn = new GridBoundColumn();
                    rGrid.MasterTableView.Columns.Add(oGridBoundColumn);
                    oGridBoundColumn.HeaderText = oDataColumn.Caption;
                    oGridBoundColumn.DataField = oDataColumn.ColumnName;
                    oGridBoundColumn.ReadOnly = true;
                    oGridBoundColumn.SortExpression = oDataColumn.ColumnName;
                    oGridBoundColumn.UniqueName = oDataColumn.ColumnName;
                    oGridBoundColumn.FilterControlWidth = Unit.Percentage(60);
                    oGridBoundColumn.HeaderStyle.Width = Unit.Percentage(10);
                    oGridBoundColumn.HeaderStyle.HorizontalAlign = HorizontalAlign.Center;
                    oGridBoundColumn.ItemStyle.Width = Unit.Percentage(10);
                    oGridBoundColumn.ItemStyle.HorizontalAlign = HorizontalAlign.Center;
                }
     
            }
  5. Pavlina
    Admin
    Pavlina avatar
    6084 posts

    Posted 21 Nov 2012 Link to this post

    Hello,

    Try using only HeaderStyle.Width property to set column width as shown below an see if this helps to show the horizontal scroll of the grid.
    private void CreateDyanicGridColumns()
            {
                DataSet ds = this.GetDataset();
                foreach (DataColumn oDataColumn in ds.Tables[0].Columns)
                {
                    GridBoundColumn oGridBoundColumn = new GridBoundColumn();
                    rGrid.MasterTableView.Columns.Add(oGridBoundColumn);
                    oGridBoundColumn.HeaderText = oDataColumn.Caption;
                    oGridBoundColumn.DataField = oDataColumn.ColumnName;
                    oGridBoundColumn.ReadOnly = true;
                    oGridBoundColumn.SortExpression = oDataColumn.ColumnName;
                    oGridBoundColumn.UniqueName = oDataColumn.ColumnName;
                    oGridBoundColumn.FilterControlWidth = Unit.Percentage(60);
                    oGridBoundColumn.HeaderStyle.Width = Unit.Pixel(200);
                    oGridBoundColumn.HeaderStyle.HorizontalAlign = HorizontalAlign.Center;
                    oGridBoundColumn.ItemStyle.HorizontalAlign = HorizontalAlign.Center;
                }
            }


    Regards,
    Pavlina
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  6. Amit
    Amit avatar
    53 posts
    Member since:
    Aug 2012

    Posted 21 Nov 2012 Link to this post

    Thank you very much it is working,
    But now new problem come
    I am grouping radgrid dynamically through dropdown selected value.
    if I grouped radgrid and then added columns dynamically the groupheaderstyle background colour is not extended upto last column .if I scroll horizontally there is background color for those column for only initially selected and not for the newlly add columns

    Please suggest 
    Thanks. 
  7. Pavlina
    Admin
    Pavlina avatar
    6084 posts

    Posted 22 Nov 2012 Link to this post

    Hello,

    There are two points to keep in mind when modifying the grid columns on postback:
        - You must ensure that the grid is modified on Page_Init so that the control ViewState remains consistent. 
        - You should also set the EnableColumnViewState property to False, so that the grid knows that the columns may vary at some stage of the page lifecycle.

    Try following these instructions and see if they help to resolve the problem with  background color of newly added columns.

    Greetings,

    Pavlina
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  8. brian
    brian avatar
    36 posts
    Member since:
    Jul 2010

    Posted 15 Jun 2013 Link to this post

    Is there an article on how to have horizontal scrolling with auto-generated columns.
  9. Pavlina
    Admin
    Pavlina avatar
    6084 posts

    Posted 16 Jun 2013 Link to this post

    Hello,

    You just need to make sure that the total width of the columns exceeds the width of the grid if you want horizontal scroll to appear in grid with autogenerated columns. Note that you should set column widths through HeaderStyle-Width property only. It is not recommended to use ItemStyle-Width.

    Regards,
    Pavlina
    Telerik
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
  10. Qwicksoft
    Qwicksoft avatar
    10 posts
    Member since:
    Dec 2013

    Posted 09 Jan 2014 Link to this post

    Hi All,


    How to set Horizontal ScrollBar in Telerik radgrid???????
  11. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 09 Jan 2014 Link to this post

    Hi ,

    In order to set the Radgrid Scroll please set ClientSettings->Scrolling->AllowScroll="true".In order to display horizontal scroll for navigation, you need to make sure that the total width of the columns(either auto-generated or declaratively set) exceeds the width of the grid. To avoid the appearance of the vertical scroll, make sure that the height of the records in the grid does not exceed the ClientSettings -> Scrolling -> ScrollHeight scroll setting.

    Thanks,
    Princy

  12. Qwicksoft
    Qwicksoft avatar
    10 posts
    Member since:
    Dec 2013

    Posted 21 Feb 2014 in reply to Princy Link to this post

    Hi Princy,


           I m using Radcombobox inside Radgrid.
     <rad:GridTemplateColumn AutoPostBackOnFilter="true" CurrentFilterFunction="Contains"
                    AllowFiltering="false" HeaderText="Status" ShowFilterIcon="false" UniqueName="Status">
                    <ItemTemplate>
                        <rad:RadComboBox ID="RadComboBox1" runat="server" Width="120px" SelectedValue='<%# (Eval("Status")) %>'
                            DataValueField="Status">
                            <Items>
                                <rad:RadComboBoxItem Text="No" Value="1" />
                                <rad:RadComboBoxItem Text="Yes" Value="2" />
                                <rad:RadComboBoxItem Text="Not Applicable" Value="3" />
                            </Items>
                        </rad:RadComboBox>
                    </ItemTemplate>
                </rad:GridTemplateColumn>


    now i changed this combobox tat combo value is updated to database..






















  13. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 21 Feb 2014 in reply to Qwicksoft Link to this post

    Hi,

    I'm not clear about your requirement. I guess you want to save the selected values of the RadComboBox on a save button click. Please take a look at the below code snippet. Elaborate on your requirement if this doesn't help.

    C#:
    protected void SaveBtn_Click(object sender, EventArgs e)
    {
      foreach (GridDataItem item in RadGrid1.MasterTableView.Items)
      {
        RadComboBox combo = (RadComboBox)item.FindControl("RadComboBox1");
        string value = combo.SelectedValue;// Get the selected value of each row
        // Code to save to db
      }
    }

    Thanks,
    Princy
  14. Bheki
    Bheki avatar
    1 posts
    Member since:
    Oct 2015

    Posted 26 Oct 2015 Link to this post

    hi

    I'm using the RadGrid and having problems with alignment, when the grid is @ "20 records" the data is aligned with the column headers and filters, left aligned, although when I change the records from 20 to 50 the scroller becomes enabled and pushes the data a few pixels to the left, is there any way to enable the scroller without pushing the data, as I am a stylist and this can be nerve wrecking to me and clients. Please help ASAP

Back to Top
UI for ASP.NET Ajax is Ready for VS 2017