Premium support for our pure JavaScript UI components


Post by yuriv »

Hi, it's really not obvious from documentation how to make and use custom cell editors. Could you please help with that?

As I understood I have to create Field subclass for this. How then to set it as an editor for some field?
Or maybe it's possible to use editor function as well as we do with renderers?


Post by mats »

Yes, you can learn a lot just by reviewing our built in classes like TextField, CheckBox and so on. https://bryntum.com/docs/scheduler/#Core/widget/TextField

To set custom field as your Column editor, just use: https://bryntum.com/docs/scheduler/#Grid/column/Column#config-editor

Here's how PercentColumn is implemented:

export default class PercentColumn extends Column {
    static get type() {
        return 'percent';
    }

// Type to use when auto adding field
static get fieldType() {
    return 'number';
}

static get fields() {
    return ['lowThreshold'];
}

static get defaults() {
    return {
        /**
         * PercentColumn uses a {@link Core.widget.NumberField} configured with an allowed interval 0 - 100 as
         * its default editor.
         * @config {Object|String}
         * @default Core.widget.NumberField
         * @category Misc
         */
        editor : {
            type : 'number',
            min  : 0,
            max  : 100
        }
   ...
 }
}

Post by yuriv »

Ok, so let's clarify by steps:
1) Make custom editor class by extending Field class
2) Set it in editor field in column config

Right?

Let's imagine my class is MyCustomField. Is it enough to put string myCustom into editor.type field? Or I need to make also custom Column class for this as in your example?


Post by mats »

Yes correct, in your Field subclass add this to define a type string:

static get type() {
return 'myfield';
}


Post Reply