Number and Date formats in Grids

7 posts, 1 answers
  1. Dr.YSG
    Dr.YSG avatar
    210 posts
    Member since:
    Dec 2009

    Posted 04 Mar 2014 Link to this post

    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 #"
    },





  2. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 05 Mar 2014 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
  4. Dr.YSG
    Dr.YSG avatar
    210 posts
    Member since:
    Dec 2009

    Posted 05 Mar 2014 in reply to Alexander Valchev Link to this post

    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 ?

  5. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 07 Mar 2014 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  6. Dr.YSG
    Dr.YSG avatar
    210 posts
    Member since:
    Dec 2009

    Posted 07 Mar 2014 in reply to Alexander Valchev Link to this post

    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.
  7. Answer
    Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 07 Mar 2014 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  8. Dr.YSG
    Dr.YSG avatar
    210 posts
    Member since:
    Dec 2009

    Posted 07 Mar 2014 in reply to Alexander Valchev Link to this post

    Works great. Both on the footers and in the columns. Consider making a post about "Grid Tips" in your help.
Back to Top
Kendo UI is VS 2017 Ready