setting ScrollArea dynamically in Javascript

7 posts, 0 answers
  1. Dave Hollen
    Dave Hollen avatar
    46 posts
    Member since:
    Jan 2010

    Posted 16 Feb 2010 Link to this post

    Hello,

    I am using a Radgrid which I am setting the ScrollArea on the OnGridCreated Client Event.

    The issue I am running into is when the user puts the grid into edit mode.  I have a user control as the Edit form for the grid. 

    The javascript I have does not seem to be calculating the height correctly when the grid is in edit mode.

    Is there a way that I can get the height of the user control in Javascript so that I can adjust the ScrollArea accordingly? 

    Here is my Javascript (works fine if grid not in Edit Mode):

    function

     

    rgUsers_Client_OnGridCreated(sender, args)

     

    {

     

     

     

     

    var scrollArea = sender.GridDataDiv;

     

     

    if (scrollArea)

     

    {

     

    var masterTable = sender.get_masterTableView();

     

     

    if (masterTable)

     

    {

     

    var element = masterTable.get_element();

     

     

    if (element)

     

    {

     

    var dataHeight = element.clientHeight;

     

     

    if (dataHeight < 350)

     

    {

    scrollArea.style.height = dataHeight + 17 +

    "px";

     

    }

    }

    }

    }

    }

    Thanks!
    Dave

  2. Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 17 Feb 2010 Link to this post

    Hi Dave,

    I don't see any problems with your code. Here is my test page. Let me know if I am missing something.

    <%@ Page Language="C#" %>
    <%@ Import Namespace="System.Data" %>
    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
     
    <script runat="server">
     
        protected void rgUsers_NeedDataSource(object sender, GridNeedDataSourceEventArgs e)
        {
            DataTable dt = new DataTable();
            DataRow dr;
            int colsNum = 4;
            int rowsNum = 2;
            string colName = "Column";
     
            for (int j = 1; j <= colsNum; j++)
            {
                dt.Columns.Add(String.Format("{0}{1}", colName, j));
            }
     
            for (int i = 1; i <= rowsNum; i++)
            {
                dr = dt.NewRow();
     
                for (int k = 1; k <= colsNum; k++)
                {
                    dr[String.Format("{0}{1}", colName, k)] = String.Format("{0}{1} Row{2}", colName, k, i);
                }
                dt.Rows.Add(dr);
            }
     
            (sender as RadGrid).DataSource = dt;
        }
     
    </script>
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     
    <head runat="server">
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <title>RadControls</title>
    </head>
    <body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server" />
     
    <telerik:RadGrid
        ID="rgUsers"
        runat="server"
        AutoGenerateEditColumn="true"
        OnNeedDataSource="rgUsers_NeedDataSource">
        <ClientSettings>
            <Scrolling AllowScroll="true" UseStaticHeaders="true" />
            <ClientEvents OnGridCreated="rgUsers_Client_OnGridCreated" />
        </ClientSettings>
        <MasterTableView CommandItemDisplay="Top" />
    </telerik:RadGrid>
     
    <script type="text/javascript">
     
    function rgUsers_Client_OnGridCreated(sender, args)
    {
        var scrollArea = sender.GridDataDiv;
        if (scrollArea)
        {
            var masterTable = sender.get_masterTableView();
            if (masterTable)
            {
                var element = masterTable.get_element();
                if (element)
                {
                    var dataHeight = element.clientHeight;
                    if (dataHeight < 350)
                    {
                        scrollArea.style.height = dataHeight + 17 + "px";
                    }
                }
            }
        }
    }
     
    </script>
     
    </form>
    </body>
    </html>


    Kind regards,
    Dimo
    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Dave Hollen
    Dave Hollen avatar
    46 posts
    Member since:
    Jan 2010

    Posted 17 Feb 2010 Link to this post

    Dimo,

    The issue I am having is that when the grid is in edit mode, even though I am setting the scroll area the vertical scroll bar still shows and it is only needed to scroll 4 or 5 pixels (see attached screen shot).

    When the grid is not in edit mode, the scroll area is set correctly and no vertical scroll bar is displayed.
  5. Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 17 Feb 2010 Link to this post

    Hi Dave,

    Probably there is something in the edit form, which expands after the scrollArea height calculation. Try setting a larger height.

    Kind regards,
    Dimo
    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.
  6. Dave Hollen
    Dave Hollen avatar
    46 posts
    Member since:
    Jan 2010

    Posted 17 Feb 2010 Link to this post

    Dimo,

    Thanks for all the help so far.

    One more question - in the java script that I posted, is there a way to dynamically get what the "17" corresponds to in this line of code:

    scrollArea.style.height = dataHeight + 17 +

     

    "px";


    What is the 17?  I got this code from one of the online help articles on the Telerik website.

    Thanks,
    Dave

  7. robertw102
    robertw102 avatar
    265 posts
    Member since:
    Jul 2007

    Posted 17 Feb 2010 Link to this post

    I believe the "17" is to compensate for the header row.
  8. Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 17 Feb 2010 Link to this post

    Hello,

    The number 17 is for the horizontal scrollbar height. You can get that dynamically with

    var scrH = Telerik.Web.UI.Grid.getScrollBarHeight();


    Regards,
    Dimo
    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.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017