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

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

Thread ID:

Created:

Updated:

Platform:

Replies:

130395 May 10,2017 11:32 PM UTC May 18,2017 12:33 PM UTC ASP.NET MVC 5
loading
Tags: TreeGrid
Alberto Barrera
Asked On May 10, 2017 11:32 PM UTC

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 [Syncfusion]
Replied On May 11, 2017 01:00 PM UTC

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. 
Please let us know if you need any other assistance. 
Regards, 
Jayakumar D 


Alberto Barrera
Replied On May 12, 2017 05:15 PM UTC

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 [Syncfusion]
Replied On May 15, 2017 12:41 PM UTC

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
Replied On May 17, 2017 04:44 PM UTC

Hi Jayakumar

I need dynamic size, any solution?

Regards,

Alberto

Jayakumar Duraisamy [Syncfusion]
Replied On May 18, 2017 12:33 PM UTC

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 


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.

Please sign in to access our forum

or the page will be automatically redirected to sign-in page in 10 seconds.

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

;