RadGrid inside RadTabStrip

14 posts, 1 answers
  1. Marco Beyer
    Marco Beyer avatar
    22 posts
    Member since:
    Jun 2009

    Posted 04 Apr 2011 Link to this post

    Dear Telerik-Staff,

    I have the following issue:

    I have a RadTabStrip with sime Tabs and inside each tab is a RadGrid which has scrolling enabled. My settings are:

    <Scrolling AllowScroll="true" UseStaticHeaders="true" ScrollHeight="500px"/> 

     
    Now, when scrolling is enabled, RadGrid doesn't fit its height to the content, it contains. The height will me much larger than the content itself. As a workaroung, I implemented a client side function Telerik provided on a demo page. The code is

     

    function GridCreated(sender, args) {
                var scrollArea = sender.GridDataDiv;
                var dataHeight = sender.get_masterTableView().get_element().clientHeight;
                if (dataHeight < 500) {
                    scrollArea.style.height = dataHeight + 17 + "px";
                }
            }

     


    In order to call that function, I regisrered it in the OnGridCreated-event of each RadGrid.

    My problem is that the RadGrid on the first Tab (which is selected by default) displays its content as expected, but when selecting one of the nexts tabs (2,3,4,5, etc.) the grids inside these tabs are only (i guess) 17 pixels height. When clicking for eaxample "refresh" on a grid, the grid's height is calculated properly (or in general: when a post back is raised).

    Can you tell me what I can do that the grid's height will be calculated properly when being inside a radtabstrip and with scrolling enabled?

    Happy to hear from you,
    Marco
  2. Dimitar Terziev
    Admin
    Dimitar Terziev avatar
    1266 posts

    Posted 07 Apr 2011 Link to this post

    Hello Marco,

    In order to deal with this problem subscribe on OnClientTabSelected event of the RadTabStrip, locate the corresponding RadGrid and call its repaint() method.

    Regards,
    Dimitar Terziev
    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
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Marco Beyer
    Marco Beyer avatar
    22 posts
    Member since:
    Jun 2009

    Posted 08 Apr 2011 Link to this post

    Dear Dimitar,

    thanks for the reply. I did what you suggested, but didn't have success with that. On the page, I have addeded the following RadCodeBlock:

    <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server"
            <script type="text/javascript">
                function ClientTabSelectedHandler(sender, eventArgs) {
                    var radgrid = $find('<%= MyRadGrid.ClientID %>');
                    radgrid.repaint(); 
                }
            </script>        
    </telerik:RadCodeBlock>

    And then my RadTabStrip subscribes to the OnClientTabSelected.

    OnClientTabSelected="ClientTabSelectedHandler"

    Unfortunately this does not repaint the grid, meaning that the height of the grid still is as small as before.

    Did I do something wrong?

    Best regards,
    Marco
  5. Dimitar Terziev
    Admin
    Dimitar Terziev avatar
    1266 posts

    Posted 13 Apr 2011 Link to this post

    Hello Marco,

    Could you clarify, if these RadGrids are in PageViews or not. If there are different RadGrids in each PageView, you should refer the corresponding grid. From your code snippet appears that you are referencing only one grid and calling its repaint method.

    Please provide us with more information so we could help you out.

    All the best,
    Dimitar Terziev
    the Telerik team

    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

  6. Marco Beyer
    Marco Beyer avatar
    22 posts
    Member since:
    Jun 2009

    Posted 13 Apr 2011 Link to this post

    Dear Dimitar,

    thanks for your reply. The hirarchy is as follows: I have a RadMultiPage which is the container for several RadPageViews. Each of the RadPageViews contains a RadGrid which display data to the "topic" the specific radpageview stands for. Like this

    RadMultiPage 
        RadPageView1
            Panel
                Grid
        RadPageView2
            Panel
                Grid
        RadPageView3
            Panel
                Grid
        etc.

    In order to see, if the JavaScript-Code works, I made a test for only one RadGrid. This is why you thought that I only would have one Grid: I added the OnClientTabSelected-Event to the RadTabStrip (as mentioned in m previous post). Inside the javacript-function which is called, when OnClientTabSelected fires, I called the RadGrid of the second radpageview (index = 1), which isn't visible when the page load.

    But the Grid inside this second radpageview isn't redrawn.

    Could you provide me with a sample with a grid with scrolling enabled inside a multipage with multiple page views?

    Best regards,
    Marco
  7. Dimitar Terziev
    Admin
    Dimitar Terziev avatar
    1266 posts

    Posted 19 Apr 2011 Link to this post

    Hi Marco,

    In order to troubleshoot this issue I would like to return to your initial problem.

    The cause of your current issue is GridCreated client-side event handler function. I'm not quite sure what you have meant by the "RadGrid doesn't fit its height to the content, it contains. The height will me much larger than the content itself" . You have mentioned this as a primary cause of your issues.

    In general ,if you define a height for your scrolling aria as you have done
    <Scrolling AllowScroll="true" UseStaticHeaders="true" ScrollHeight="500px"/>
    and you have small amount of items, there will be blank space in grids content area. That's why my suggestion is to remove this predefined height and let the RadGrid calculates its default height.

    If the above suggestion doesn't suits your scenario we would try to find another workaround.

    You could find attached the sample page I've tested.

    All the best,
    Dimitar Terziev
    the Telerik team

    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

  8. Marco Beyer
    Marco Beyer avatar
    22 posts
    Member since:
    Jun 2009

    Posted 20 Apr 2011 Link to this post

    Hi Dimitar,

    ok, new approach:

    If scrolling is disabled for the grid, the grid always calculates its height by the content, it displays. So there will be no blank space. The grid is as high as the content, it displays.

    When you enable scrolling by addding <scrolling allowscroll = true.... the grid does no longer calculate its height by the actual content, it displays (instead, it uses its standard height until the height of the items is larger than the standard height of the grid). In order to avoid that, I followed the example of adding the GridCreated-javascript function (as mentioned below).

    When doing so, the grid also calculates its height by the actual content, it displays (when scrolling is enabled) plus some extra space for the scroll bar (in my case 17px). But then, the height of each grid inside an initially non selected tab is just (in my case) 17px height until you manually refrsh it. 

    Try adding the javascript function GridCreated to the sample you attached here and register it for the OnGridCreated-Event for each grid. Then you will see that it works for the grid which is inside the first (and initially selected) tab. But for the scond and third tab, its height will only be 17 px.

    If there is no work around for this, Il would remove the GridCreated-Event (and function) and let each grid display its default height.

    Best regards,
    Marco 
  9. Dimitar Terziev
    Admin
    Dimitar Terziev avatar
    1266 posts

    Posted 26 Apr 2011 Link to this post

    Hello Marco,

    As I have mentioned in my previous post ,the best approach for your scenario is to remove the ScrollHeight from your declaration and let the RadGrid calculated its default height.

    This way you will overcome the problem with the blank space.

    Kind regards,
    Dimitar Terziev
    the Telerik team

    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

  10. Marco Beyer
    Marco Beyer avatar
    22 posts
    Member since:
    Jun 2009

    Posted 27 Apr 2011 Link to this post

    Hello,

    yes ok, I did that for the grids inside the tabstrips (where the javascript code isn't working as expected).

    Regards,
    Marco
  11. Answer
    Dimitar Terziev
    Admin
    Dimitar Terziev avatar
    1266 posts

    Posted 04 May 2011 Link to this post

    Hello Marco,

    Please clarify, if you have managed to solve your issue.

    In case that you still experience the previously discussed problem, please open a support ticket and provide us with sample project so we could test it locally.

    Greetings,
    Dimitar Terziev
    the Telerik team

    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

  12. Marco Beyer
    Marco Beyer avatar
    22 posts
    Member since:
    Jun 2009

    Posted 13 May 2011 Link to this post

    Dear Dimitar,

    I haven't managed to solve this issue using the javascript-approach. Instead, I followed your suggestion of removing the scroll height property. Now the Grid displays its default height (which might be higher than the height of the items, the grid displays when the grid has just a few items to display).

    But that is ok for me since the grid normally displays lots of elements (which will exceed the grids default height).

    So I will mark this thread as answered.

    Best regards,
    Marco
  13. Vasssek
    Vasssek avatar
    143 posts
    Member since:
    Aug 2010

    Posted 11 Nov 2011 Link to this post

    Hello Marco,

    I had the same problem with radgrid height when it's inside of RadTabStrip. My workaround is to call GridCreated function from OnClientTabSelected RadTabStrip event.

    Here is the code:
    function OnClientTabSelected(sender, eventArgs) {
        if (sender.get_selectedIndex() == 0) {
           var radgrid = $find("<%= RadGrid1.ClientID %>");
           GridCreated(radgrid);
        }
    }

    This way, the radgrid height will be reintialized properly, when radtab with index 0 has been selected.

    Best regards

    Vasssek
  14. PARAS
    PARAS avatar
    1 posts
    Member since:
    Nov 2016

    Posted 02 Nov Link to this post

    HI,

    I'm using Radstrip which has 3 tabs, a multipage view which has 3 radpageviews, each pageview has one radGrid. Now I've used virtualization in all 3 radGrids to load data dynamically on scroll. It is working fine on 1st radGrid but its not working on radGrid2 and radGrid3. All 3 radPageViews and radGrids have identical code, only datasource differs.

     

    Can you please help me on this?

  15. Nencho
    Admin
    Nencho avatar
    1458 posts

    Posted 07 Nov Link to this post

    Hello Paras,

    Could you please share a bit more on your implementation? Do you experience any js errors in your browser console? Also, what type of approach do you use to create the TabStrip and associated Multipage? Do you create them dynamically on tab click? 

    Regards,
    Nencho
    Telerik by Progress
    Check out the new UI for ASP.NET Core, the most complete UI suite for ASP.NET Core development on the market, with 60+ tried-and-tested widgets, based on Kendo UI.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017