Our blazing fast Grid component built with pure JavaScript


Post by Webethics »

Hello

I have using the datetimefield with editor. The sorting feature is not working for me.
Nothing is happen if i clicked on column name. I have trying with the below code.

new Grid({

appendTo : 'container',

minHeight : '20em',


columns : [
    { 

  text : 'Date',
  fields : [{ type : 'date', name : 'start', format : 'YOUR FORMAT'}],
  flex : 1,
  type : 'date', 
  format : 'DD.MM.YYYY HH:mm', 
  editor    : {type : 'datetimefield'},
  htmlEncode : false,
  autoWidth : true,
  renderer  : ({ record = ''}) => {
                         if (record['start']) {
                           return '<i class="b-action-item b-action-item b-fa b-fa-pencil-alt" style="margin-right:9px;"></i>'+DateHelper.format(DateHelper.parse(record['start'],'DD.MM.YYYY HH:mm'),'DD.MM.YYYY HH:mm');
                         } else {
                           return '<i class="b-action-item b-action-item b-fa b-fa-pencil-alt" style="margin-right:9px;"></i>'+'N/A';
                         }
                       }
}
],

data : [{start : "21.02.2021 05:00"},{start : ""},]

});

Post by Maxim Gorkovsky »

Hello.
You snippet has few issues:

  1. fields config does not exist on the column.
  2. field config is missing, without it column doesn't know what to sort
  3. renderer is already provided with value, no need to access same record field
  4. you expect record field to be converted to Date instance, but that's not gonna happen unless you define model

All these topics are covered in our docs. Please check these guides:
https://bryntum.com/docs/grid/#guides/basics/columns.md
https://bryntum.com/docs/grid/#Core/data/Model

This is how it should be:

new Grid({

    appendTo : 'container',

    minHeight : '20em',

    columns : [
        {

            text       : 'Date',
            field      : 'start',
            flex       : 1,
            type       : 'date',
            editor     : { type : 'datetimefield' },
            htmlEncode : false,
            autoWidth  : true,
            renderer   : ({ value }) => {
                if (value) {
                    return '<i class="b-action-item b-action-item b-fa b-fa-pencil-alt" style="margin-right:9px;"></i>' + DateHelper.format(value, 'DD.MM.YYYY HH:mm');
                }
                else {
                    return '<i class="b-action-item b-action-item b-fa b-fa-pencil-alt" style="margin-right:9px;"></i>' + 'N/A';
                }
            }
        }
    ],

    store : {
        fields : [{ type : 'date', name : 'start', format : 'DD.MM.YYYY HH:mm' }],
        data   : [{ start : '21.02.2021 05:00' }, { start : '' }]
    }
});

Post by Webethics »

Thanks, it worked for me.


Post Reply