Our blazing fast Grid component built with pure JavaScript


Post by Webethics »

Hello

We want to open the date and time (column type = 'datetimefield') calendar on the click of the column instead of a click on the icon.

Can you please guide me on how we will implement that?

Thanks


Post by pmiklashevich »

Please clarify your question. There is no column type 'datetimefield'. But you can set datetimefield as an editor to the date column, for example.

{ text : 'Date', field : 'start', flex : 1, type : 'date', format : 'MMMM D YYYY', editor : 'datetimefield' },

By default to open a date picker you need to perform 2 clicks: first click on the cell to enter to editing mode, then click on a picker (date picker or time picker ) icon to open corresponding picker. Do you want to auto-expand the date picker on cell click?

Снимок экрана 2021-06-02 в 16.00.38.png
Снимок экрана 2021-06-02 в 16.00.38.png (76.77 KiB) Viewed 1031 times

Pavlo Miklashevych
Sr. Frontend Developer


Post by Webethics »

Yes, I want to auto-expand the date picker and time picker on cell click


Post by pmiklashevich »

You can implement it, for example:

new Grid({
    listeners : {
        startCellEdit({ editorContext }) {
            const { inputField } = editorContext.editor;

        if (inputField.type === 'datetimefield') {
            inputField.dateField.showPicker(true); // true to focus the picker
        }
    }
},

See the docs:
https://www.bryntum.com/docs/grid/#Grid/feature/CellEdit#event-startCellEdit
https://www.bryntum.com/docs/grid/#Core/widget/Editor#config-inputField
https://www.bryntum.com/docs/grid/#Core/widget/DateTimeField#config-dateField
https://www.bryntum.com/docs/grid/#Core/widget/DateField#function-showPicker

Pavlo Miklashevych
Sr. Frontend Developer


Post by Webethics »

Is that possible to hide or remove date&time picker icons?. Please see attached screenshot.

Attachments
date-picker-icon.png
date-picker-icon.png (260.46 KiB) Viewed 1014 times

Post by saki »

That are actually so you can try to pass an empty triggers:{} to the Date/Time fields, however, the implementation may rely on their existence.

If so, you can hide them with css. To do that you would add a custom CSS class to the editor config:

text   : 'Start',
field  : 'start',
editor : {
    type : 'datetimefield',
    cls  : 'hide-triggers'
}

and these rules to your css file:

.hide-triggers .b-icon-calendar,
.hide-triggers .b-step-trigger,
.hide-triggers .b-icon-clock-live {
	display:none;
}

Post by Webethics »

pmiklashevich wrote: Wed Jun 02, 2021 4:32 pm

You can implement it, for example:

new Grid({
    listeners : {
        startCellEdit({ editorContext }) {
            const { inputField } = editorContext.editor;

        if (inputField.type === 'datetimefield') {
            inputField.dateField.showPicker(true); // true to focus the picker
        }
    }
},

See the docs:
https://www.bryntum.com/docs/grid/#Grid/feature/CellEdit#event-startCellEdit
https://www.bryntum.com/docs/grid/#Core/widget/Editor#config-inputField
https://www.bryntum.com/docs/grid/#Core/widget/DateTimeField#config-dateField
https://www.bryntum.com/docs/grid/#Core/widget/DateField#function-showPicker

It only opens a date picker but we want to auto expand the date and time picker on cell click.

Has it possible?


Post by pmiklashevich »

It's not supported out of the box. You can try to extend DateTimeField widget and implement the behaviour you need. Or create a new widget to be used as an editor. We can help you in scope of professional services. Please check out: https://www.bryntum.com/services/

Pavlo Miklashevych
Sr. Frontend Developer


Post Reply