We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Error rendering grid in bootstrap tab hidden

Thread ID:

Created:

Updated:

Platform:

Replies:

123398 Mar 14,2016 08:45 PM UTC Mar 15,2016 02:39 PM UTC ASP.NET Web Forms 3
loading
Tags: Grid
Roimer Machacón Otero
Asked On March 14, 2016 08:45 PM UTC

Hi, attached to this comment the example with the error that occur.

What happens is the following: We've a tab of bootstrap, in each tab have a grid both grids use scrolling and stackedheaders.

Now the grid in the first tab work correctly, but the grid in the second tab that is initially hidden the columns of the grid appear compressed.

Watching in the console we can observe that width of the second grid is rendering with a little width (Attached image in the zip file).

Attachment: PruebaSyncfusion2_1f804270.rar

Roimer Machacón Otero
Replied On March 14, 2016 08:48 PM UTC

Hi, the syncfusion version used is 12.4.0.34 in SO Windows 7/8

Roimer Machacón Otero
Replied On March 14, 2016 08:51 PM UTC

Hi, attached the file updated

Attachment: PruebaSyncfusion2_e74e559b.rar

Jayaprakash Kamaraj [Syncfusion]
Replied On March 15, 2016 02:39 PM UTC

Hi Roimer  ,

While rendering gird in inactive tab, grid is in hidden state. Since grid is in hidden state , scroller doesn’t render properly. To overcome this problem, we need to manually refresh the grid scroller when the tab is get active.

Code example:

                  <script>

                        $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {

                            var obj = $("#g2").ejGrid("instance")

                            obj._refreshScroller({ requestType: 'refresh' }) //to refresh the scroller

                            obj.getHeaderTable()[0].style.width = obj.getContentTable()[0].style.width = "1100px"

                        })


    </script>


Sample: http://www.syncfusion.com/downloads/support/forum/123398/ze/PruebaSyncfusion-1358817340

Regards,

Jayaprakash K.

CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;