Grid Height being Reset

[Jason Bourdette]

From another post/sample i'm using the javascript below to resize my grid height to make the grid be 100% of a div tag. It works perfect, until i set the <ClientEvents OnGridCreated="oncreated" /> property. In the "oncreated" function i was just saving off a reference to grid for something later. For some reason setting that property cause my grid to resize and to be small.

 function oncreated() {
       var RadGrid1 = RadGrid1.gridObj();
   }

---  this is working without the <ClientEvents OnGridCreated="oncreated" />

<script>
   var $ = $telerik.$; //make jQuery available through $ alias

  
   function oncreated() {
       var RadGrid1 = RadGrid1.gridObj();
   }

   function pageLoad() {
       setGridHeight(); //set grid's height on page load
   }

   $(window).resize(function () {
       setGridHeight(); //maintain grid's height on window resize
   });

   function setGridHeight() {
       var headerHeight = $('.header').outerHeight(),  //header height including margin, padding and borders
footerHeight = $('.footer').outerHeight(),  //footer height including margin, padding and borders
windowHeight = $(window).height(),          //window height
gridObj = $find('<%= RadGrid1.ClientID%>'), //grid's client object

gridHeight = windowHeight - (headerHeight + footerHeight + 2); //calculate grid's height
                    $('#' + gridObj.get_id()).height(gridHeight);                  //set grid's height to the calculated
                    gridObj.repaint();                                             //it is required to repaint the grid so it can recalculate its metrics after window resize
                }
</script>

<telerik:RadGrid ID="RadGrid1" runat="server" AllowPaging="true" PageSize="50" AllowSorting="true" OnNeedDataSource="RadGrid1_NeedDataSource">
<MasterTableView Width="100%" TableLayout="Fixed">
</MasterTableView>
<ClientSettings>
<Scrolling AllowScroll="true" UseStaticHeaders="true" />
                <ClientEvents OnGridCreated="oncreated" />
</ClientSettings>
</telerik:RadGrid>

    <style>
html,
body,
form {
height: 100%;
margin: 0;
padding: 0;
vertical-align: top;
}

.header {
height: 20px;
            background: green;
color: white;
}
.footer {
height: 20px;
background: green;
color: white;
}
</style>

[Pavlina]

Hi,

I recommend you examine RadGridBetweenDivs page from the project attached in the code library below:
http://www.telerik.com/support/code-library/setting-radgrid%27s-height-in-percents

In this example the grid is taking the place between a header and footer divs on the page. Try using the approach presented there and let me know if you still encounter the same issue.

Regards,
Pavlina
Telerik

 

 

[Jason Bourdette]

I probably should have been more clear. The sample code i have been playing with is from the link you posted. In the RadGridBetweenDivs sample if you add the following the grid no longer resizes.

<script>
   function oncreated() {
       var RadGrid1 = RadGrid1.gridObj();
   }
<script>

<ClientEvents OnGridCreated="oncreated" />

but i think i can work around that as i may no longer need to use an ongridcreated event.

In another case i'm trying to adapt the sample with the spliter to also be between divs so that i can add a header and footer. I changed the script to resize the splitter control instead of the radgrid but that didnt work.

<style>
html,
body,
form {
height: 100%;
margin: 0px;
padding: 0px;
}
        
.header {
height: 20px;
}

.loginmenu {
height: 20px;
}

.footer {
height: 20px;
}
</style>
<script>

           var $ = $telerik.$; //make jQuery available through $ alias

 

           function pageLoad() {

               setGridHeight(); //set grid's height on page load

           }

 

           $(window).resize(function () {

               setGridHeight(); //maintain grid's height on window resize

           });

 

           function setGridHeight() {

               var headerHeight = $('.header').outerHeight(),  //header height including margin

                   loginHeight = $('.loginmenu').outerHeight(),

                   footerHeight = $('.footer').outerHeight(),  //footer height including margin

                   windowHeight = $(window).height(),          //window height

                   gridObj = $find('<%= RadSplitter1.ClientID%>'),

 

               gridHeight = windowHeight - (headerHeight + loginHeight + footerHeight + 2); //calculate grid's height

                   $('#' + gridObj.get_id()).height(gridHeight);                  //set grid's height to the calculated

                   gridObj.repaint();                                             //it is required to repaint the grid so it can recalculate its metrics after window resize

           }

            

       </script>

 

       <div class="header">This is a header</div>

       <div class="loginmenu">Login</div>

 

       <telerik:RadSplitter ID="RadSplitter1" runat="server" Height="100%" Orientation="Horizontal" Width="100%">

           <telerik:RadPane ID="contentPane" Height="80%" runat="server" Scrolling="none">

               <telerik:RadSplitter ID="RadSplitter2" runat="server" Orientation="Vertical">

                   <telerik:RadPane ID="topPane" Scrolling="None" runat="server">

                    

                   </telerik:RadPane>

                   <telerik:RadSplitBar ID="RadSplitbar2" runat="server" CollapseMode="Forward">

                   </telerik:RadSplitBar>

                   <telerik:RadPane ID="bottomPane" Scrolling="None" Height="100%" runat="server">

                       <%-- >>RADGRID--%>

                       <telerik:RadGrid ID="RadGrid1" Height="100%" runat="server" OnNeedDataSource="RadGrid1_NeedDataSource"

                           AllowSorting="true">

                           <MasterTableView Width="100%" TableLayout="Fixed" AutoGenerateColumns="false">

                               <Columns>

                                   <telerik:GridBoundColumn DataField="EmployeeID" HeaderText="EmployeeID"></telerik:GridBoundColumn>

                                   <telerik:GridBoundColumn DataField="LastName" HeaderText="LastName"></telerik:GridBoundColumn>

                                   <telerik:GridBoundColumn DataField="FirstName" HeaderText="FirstName"></telerik:GridBoundColumn>

                                   <telerik:GridBoundColumn DataField="Title" HeaderText="Title"></telerik:GridBoundColumn>

                                   <telerik:GridBoundColumn DataField="ReportsTo" HeaderText="ReportsTo"></telerik:GridBoundColumn>

                               </Columns>

                           </MasterTableView>

                           <ClientSettings>

                               <Scrolling AllowScroll="true" UseStaticHeaders="true" />

                           </ClientSettings>

                       </telerik:RadGrid>

                       <%-- <<RADGRID--%>

                   </telerik:RadPane>

               </telerik:RadSplitter>

           </telerik:RadPane>

       </telerik:RadSplitter>

Thanks
jason

[Pavlina]

Hello,

In order to get grid client object OnGridCreated event you should use the code snippet below:

function oncreated() {
              var gridObj = $find("<%= RadGrid1.ClientID %>");//grid's client object
          }

I have also attached a sample test page based on the code you provided in the first post and the grid resizes to 100%  of the parent div.

In your case a javascript error is thrown therefore the grid can not resize properly.

Regards,
Pavlina
Telerik

 

 

[Jason Bourdette]

Thanks that worked out great.

I have another question about Grid re-sizing inside of a PageView. From the sample RadGridInTabStrip at:
http://www.telerik.com/support/code-library/setting-radgrid%27s-height-in-percents

I get that the PageView is Height="700px" and the Grid height is set to 100% so it clearly fills the pageview, but i want the pageview to fill the entire browser page (minus maybe a header and footer). By setting the PageView to height = 100% does not do that.

Do i need some javascript that will adjust the pageview size? I tried the below but that didnt work either.

    <script>
    var $ = $telerik.$;

    function pageLoad() {
        setPageHeight();
    }

    $(window).resize(function(){
        setPageHeight();
    });

    function setPageHeight() {
        var windowHeight = $(window).height(),          //window height
            pageObj = $find('<%= RadPageView2.ClientID%>'), //page client object

        pageHeight = windowHeight - 2;
        $('#' + pageObj.get_id()).height(pageHeight);
        pageObj.repaint();
    }
</script>

[Pavlina]

Hi,

Could you isolate the described problem in a sample runnable project and send it to us via support ticket. I will test it locally and once I get better understanding of your scenario I be able to provide more to the point answer.

Regards,
Pavlina
Telerik

 

 

[Jason Bourdette]

I'm trying to use the javascript below to resize radgrid. i want to use a line like:
var gridID2 = '<%= RadGrid' + r + '.ClientID%>'
where r is a value i populate from a query string. I check that value in a debugger and it is correct.

When i call gridObj = $find(gridID) it works, but when i call gridObj = $find(gridID2) then gridObj = null 

Thanks!!
jason


<script>

   var $ = $telerik.$; //make jQuery available through $ alias

 

   function oncreated() {

       var RadGrid1 = RadGrid1.gridObj();

   }

 

   function pageLoad() {

       setGridHeight(); //set grid's height on page load

   }

 

   $(window).resize(function () {

       setGridHeight(); //maintain grid's height on window resize

   });

 

   function setGridHeight() {

       var windowHeight = $(window).height(), 
                   var gridID = '<%= RadGrid1.ClientID%>'
                   var gridID2 = '<%= RadGrid' + r + '.ClientID%>'

          gridObj = $find(gridID), 

                   gridHeight = windowHeight - (80 + 2); 

   $('#' + gridObj.get_id()).height(gridHeight);

   gridObj.repaint();                                        

                }

</script>

[Pavlina]

Hello,

It seems like you are looking for a grid with ID="gridID2" which does not exists. Therefore, I recommend you make sure that this is the correct id of the control you are trying to access.

Regards,
Pavlina
Telerik

 

 

[Jason Bourdette]

I should have been a little more clear. I have somewhere between 10-15 RadGrids all on the same page numbered 1-15. All are marked viable=false, except on pageload i read  querystring variable and mark 1 of the 15 to viable and load data.

I want a way in javascript to resize only the currently displayed radgrid. I already have javascript code that reads the querystring value and stores that in var r, Using the code above, and assuming r=7 i need a line of javascript that will build a string  '<%= RadGrid7.ClientID%>'. so to do that i was trying

var gridID2 = '<%= RadGrid' + r + '.ClientID%>'

I also tried escaping the % with \ but that didnt seem to work, and i tried encoding the < > as &gt; &lt; but that didnt work either.

Basically i'm trying to use a value from the querystring to dynamically call $find on a control # 1-15

[Pavlina]

Hello,

You can try finding the control with the code snippet below:
findControl : function(parent, id)

- parent - the HTML parent element containing the grid
- id - the server-side ID of the grid, no need for <%= %> just "RadGrid1", "RadGrid2"

Regards,
Pavlina
Telerik

 

 

[Jason Bourdette]

findcontrol doesnt seem to be a javascript function. 

I tried $get but that didnt work either. gridObj is always null or unknown when debugging. Thanks!

<script>
   var $ = $telerik.$; //make jQuery available through $ alias

   function oncreated() {
       var RadGrid1 = RadGrid1.gridObj();
   }

   function pageLoad() {
       setGridHeight(); //set grid's height on page load
   }

   $(window).resize(function () {
       setGridHeight(); //maintain grid's height on window resize
   });

   function setGridHeight() {
       var windowHeight = $(window).height(),
                   var gridID = '<%= RadGrid1' + r,
                     gridObj = $get(gridID, "Content2"),
                   gridHeight = windowHeight - (80 + 2);
                        $('#' + gridObj.get_id()).height(gridHeight);
                        gridObj.repaint();
                }
</script>

[Jason Bourdette]

ops...bad copy/paste

<script>
   var $ = $telerik.$; //make jQuery available through $ alias

   function oncreated() {
       var RadGrid1 = RadGrid1.gridObj();
   }

   function pageLoad() {
       setGridHeight(); //set grid's height on page load
   }

   $(window).resize(function () {
       setGridHeight(); //maintain grid's height on window resize
   });

   function setGridHeight() {
                          var windowHeight = $(window).height(),
                      var gridID = 'RadGrid1' + r,
                      gridObj = $get(gridID, "Content2"),
                      gridHeight = windowHeight - (80 + 2);
                      $('#' + gridObj.get_id()).height(gridHeight);
                       gridObj.repaint();
                }
</script>

[Pavlina]

Hello,

At this point I would recommend you open a formal support ticket and send us a sample runnable project where the described problem can be observed. You can follow the instructions from the blog post below:
http://posts/10-09-29/isolating-a-problem-in-a-sample-project.aspx

We will debug it locally and will provide a proper solution.

Regards,
Pavlina
Telerik

 

 

[Jason Bourdette]

Thanks for all the help. I actually figured it out. I was making it harder then it needed to be. A simple solution was:

var r = 1;
if (r == 1)
    var gridObj = $find('RadGrid1'); //grid's client object
else if ( r == 2) 
     var gridObj = $find('RadGrid2'); //grid's client object

[Jeanne Kornkven]

Thank you Pavlina!  I am upgrading a project form 2011 Qtr 3 to 2014 Qtr 3, and this link solved my problem.

[Pavlina]

Hello,

We are glad to hear that upgrading to newer version resolved your problem. Do not hesitate to contact us if other questions or problems arise.

Regards,
Pavlina
Telerik