The TreeGrid doesn't work properly in a tab

[Cholet]

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

[Jayakumar Duraisamy]

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, 

Link: https://help.syncfusion.com/api/js/ejtab#events:itemactive  

Please let us know, if you require any other assistance. 

Regards, 

Jayakumar D 

[Cholet]

It works. Thank you.

Cholet

[Jayakumar Duraisamy]

Hi Cholet, 

We are glad that your requirement has been met. Please let us know if you need any other assistance. 

Regards, 

Jayakumar D