Rad grid height

10 posts, 0 answers
  1. vairam
    vairam avatar
    85 posts
    Member since:
    May 2008

    Posted 12 Dec 2008 Link to this post

    Hi

    I need a scroll bar if the height of the grid exceed 300px  otherwise i dont need the scroll bar.
    If i have only one records in grid even its taking the height of 300 px.What i need is it should shrink depends on the records.that means can i dynamatically change the height of the radgrid.

    Regards
    Vairam
  2. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 12 Dec 2008 Link to this post

    Hello Vairam,

    You can check out the following code to adjust grid height dynamically.

    aspx:
    <radG:RadGrid ID="RadGrid1" runat="server" AutoGenerateColumns="true" DataSourceID="SqlDataSource1">  
                    <ClientSettings>  
                        <Scrolling AllowScroll="true" ScrollHeight="300px" UseStaticHeaders="true" />  
                        <ClientEvents OnGridCreated="GridCreated" />  
                    </ClientSettings>  
    </radG:RadGrid>             
     

    js:
    <script type="text/javascript">  
            function GridCreated()  
            {  
              var scrollArea = document.getElementById(this.ClientID + "_GridData");  
              if(this.MasterTableView.Control.clientHeight <=  parseInt(this.ClientSettings.Scrolling.ScrollHeight))  
                scrollArea.style.height = this.MasterTableView.Control.clientHeight + "px";  
            }  
        </script> 

    Thanks
    Princy.


  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Tab Alleman
    Tab Alleman avatar
    18 posts
    Member since:
    Apr 2010

    Posted 25 Jun 2010 Link to this post

    I am employing this solution on two different pages.   On one page it works perfectly, and on the other I am getting a javascript error in the function:

    Microsoft JScript runtime error: 'this.MasterTableView.Control' is null or not an object

    I am using exactly the same function and the exact same ClientSettings in both places.   What could cause this error on one page and not the other?
  5. Tab Alleman
    Tab Alleman avatar
    18 posts
    Member since:
    Apr 2010

    Posted 25 Jun 2010 Link to this post

    Ok I have discovered that on the page where the script works, I have the old .NET Rad Assembly registered, and on the page where it does not work, I have the new Ajax assembly.

    How can I modify this function so that it will work with the new Ajax RadGrid?
  6. Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 28 Jun 2010 Link to this post

    Hi Tab,

    Please refer to:

    http://www.telerik.com/help/aspnet-ajax/grdresizegridwithscrollingwhenlessdata.html

    "scrollArea" (sender.GridDataDiv) is the scrollable <div>
    "sender.get_masterTableView().get_element()" is the mastertableview's <table> element, which is placed inside the scrollable <div>

    By comparing the offsetHeight (or clientHeight) of the two, you will be able to determine whether to set different height to the scrollArea or not.

    Sincerely yours,
    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
  7. Tab Alleman
    Tab Alleman avatar
    18 posts
    Member since:
    Apr 2010

    Posted 28 Jun 2010 Link to this post

    Thanks Dimo, that's what I needed!

    -Tab
  8. Thad
    Thad avatar
    106 posts
    Member since:
    Sep 2010

    Posted 28 Sep 2010 Link to this post

    Using: Telerik RadControls for ASP.Net AJAX Q1 2010 SP2

    Hi Dimo,

    Thanks for the link on how to shrink the grid if there are fewer rows than there is scrollable space.

    One problem, though, is that this code doesn't appear to work if the grid is on a RadWindow.

    This line of code always returns 0.  In fact, all of the properties .clientHeight, .clientWidth, etc. are 0.
        sender.get_masterTableView().get_element().clientHeight;

    Here is our implementation of your sample code
    function GridCreated(sender, args)
    {
        var scrollArea = sender.GridDataDiv; //Gets the height of the scrollable area
        
    var dataHeight = sender.get_masterTableView().get_element().clientHeight; //gets the actual height of the grid
        
    if (dataHeight < scrollArea.clientHeight)
        {
            scrollArea.style.height = dataHeight + "px";
        }
    }

    Any suggestions or links?
    Thanks!
    Thad

    Here is the debug info from the immediate window:
    ?sender.get_masterTableView().get_element()
    {object}
        accessKey: ""
        align: ""
        all: {Count = 20}
        ariaActivedescendant: ""
        ariaBusy: ""
        ariaChecked: ""
        ariaControls: ""
        ariaDescribedby: ""
        ariaDisabled: ""
        ariaExpanded: ""
        ariaFlowto: ""
        ariaHaspopup: ""
        ariaHidden: ""
        ariaInvalid: ""
        ariaLabelledby: ""
        ariaLevel: 0
        ariaLive: ""
        ariaMultiselectable: ""
        ariaOwns: ""
        ariaPosinset: 0
        ariaPressed: ""
        ariaReadonly: ""
        ariaRelevant: ""
        ariaRequired: ""
        ariaSecret: ""
        ariaSelected: ""
        ariaSetsize: 0
        ariaValuemax: ""
        ariaValuemin: ""
        ariaValuenow: ""
        attributes: {Count = 124}
        background: ""
        behaviorUrns: {...}
        bgColor: ""
        border: "0"
        borderColor: ""
        borderColorDark: ""
        borderColorLight: ""
        canHaveChildren: true
        canHaveHTML: true
        caption: null
        cellPadding: ""
        cells: {Count = 8}
        cellSpacing: "0"
        childNodes: {Count = 2}
        children: {Count = 2}
        className: "rgMasterTable rgClipCells"
        clientHeight: 0
        clientLeft: 0
        clientTop: 0
        clientWidth: 0
        cols: 0
        constructor: {...}
        contentEditable: "inherit"
        currentStyle: {...}
        dataFld: ""
        dataFormatAs: ""
        dataPageSize: 0
        dataSrc: ""
        dir: ""
        disabled: false
        document: {object}
        filters: {...}
        firstChild: {object}
        frame: ""
        height: ""
        hideFocus: false
        id: "ctl00_cphMasterAjax_rgEndorsementState_ctl00"
        ie8_attributes: {Count = 124}
        innerText: "zzzzzz"
        isContentEditable: false
        isDisabled: false
        isMultiLine: true
        isTextEdit: false
        lang: ""
        language: ""
        lastChild: {object}
        nextSibling: null
        nodeName: "TABLE"
        nodeType: 1
        nodeValue: null
        offsetHeight: 0
        offsetLeft: 0
        offsetParent: {object}
        offsetTop: 0
        offsetWidth: 0
        outerHTML: "
        outerText: "zzzzzz"
        ownerDocument: {object}
        parentElement: {object}
        parentNode: {object}
        parentTextEdit: {object}
        previousSibling: null
        readyState: "complete"
        recordNumber: null
        role: ""
        < More... (The first 100 of 121 items were displayed.) >

  9. Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 28 Sep 2010 Link to this post

    Hello Thad,

    Javascript size calculations do not work when the manipulated elements are placed inside a container with a display:none style. Most probably this is your case.

    Execute the JS code after the RadWindow and its content are visible on the screen - e.g. using the RadWindow's OnClientShow event.

    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
  10. Thad
    Thad avatar
    106 posts
    Member since:
    Sep 2010

    Posted 30 Sep 2010 Link to this post

    Thanks, Dimo.

    We have the JavaScript being called now after the page is done being loaded and it's working as expected.

    -Thad
  11. Sivakumar
    Sivakumar avatar
    1 posts
    Member since:
    Aug 2013

    Posted 12 Aug 2013 Link to this post

    Please try this for fixing the height of rad grid based on number of records and if exceeds the scrolling height it allows scrollbar

    <script type="text/javascript">
     function GridCreated(sender) {
            var scrollArea = document.getElementById(sender.ClientID + "_GridData");
           // alert(sender.get_masterTableView().get_element().offsetHeight);
          //  alert(sender.get_element().offsetHeight);
            if(sender.get_masterTableView().get_element().offsetHeight<=sender.get_element().offsetHeight)
             scrollArea.style.height = sender.get_masterTableView().get_element().offsetHeight + "px";
        }  
    </script>
    and call the event in clientsettings of the radgrid like bellow
    <clientsettings>
      <ClientEvents OnGridCreated="GridCreated" />
    </clientsettings>
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017