Our blazing fast Grid component built with pure JavaScript


Post by gregc »

I can't seem to create an example in the examples to show this, my best shot is below.
The key pieces are : date is json is formatted as UTC, field is of type 'date', column is of type 'date' and it is a timefield editor.

The drop down works, the left and right arrows do not.

import DateField from '../../lib/Core/widget/DateField.js';
import Grid from '../../lib/Grid/view/Grid.js';


new Grid({

appendTo : 'container',


   fields : [{ type : 'date', name : 'ss' }],
    columns : [
        {
            text   : 'Name',
            field  : 'name',
            flex   : 2,
            width :300,
            editor : {
                type     : 'textfield',
                required : true
            }
        }, 
	{text: 'Time',  type :'date',    field: 'ss',  
format : 'HH:mm', editor : 'timefield' } ], data : [ {'name':'greg','ss':'2021-02-21T04:00:00Z'}] });

The example needs some imports tidied up so that 'date' is recognized as a type in the column, I think that is what I still have to have, if I remove it then the time doesn't display properly.

Last edited by gregc on Tue Apr 27, 2021 2:16 pm, edited 1 time in total.

Post by mats »

Test case looks a bit messed up, fields is defined on a Store or Model - you have put it on the Grid config. Also you should specify format on the date field:

https://bryntum.com/docs/scheduler/#Core/data/field/DateDataField#config-format


Post by gregc »

Here is a full working example illustrating the issue

<!DOCTYPE html>
<html lang="en">

<head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
        <title>Bryntum Grid - Basic demo</title>
        <link rel="stylesheet" href="../../build/grid.stockholm.css" id="bryntum-theme">
</head>

<body>
        <div id="container">
        </div>
<script type='module'>
import { Grid, DomHelper, AjaxStore, CollectionFilter, GridRowModel, Widget, EventHelper } from '../../build/grid.module.js';
var grid  = new Grid (
{
  appendTo: 'container',
   minHeight : '20em',
  columns : [
        {
            text   : 'Name',
            field  : 'name',
            width :300,
            editor : {
                type     : 'textfield',
                required : true
            }
        },
 {
   'text' : 'timefield',
   field : 'sometime',
   width: 300,
   type : 'date',
  format: 'HH:mm',
    editor : { type : 'timefield' }
}
],
 store : {
    readUrl : 'data.json',
     fields : [ { type :'date', name: 'sometime' }],
    autoLoad : true,

}
});
</script>
</body>

data.json:

{
  "success" : "true",
  "data" :  [ {"name":"greg","sometime":"2021-02-21T04:00:00Z"}],
  "total" : "1"
}
Last edited by gregc on Tue Apr 27, 2021 3:23 pm, edited 1 time in total.

Post by mats »

You use DateColumn, which comes preconfigured with a 'step' of 1 day. Try instead TimeColumn

{
    text   : 'timefield',
    field  : 'sometime',
    width  : 300,
    type   : 'time',
    format : 'HH:mm'
}

Post by gregc »

Awesome thanks


Post Reply