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

The TreeGrid doesn't work properly in a tab

Thread ID:

Created:

Updated:

Platform:

Replies:

131020 Jun 16,2017 02:05 PM UTC Jun 21,2017 05:33 AM UTC ASP.NET MVC 3
loading
Tags: TreeGrid
Cholet
Asked On June 16, 2017 02:05 PM UTC

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 [Syncfusion]
Replied On 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 


Cholet
Replied On June 20, 2017 03:34 PM UTC

It works. Thank you.


Cholet


Jayakumar Duraisamy [Syncfusion]
Replied On 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 


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

;