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
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?
Pavlo Miklashevych
Sr. Frontend Developer
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
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;
}
pmiklashevich wrote: ↑Wed Jun 02, 2021 4:32 pmYou 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?
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