This is a migrated thread and some comments may be shown as answers.

Rad grid height

9 Answers 307 Views
Grid
This is a migrated thread and some comments may be shown as answers.
vairam
Top achievements
Rank 1
vairam asked on 12 Dec 2008, 09:29 AM
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

9 Answers, 1 is accepted

Sort by
0
Princy
Top achievements
Rank 1
answered on 12 Dec 2008, 10:21 AM
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.


0
Tab Alleman
Top achievements
Rank 1
answered on 25 Jun 2010, 02:35 PM
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?
0
Tab Alleman
Top achievements
Rank 1
answered on 25 Jun 2010, 04:30 PM
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?
0
Dimo
Telerik team
answered on 28 Jun 2010, 01:59 PM
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
0
Tab Alleman
Top achievements
Rank 1
answered on 28 Jun 2010, 07:30 PM
Thanks Dimo, that's what I needed!

-Tab
0
Thad
Top achievements
Rank 2
answered on 28 Sep 2010, 01:56 PM
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.) >

0
Dimo
Telerik team
answered on 28 Sep 2010, 02:00 PM
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
0
Thad
Top achievements
Rank 2
answered on 30 Sep 2010, 03:59 PM
Thanks, Dimo.

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

-Thad
0
Sivakumar
Top achievements
Rank 1
answered on 12 Aug 2013, 06:20 AM
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>
Tags
Grid
Asked by
vairam
Top achievements
Rank 1
Answers by
Princy
Top achievements
Rank 1
Tab Alleman
Top achievements
Rank 1
Dimo
Telerik team
Thad
Top achievements
Rank 2
Sivakumar
Top achievements
Rank 1
Share this question
or