Format date & boolean in kendo.ui.GridColumn

Question

In our typescript application we have a kendo grid. In Product.ts I'm defining the columns like this:

const cols = <kendo.ui.GridColumn[]>[
    { field: "Name", title: "Name" },
    { field: "ProductDate", template: "#= kendo.toString(ProductDate, 'dd.MM.yyyy') #" title: "Date" },
    { field: "IsNew", template: "# if (IsNew == true) { 'Yes' } else { 'No } #", title:"Is new" }];

After that, I add them to the grid by using this:

let grid = this.grid.kendoGrid({
    dataSource: this.unitDataSource,
    pageable: true,
    filterable: true,
    sortable: true,
    columns: cols
}).data("kendoGrid");

Now I have the problem that the date and the boolean fields aren't correctly shown:

Format of ProductDate in grid: 2016-08-23T15:37
IsNew isn't shown at all

Instead of template I also tried it with format: "{0:dd.MM.yyyy}" for the date what gave me the same result.

I don't get any error messages in browser console.

What am I doing wrong?

EDIT

dimodi's answer solved my problem with the boolean field. My template now looks like this:

"# if (IsNew == true) { # Yes # } else { # No # } #"

As P. Ommer wrote in his answer, I added the date to the schema. The date is now shown in the correct format with my template but if there is no date specified, "null" is shown instead of nothing. When I change the template to "# if (ProductDate != null) { kendo.toString(ProductDate, 'dd.MM.yyyy') #", the product date column stays empty for each row.

How do I treat null columns for the date?

score 2 · Accepted Answer · edited May 23 '17 at 10:28

In addition to the required definition of data field types, as suggested by P. Ommer, the boolean column template should be defined like this:

template: "# if (IsNew == true) { # Yes # } else { # No # } #"

In other words, the Yes and No strings should be outside the JavaScript parts of the template.

http://docs.telerik.com/kendo-ui/framework/templates/overview#handle-external-templates-and-expressions

Casting of dates will not be needed if they are serialized in a standard way:

https://stackoverflow.com/a/38903675/3086237

If you do need to cast (parse) dates manually, the correct place to do that is the schema.parse function of the Kendo UI DataSource:

http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#configuration-schema.parse

Null values are displayed as a "null" string by design. Using a template to avoid that is perfectly OK.

Thank you, my boolean values are now shown correctly. P.Ommer's solution worked for me to show the dates, but now I have a problem with null columns. I've added some information to my question. — diiN__________, Aug 24 '16 at 06:12
Using a template to avoid "null" strings in the Grid is perfectly OK. — dimodi, Aug 24 '16 at 10:11

score 1 · Answer 2 · answered Aug 23 '16 at 13:55

i had the same problem. For me it worked with adding a schema to the datasource like this:

 schema: {
                    model: {
                        fields: {
                            ClientTimestamp: {
                                type: "date"
                            },
                            Message: {
                                type: "string"
                            }
                        }
                    }
                }

Also I casted my date to a js date object like this:

 dataBinding: function (e) {
                for (var i = 0; i < e.items.length; i++) {
                     e.items[i].date = new Date(e.items[i].date);
                }
            },

Your solution worked to show the date in the correct format. Now I have a problem with null columns. I added some information to the question. — diiN__________, Aug 24 '16 at 06:11

Format date & boolean in kendo.ui.GridColumn

2 Answers2