Rad grid height

[vairam]

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

[Princy]

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.

[Tab Alleman]

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?

[Tab Alleman]

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?

[Dimo]

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

[Tab Alleman]

Thanks Dimo, that's what I needed!

-Tab

[Thad]

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.) >

[Dimo]

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

[Thad]

Thanks, Dimo.

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

-Thad

[Sivakumar]

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>