Error resizing TreeGrid, Can not read property 'outerHeight' of null

[Alberto Barrera]

I am trying to resize the treegrid, when it is created with the following code:

Function onCreateTree (args) {

     $ ("# TreeGridDomainAccess"). EjTreeGrid ({sizeSettings: {height: '450px'}});

}

I get the following error:

Ej.web.all.min.js: 10 Uncaught TypeError: Can not read property 'outerHeight' of null

     At Object._getNonContentHeight (ej.web.all.min.js: 10)

     At Object._getViewPortHeight (ej.web.all.min.js: 10)

     At Object._setModel (ej.web.all.min.js: 10)

     At Object.setModel (ej.web.all.min.js: 10)

     At CustomAutoHeightGrid (templatedomainaccess.min.js: 1)

     At Object.onActionCompleteGridUsers (templatedomainaccess.min.js: 1)

     At Object._trigger (ej.web.all.min.js: 10)

     At Object._completeAction (ej.web.all.min.js: 10)

     At Object.sendDataRenderingRequest (ej.web.all.min.js: 10)

     At Object._renderGridContent (ej.web.all.min.js: 10)

Any ideas?

Greetings.

[Jayakumar Duraisamy]

Hi Alberto, 

We regret for the inconvenience caused. 

 

We have analyzed the reported issue in our sample but we could not able to reproduce this issue. 

And also we prepared a sample and updated the TreeGrid height in “create” client side event. 

Can you please revert us by modifying the sample based on your application along with the replication procedure? This would be helpful for us to serve you. 

Sample: http://jsplayground.syncfusion.com/Sync_4owglqwx  

Please let us know if you need any other assistance. 

Regards, 

Jayakumar D 

[Alberto Barrera]

The error continue, this is my Razor code:

@(Html.EJ().TreeGrid("TreeGrid")

    .Datasource(ds => ds.Json((List<DomainAccessJSON>)ViewBag.DomainAccess)

             .Adaptor(AdaptorType.RemoteSaveAdaptor))

    .IdMapping("Id")

    .ParentIdMapping("IdParent")

    .ChildMapping("Children")

    .Columns(column =>

    {

        column.Field("Id").HeaderText("ID").EditType(TreeGridEditingType.String).Visible(false).Add();

        column.Field("IdParent").HeaderText("ID Parent").Visible(false).Add();

        column.Field("Name").HeaderText("Nombre").HeaderTextAlign(TextAlign.Center).ShowCheckbox(true).Add();

        column.Field("Type").HeaderText("Tipo").HeaderTextAlign(TextAlign.Center).Add();

    })

    .ClientSideEvents(e => e.Create("onCreateTree"))

)

@(Html.EJ().Grid<UserEntity>("GridUsers") .........

JS

function onCreateTree(args) {

    this.setModel({ "sizeSettings": { "height": '450px' } });

}

The error on ej.web.all.js

_getNonContentHeight: function(){

   var proxy = this, model = proxy.model,

                height = 0, borderTopWidth = 0;

   borderTopWidth = proxy.model.isFromGantt ? 0 : 1;

   height = proxy._$gridHeaderContent.outerHeight() + parseFloat(borderTopWidth);

   if (proxy.model.toolbarSettings.showToolbar) {

       height += !ej.isNullOrUndefined($("#" + proxy._id + "_toolbarItems").outerHeight()) ?$("#" + proxy._id + "_toolbarItems").outerHeight():0;

   }

   if (model.allowPaging)

       height += proxy.element.find('.e-pager').outerHeight();        

   return height;

                

}

the proxy._$gridHeaderContent.outerHeight() is null

Thank you.

Regards,

Alberto

[Jayakumar Duraisamy]

Hi Alberto, 

Thanks for providing additional information about this issue. 

 

We have analyzed this issue with provided code snippet and we can able to reproduce the same issue as you reported earlier. 

 

When we use data manager to bind remote data source in TreeGrid, data is retrieved from server with asynchronous call. TreeGrid elements are rendered after successful retrieval of data source. 

 

Due to this create client side event is triggered before rendering of TreeGrid elements, when we update the height of TreeGrid in create event this issue occurred. 

 

We can overcome this issue by assigning height of the TreeGrid initially by using “SizeSettings” property, 

  

please refer the following code snippet.  

@(Html.EJ().TreeGrid("TreeGrid") 

    .Datasource(ds => ds.Json((List<DomainAccessJSON>)ViewBag.DomainAccess) 

             .Adaptor(AdaptorType.RemoteSaveAdaptor)) 

    .IdMapping("Id") 

    .ParentIdMapping("IdParent") 

    .ChildMapping("Children") 

    .SizeSettings(ss => ss.Width("100%").Height("450px")) 

    .Columns(column => 

    { 

        column.Field("Id").HeaderText("ID").EditType(TreeGridEditingType.String).Visible(false).Add(); 

        column.Field("IdParent").HeaderText("ID Parent").Visible(false).Add(); 

        column.Field("Name").HeaderText("Nombre").HeaderTextAlign(TextAlign.Center).ShowCheckbox(true).Add(); 

        column.Field("Type").HeaderText("Tipo").HeaderTextAlign(TextAlign.Center).Add(); 

    })     

    ) 

 

If you still facing any issues or your requirement is not achieved with this solution, please update us with some more details about this, it will helpful to fix this issue properly. 

 

Regards, 

Jayakumar D 

[Alberto Barrera]

Hi Jayakumar

I need dynamic size, any solution?

Regards,

Alberto

[Jayakumar Duraisamy]

Hi Alberto, 

Please find the response below. 

As we have been explained in the previous update about the process of rendering of remote data source in TreeGrid.  

Hence, we can’t dynamically update the TreeGrid height in ‘create’ client side event but once after rendering of inner elements then “ActionComplete” event will be triggered with requestType as refresh.  

At that time, we can dynamically update the TreeGrid height by using sizeSettings property.  

The ActionComplete event will be trigger for many actions so we must conditionally update the TreeGrid height only at load time. 

Please refer the following code snippet, 

@(Html.EJ().TreeGrid("TreeGrid")  

    .Datasource(ds => ds.Json((List<DomainAccessJSON>)ViewBag.DomainAccess)  

             .Adaptor(AdaptorType.RemoteSaveAdaptor)) 

    .ClientSideEvents(cs => cs.ActionComplete("actionComplete"))    

//…

 ) 

@(Html.EJ().ScriptManager())

<script type="text/javascript"> 

   var isLoad = true; 

  function actionComplete(args) {             

            if (isLoad && args.requestType == "refresh") { { 

                this.setModel({ "sizeSettings": { "height": "450px" } }); 

                isLoad = false; 

            } 

        } 

</script> 

 

Please let us know if you need any other assistance. 

Regards, 

Jayakumar D