Number and Date formats in Grids

[Dr.YSG]

Q1:

I have a number field in my DataSource used in the Kendo grid for bytes. It is usually in the MB or GB range. Is there a simple way to change the format from 343,243,343 to "343.2 MB" and the same formatted help I need with the GroupFooter (where I don't see how to go from the documentation on formatting:  to something I put in the footer). Here is what I have right now:

{
    field: "size",
    aggregates: ["min", "max", "sum"],
    format: "{0:n0}",
    groupHeaderTemplate: GridData.gridHeader,
    groupFooterTemplate: "total: #: sum #, min: #: min #, max: #: max #"
},

Q2: (very related)

I also need a little help getting the same formatting rules into the groupFooter, but this time for a date, I want the same formatting I have in the column, to be used in the GroupFooter:

{
    field: "date",
    aggregates: ["min", "max"],
    format: "{0:dd-MMM-yyyy H:m:ss}",
    groupHeaderTemplate: GridData.gridHeader,
    groupFooterTemplate: " min: #: min #, max: #: max #"
},

[Alexander Valchev]

Hello Dr.YSG,

In order to achieve that you should use custom numeric formats. The following code demonstrates how to transform 343.243343 into "343.2 MB".

kendo.format("{0:#.0 MB}", 343.243343)

In order to format the values inside group header/footer templates you should use kendo.format or kendo.toString inside the template:

groupFooterTemplate: "total: #: kendo.format('{0:#.0 MB}', sum) #, min: #: min #, max: #: max #"

I hope this information will help.

Regards,
Alexander Valchev
Telerik

[Dr.YSG]

ah, but the trick is not just formatting, I also have to do a divide in the format statement. Since the value is actually:

343,243,343, and not 342.2,

Now I suspect this cannot be done in the columns format statement (but that would be a nice feature). But has to be done in the actually datasource. But I don't want to burden the DS too badly, so is there a simple way to create a "derived" value in the DS that would have the original size field but divided by 1,000,000 ?

[Alexander Valchev]

Hi Dr.YSG,

If I understood correctly you have the number 343243343 in the DataSource which should be transformed into 343,243,343 MB.

In this case you should use the following format: {0:###,###,### MB}
For example:

kendo.format("{0:###,###,### MB}", 343243343);
//output: "343,243,343 MB"

The dataSource does not support derived fields. The closest possible solution (if the aforementioned does not work) is to use a column template instead of column.format. This will give you the ability to call a custom JavaScript formatting function. For example:

template: "#= formatValue(foo) #"

Regards,
Alexander Valchev
Telerik

[Dr.YSG]

I wanted the derived field, since the value is in bytes from the server, and I need the MB value (divide by 1,000,000).  I am familiar with derived types from my MVVM work. I was hoping that the DataModel in the DataSource had this feature too.

Question, is there a big cost for templates? I might have up to 500 or so rows. I suspect not more than any of the other format work that the grid has to do. But I think this is what I was looking for.

[Alexander Valchev]

Hi Dr.YSG,

The Grid renders either its default template or the custom defined by the developer template. So in all cases it will render a template.
I do not believe that using the template approach will cause noticeable performance changes in your case. Please give it a try.

Regards,
Alexander Valchev
Telerik

[Dr.YSG]

Works great. Both on the footers and in the columns. Consider making a post about "Grid Tips" in your help.