Hello Support,
https://bryntum.com/examples/scheduler/frameworks/vue/javascript/vue-renderer/dist/
Following above example we are trying to render a custom VUE component in our scheduler header using the headerRenderer method.
The issue is: The component does not render and instead displays [object, object]
In AppConfig.js
columns: [
{
type : 'resourceInfo',
text : 'Staff',
field : 'name',
width : 150
},
{
text : 'Button<br /><small>Vue Component</small>',
width : '10em',
align : 'center',
field : 'city',
editor : false,
htmlEncodeHeaderText : false,
vue : true,
headerRenderer({record}) {
return {
is : 'Button',
record
};
},
renderer({ record }) {
// The object needed by the wrapper to render the component
return {
// Required. Name of the component to render.
// The component must be registered globally in main.js
// https://vuejs.org/v2/guide/components.html#Dynamic-Components
is : 'Button',
// `Button` gets its text from `record`
record
// Any other properties we provide for the Vue component, e.g. `value`.
};
}
}
],
Code is attached for your reference.