WelcomeForumsCommunityBug – Gird with paging nested in Tabs breaks addition of new tab.

Wijmo Team Member
Aaron Barry posted on October 6, 2011 at 10:29 am link

When a wijGrid with paging is nested inside either wijTabs or UI Tabs new tabs cannot be added properly using the ‘add’ method of the tabs widget. When the bug appears the tab appear to have been created properly (the DOM elements are added), however the selection handlers are not present so you cannot select and view the new tab properly. Also existing tabs break after the error.

This only appears to happen when the wijgrid has paging and the alignment of the tabs is set to bottom or right.

Examples
1/ wijGrid nested in wijTabs, tabs at top. Paging enabled. All works, you can click the ‘Add tab button’ and the new tab is added. All 3 tabs can be viewed correctly. http://jsfiddle.net/YXDad/1/

2/ wijGrid nested in wijTabs, tabs at bottom. Paging enabled. Error thrown when adding the tab. Tabs not longer work properly when clicked. The only difference between this and Ex1 is the change of alignment from top to bottom. http://jsfiddle.net/z2rDM/2/

3/ wijGrid nested in wijTabs, tabs at bottom. Paging disabled . Now works correctly.http://jsfiddle.net/YxbpD/1/. Only difference between this in EX2 is removal of paging.

Issue has been reproduced in FF and Chrome.

Feel free to contact me if you have any questions regarding this issue.

Wijmo Team Member
sergeys posted on October 7, 2011 at 3:10 am link

The wijtabs widget confict with wijgrid (with wijpager, to be precisely). We will fix the issue.

wijtabs looks for the first ul (tab list) through all the child tree of objects, when alignment: “bottom” is used the list is under the wijgrid instance, thus wijtabs sees wijpager also containing uls and tries to use it as a list of tabs.

workarounds:
- do not use paging in the grid.
- or, use alignment: “top” in wijtabs.
- or find the _tabify() method in jquery.wijmo.wijtabs.js, replace the very first row this.element.find(‘ol,ul’) to this.element.children(‘ol,ul’). Register changed script after jquery.wijmo-open.1.5.0.min.js.

Answer
Wijmo Team Member
Aaron Barry posted on October 7, 2011 at 10:36 am link

Nice one, thanks.

Answer
Wijmo Team Member
Samuel Williams posted on June 22, 2012 at 12:18 am link

I had this issue as well, none of the solutions that I found on the internet worked like I wanted to, so I ended up using the following code to make grids in tabs show up properly:

$(“#tabs”).wijtabs({show: function (e, ui) {
$(“#grid1″).width(“100%”);
$(“#grid2″).width(“100%”);
//add an additional line for every tab that you have
}});

Answer

This topic has 3 voices, contains 3 replies, and was last updated by  Samuel Williams 334 days ago.

You must be logged in to reply to this topic.