1. Feedback
  2. React
  3. 38292

Welcome to the React feedback portal. We’re happy you’re here! If you have feedback on how to improve the React, we’d love to hear it!

  • Check out the features or bugs others have reported and vote on your favorites. Feedback will be prioritized based on popularity.
  • If you have feedback that’s not listed yet, submit your own.

Thanks for joining our community and helping improve Syncfusion products!

1
Vote

captionTemplate has strict naming convention, unlike column templates

Following the example for row templates (https://ej2.syncfusion.com/react/documentation/grid/row/row-template/), I was able to create a template and name it my own name.

However, for captionTemplates, it only works if the name of the template is 'template'. If you change the name to something else, you get an error.

Ex. this works

const template = (props) => {...};
const groupOptions = {..., captionTemplate: {template}};

Ex. this does not works

const template1 = (props) => {...};
const groupOptions = {..., captionTemplate: {template1}};

You get the following error:

react_devtools_backend.js:4026 Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.


overrideMethod (react_devtools_backend.js:4023)

printWarning (react.development.js:209)

error (react.development.js:183)

createElementWithValidation (react.development.js:2354)

(anonymous) (template.js:28)

(anonymous) (template-engine.js:31)

GroupCaptionCellRenderer.render (caption-cell-renderer.js:73)

_loop_2 (row-renderer.js:114)

RowRenderer.refreshRow (row-renderer.js:146)

RowRenderer.render (row-renderer.js:34)

ContentRender.refreshContentRows (content-renderer.js:387)

(anonymous) (render.js:453)

Observer.notify (observer.js:86)

ComponentBase.trigger (component-base.js:255)

Render.dataManagerSuccess (render.js:373)

(anonymous) (render.js:229)

Promise.then (async)

Render.refreshDataManager (render.js:229)

(anonymous) (render.js:114)

Observer.notify (observer.js:104)

ComponentBase.trigger (component-base.js:255)

Render.refresh (render.js:84)

Observer.notify (observer.js:101)

Component.notify (component.js:267)

Group.onPropertyChanged (group.js:1008)

Observer.notify (observer.js:101)

Component.notify (component.js:267)

Grid.onPropertyChanged (grid.js:1702)

Base.dataBind (base.js:120)

Component.dataBind (component.js:215)

Base.setProperties (base.js:66)

Grid.setProperties (grid.js:1915)

ComponentBase.refreshProperties (component-base.js:158)

ComponentBase.updateProperties (component-base.js:149)

ComponentBase.shouldComponentUpdate (component-base.js:90)

checkShouldComponentUpdate (react-dom.development.js:14134)

updateClassInstance (react-dom.development.js:14698)

updateClassComponent (react-dom.development.js:19695)