Template does not render

[Dave]

Hi,

I have a problem with the treegrid control. For the first I column, I want to pass in specific buttons. So I created a template to hold the buttons and I use that template for the first column without passing any field value, so that the data binding of the row is passed down to the button component.

This is working fine for the normal grid control. But the treegrid controls refuses to render the template. I can see that, because I have a computed method within the button control which returns the list of buttons to be rendered. As I added logs to the method, I see that no logs are printed when using the treegrid control. The grid however does log, and render the content.

 This is the code I use

Parent control: 

Template

<ejs-treegrid ref="treeGrid" :dataSource="gridData" childMapping="fieldValues" :treeColumnIndex="0">
  <e-columns>
    <e-column headerText='Aktionen' textAlign='Left'
              :template="customHeaderTemplate"></e-column>
    <e-column :filter="colFilter" field='name' headerText='Abteilung' textAlign='Left' width=Auto></e-column>
  </e-columns>
</ejs-treegrid>

customHeaderTemplate() {
  return {
    template: ButtonListComponent
  }
}

ButtonListComponent

<span v-else-if="buttons != null && buttons.length > 0">
  <button v-for="btn in buttons" :key="btn.name" @click="btn.action($event, btn.obj)">
    <font-awesome-icon :icon="btn.icon"/>
  </button>
</span>

get buttons() {
  if (this.$data.data['buttons']) {
    console.log('buttons available')
    return this.$data.data['buttons']
  }
  console.log('buttons not available')
  console.log(this.$data.data)
  return null
}

When hot-reloading (change a source file and save it), the buttons are rendered.

The second column (name) is rendered correctly, but the first column with the buttons remain empty.

The collapsing method is not working either. When I click the collapse icon it says:

Uncaught TypeError: Cannot read property 'rowIndex' of undefined

    at TreeGrid.getCollapseExpandRecords (treegrid.js?73ba:2313)

    at TreeGrid.collapseRow (treegrid.js?73ba:2323)

    at TreeGrid.expandCollapseRequest (treegrid.js?73ba:2277)

    at TreeGrid.mouseClickHandler (treegrid.js?73ba:1688)

[Padmavathy Kamalanathan]

Hi Dave, 

 

Thanks  for contacting Syncfusion Forums. 

 

Query 1: the treegrid controls refuses to render the template 

Query 2: The collapsing method is not working either and shows error 

 

We are able to render button in column template of Tree Grid. But on performing collapse functionality on parent record, script error throws as you have reported which is a breaking issue. Fix for this issue("Script error occurs while collapsing treecolumn having column template") will be included in our upcoming patch release which is expected to be rolled out on or before 28^th October 2020. 

 

You can track the current status of your request, review the proposed resolution timeline and contact us for any further queries through this link, 

 

Feedback link: https://www.syncfusion.com/feedback/19082/script-error-occurs-while-collapsing-treecolumn-index-having-column-template  

 

Note: To view the above feedback, kindly login into your account. 

 

Regards, 

Padmavathy Kamalanathan 

[Padmavathy Kamalanathan]

Hi Dave, 

 

Due to complexity, we could not include fix for the issue ("Script error occurs while collapsing treecolumn having column template") in our patch release. 

 

Fix for this issue will be included in our Volume 3 2020 SP1 release which is expected to be rolled out in 1^st  week of November 2020. 

 

Feedback Link: https://www.syncfusion.com/feedback/19082/script-error-occurs-while-collapsing-treecolumn-index-having-column-template  

 

Until then, we appreciate your patience. 

 

Regards, 

Padmavathy Kamalanathan