DevExpress GridView dans un jqueryui-tabs

Bonjour.

J'ai remarqué un problème lorsque je place un gridview de devexpress dans un jqueryui-tabs.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<div id="settings-tabs">
        <ul class="onleft">
            <li><h2>Coordonnées</h2></li>
            <li><a href="#tabs-profil">Profil</a></li>
            <li><a href="#tabs-password">Mots de passe</a></li>
            @*<li><a href="@Url.Action("CompanyLogo")">Logo de la société</a></li>*@
            <li><h2>Listes (unités, taxes...)</h2></li>
            <li><a href="#tabs-tax-list">Taxes</a></li>
            @*<li><a href="@Url.Action("")">Unités de mesure</a></li>*@
        </ul>
        <div class="onright" id="tabs-profil">
            @Html.Action("Profil", "Account")
        </div>
        <div class="onright" id="tabs-password">
            @Html.Action("Password", "Account")
        </div>
        <div class="onright" id="tabs-tax-list">
            @Html.Action("TaxList", "Tax")
        </div>
    </div>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
$(function () {
 
    $(document).ready(function () {
 
        var SettingsTabs = $("section#info div#settings-tabs");
        var SettingsTabsUl = SettingsTabs.find("ul");
        var SettingsTabsLi = SettingsTabsUl.find("li");
        var SettingsTabsLink = SettingsTabsLi.find("a");
        var SettingsTabsPanel = SettingsTabs.find("div.ui-tabs-panel");
 
        SettingsTabs.tabs().removeClass("ui-corner-all ui-widget").addClass("ui-tabs-vertical ui-helper-clearfix");
        SettingsTabsUl.removeClass("ui-corner-all ui-helper-reset ui-helper-clearfix ui-widget-header");
        SettingsTabsLi.removeClass("ui-corner-top");
        SettingsTabsPanel.removeClass("ui-corner-bottom").addClass("onright");
 
        SettingsTabsLink.click(function () {
 
            var ActualLink = $(this);
            SettingsTabsLink.parent().removeClass("ui-tabs-selected").removeClass("ui-state-active");
            ActualLink.parent().addClass("ui-tabs-selected").addClass("ui-state-active")
 
        });
 
    });
 
});

Mon problème est le suivant :
Lorsque je vais dans la section où se situe ma grille, celle-ci n'affiche aucune donnée. en fait, les colonnes sont masquées, à cause d'un "width" de 15px sur un des "table".
Ce bug est causé par le plugin de jquery, car si je commente la portion de code JS qui cré le Tabs, il n'y a plus aucun problème.

Connaissez-vous un moyen de me sortir de cette situation ?

Si oui, svp aidez-moi. Je cherche depuis hier. Google n'a pas vraiment été mon ami, je ne viens pas ici sans avoir cherché auparavant ;).

Merci.