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

RadGrid inside RadTabStrip

13 Answers 399 Views
TabStrip
This is a migrated thread and some comments may be shown as answers.
Marco Beyer
Top achievements
Rank 1
Marco Beyer asked on 04 Apr 2011, 07:24 AM
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

13 Answers, 1 is accepted

Sort by
0
Dimitar Terziev
Telerik team
answered on 07 Apr 2011, 02:26 PM
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
0
Marco Beyer
Top achievements
Rank 1
answered on 08 Apr 2011, 08:53 AM
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
0
Dimitar Terziev
Telerik team
answered on 13 Apr 2011, 12:45 PM
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.

0
Marco Beyer
Top achievements
Rank 1
answered on 13 Apr 2011, 04:24 PM
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
0
Dimitar Terziev
Telerik team
answered on 19 Apr 2011, 06:26 PM
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.

0
Marco Beyer
Top achievements
Rank 1
answered on 20 Apr 2011, 07:47 AM
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 
0
Dimitar Terziev
Telerik team
answered on 26 Apr 2011, 03:44 PM
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.

0
Marco Beyer
Top achievements
Rank 1
answered on 27 Apr 2011, 10:50 AM
Hello,

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

Regards,
Marco
0
Accepted
Dimitar Terziev
Telerik team
answered on 04 May 2011, 01:41 PM
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.

0
Marco Beyer
Top achievements
Rank 1
answered on 13 May 2011, 03:17 PM
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
0
Vasssek
Top achievements
Rank 1
answered on 11 Nov 2011, 11:13 PM
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
0
PARAS
Top achievements
Rank 1
answered on 02 Nov 2016, 09:55 AM

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?

0
Nencho
Telerik team
answered on 07 Nov 2016, 07:09 AM
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.
Tags
TabStrip
Asked by
Marco Beyer
Top achievements
Rank 1
Answers by
Dimitar Terziev
Telerik team
Marco Beyer
Top achievements
Rank 1
Vasssek
Top achievements
Rank 1
PARAS
Top achievements
Rank 1
Nencho
Telerik team
Share this question
or