You have a vast array of widgets to select from in the Grid Component.
Is it possible to create my own custom widgets?
Could I extend the Base Class and program my own? How would I go about doing that wit the Grid Component?
Support Forum
Before my company can buy a license so I can see the source code. They want to know if I can make a custom widget for the table. To make a custom widget, however, I need to the source code. They want a demo for it before purchase. I've gotten everything up except for the custom widgets.
I think you can see the dilemma, I'm in.
Is there an example you can provide that doesn't use the current stock widgets or a tut to make a custom widget?
I think you can see the dilemma, I'm in.
Is there an example you can provide that doesn't use the current stock widgets or a tut to make a custom widget?
Hi,
I have updated the "celledit" demo to include a custom editor. It will be available in the next release. Until then, here is the definition for that editor (a simple toggling button):
And here is a column using it as its editor:
Hope that helps!
I have updated the "celledit" demo to include a custom editor. It will be available in the next release. Until then, here is the definition for that editor (a simple toggling button):
// YesNo is a custom button that toggles between Yes and No on click
class YesNo extends Widget {
// Hook up a click listener during construction
construct(config) {
// Need to pass config to super (Widget) to have things set up properly
super.construct(config);
// Handle click on the element
EventHelper.on({
element : this.element,
click : 'onClick',
thisObj : this
});
}
// Always valid, this getter is required by CellEdit feature
get isValid() {
return true;
}
// Get current value
get value() {
return Boolean(this._value);
}
// Set current value, updating style
set value(value) {
const {element} = this;
this._value = value;
if (element) {
element.classList[value ? 'add' : 'remove']('yes');
element.innerText = value ? 'Yes' : 'No';
}
}
// Html for this widget
template() {
return `<button class="yesno"></button>`;
}
// Click handler
onClick() {
this.value = !this.value;
}
}
// Register the custom widget to make it available
BryntumWidgetAdapterRegister.register('yesno', YesNo);
{ text : 'Custom editor', field : 'done', editor : 'yesno', renderer: ({value}) => value ? 'Yes' : 'No' }
Best regards,
Johan Isaksson
Johan Isaksson