Grid Height being Reset

16 posts, 0 answers
  1. Jason Bourdette
    Jason Bourdette avatar
    77 posts
    Member since:
    Jan 2010

    Posted 12 Jan 2015 Link to this post

    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>

  2. Pavlina
    Admin
    Pavlina avatar
    6084 posts

    Posted 15 Jan 2015 Link to this post

    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
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Jason Bourdette
    Jason Bourdette avatar
    77 posts
    Member since:
    Jan 2010

    Posted 15 Jan 2015 in reply to Pavlina Link to this post

    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
  5. Pavlina
    Admin
    Pavlina avatar
    6084 posts

    Posted 20 Jan 2015 Link to this post

    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
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  6. Jason Bourdette
    Jason Bourdette avatar
    77 posts
    Member since:
    Jan 2010

    Posted 28 Jan 2015 in reply to Pavlina Link to this post

    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>





  7. Pavlina
    Admin
    Pavlina avatar
    6084 posts

    Posted 02 Feb 2015 Link to this post

    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
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  8. Jason Bourdette
    Jason Bourdette avatar
    77 posts
    Member since:
    Jan 2010

    Posted 11 Feb 2015 Link to this post

    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>
  9. Pavlina
    Admin
    Pavlina avatar
    6084 posts

    Posted 12 Feb 2015 Link to this post

    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
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  10. Jason Bourdette
    Jason Bourdette avatar
    77 posts
    Member since:
    Jan 2010

    Posted 12 Feb 2015 in reply to Pavlina Link to this post

    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








  11. Pavlina
    Admin
    Pavlina avatar
    6084 posts

    Posted 17 Feb 2015 Link to this post

    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
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  12. Jason Bourdette
    Jason Bourdette avatar
    77 posts
    Member since:
    Jan 2010

    Posted 18 Feb 2015 Link to this post

    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>
  13. Jason Bourdette
    Jason Bourdette avatar
    77 posts
    Member since:
    Jan 2010

    Posted 18 Feb 2015 in reply to Jason Bourdette Link to this post

    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>
  14. Pavlina
    Admin
    Pavlina avatar
    6084 posts

    Posted 23 Feb 2015 Link to this post

    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
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  15. Jason Bourdette
    Jason Bourdette avatar
    77 posts
    Member since:
    Jan 2010

    Posted 23 Feb 2015 in reply to Pavlina Link to this post

    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
  16. Jeanne Kornkven
    Jeanne Kornkven avatar
    14 posts
    Member since:
    May 2008

    Posted 27 Mar 2015 in reply to Pavlina Link to this post

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

    Posted 30 Mar 2015 Link to this post

    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
     

    See What's Next in App Development. Register for TelerikNEXT.

     
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017