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. Image for the cookie policy date

The TreeGrid doesn't work properly in a tab

Hello, I have a problem with TreeGrid in a Tab.
I use several tab in an administration panel, and each tab contain a partial view as you can see below :

 <div>
     @Html.EJ().Tab("TabAdmin").Height("auto").EnableAnimation(true).HeightAdjustMode(HeightAdjustMode.Fill).Height("calc(100vh - 125px)").Items(data =>
                 {
                     data.Add().ID("generale").Text("Générale")
                         .ContentTemplate(@<div>@Html.Partial("~/Views/Admin/Onglets/PartialAdminGeneral.cshtml")</div>);
                     data.Add().ID("exclusions").Text("Exclusions Spécialités & Praticiens")
                         .ContentTemplate(@<div>@Html.Partial("~/Views/Admin/Onglets/PartialAdminExclusions.cshtml")</div>);
                 })
 </div>

The first partial view contain several forms input.
And the second contain a TreeGrid as you can see below : 

@(Html.EJ().TreeGrid("TreeGridContainer")
    .ChildMapping("Children")
    .Locale("fr-FR")
    .AllowColumnResize(true).CommonWidth(42)
    .TreeColumnIndex(1)
    .Columns(co =>
    {
        co.Field("REF_SPECIALITE").HeaderText("Référence spécialitée").Add();
        co.Field("LIBELLE").HeaderText("Nom Spécialitée").Add();
    })
    .Datasource(ViewBag.Parametres.Exclusions)
)
@Html.EJ().ScriptManager()

But, the TreeGrid's width is equal to 0 !
So we don't see the TreeGrid.
And if we put the partial view with the TreeGrid in first, it's work correctly.

Like this : 
data.Add().ID("exclusions").Text("Exclusions Spécialités & Praticiens")
                         .ContentTemplate(@<div>@Html.Partial("~/Views/Admin/Onglets/PartialAdminExclusions.cshtml")</div>);
data.Add().ID("generale").Text("Générale")
                         .ContentTemplate(@<div>@Html.Partial("~/Views/Admin/Onglets/PartialAdminGeneral.cshtml")</div>);

I have try the same thing in another blank project, and same result. Can you help me please ?


Thank's for your help
Cholet

3 Replies

JD Jayakumar Duraisamy Syncfusion Team June 19, 2017 05:16 PM UTC

Hi Cholet, 
Thank you for contacting Syncfusion support. 
At the load time, the TreeGrid will be rendered inside the hidden element of tab control. Hence, the control width and height will not be updated properly. To overcome this issue, we have to update the “SizeSettings” of TreeGrid once we switched to second tab.  
For that Tab control have an event called “ItemActive”. It will be triggered when we switch the tab. In this event we can update the TreeGrid control size properly. 
Please refer following code snippet, 
@Html.EJ().Tab("TabAdmin") 
//.. 
.ClientSideEvents(eve => eve.ItemActive("itemActive")) 
 
<script type="text/javascript"> 
       function itemActive(args) { 
            //returns current active index. 
            if(args.activeIndex == 1){ 
            var obj = $("#TreeGridContainer").data("ejTreeGrid"); 
            obj.setModel({ "sizeSettings": { "height": "450px", "width": "100%" } }); 
         
        } 
 </script> 
Please refer following tab event online documentation link as below, 
Please let us know, if you require any other assistance. 
Regards, 
Jayakumar D 



CH Cholet June 20, 2017 03:34 PM UTC

It works. Thank you.


Cholet



JD Jayakumar Duraisamy Syncfusion Team June 21, 2017 05:33 AM UTC

Hi Cholet, 
We are glad that your requirement has been met. Please let us know if you need any other assistance. 
Regards, 
Jayakumar D 


Loader.
Live Chat Icon For mobile
Up arrow icon