Our blazing fast Grid component built with pure JavaScript


Post by zaclangley »

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?

Post by mats »

Yes for sure, you can create pretty much anything you want. Study our classes, and how each widget is constructed and you'll see the pattern we use.

Post by zaclangley »

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?

Post by johan.isaksson »

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):
// 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);
And here is a column using it as its editor:
        { text : 'Custom editor', field : 'done', editor : 'yesno', renderer: ({value}) => value ? 'Yes' : 'No' }
Hope that helps!
Best regards,
Johan Isaksson

Post Reply