How to set the number format for hyperlinks in kendo grid column

问题

I want to apply the number format for a column in kendo grid. That column definition is:

{
    field: "WeekEndGrossUSD",
    title: dashBoardColumNames[0].WeekendGrossUSD,
    headerTemplate: "<span class= 'headerTooltip' id='WEEKEND GROSS (USD)'>" + dashBoardColumNames[0].WeekendGrossUSD + "</span>",
    format: "{0:n0}",
    type: "number",
    attributes: { style: "font-size: 0.85em;text-align:right" },
    footerTemplate: "<span id='WeekendGrossSUM'></span>"
    //width: 120
},
{
    field: "WeekGrossUSD",
    title: dashBoardColumNames[0].WeekGrossUSD,
    headerTemplate: "<span class= 'headerTooltip' id='WEEK GROSS (USD)'>" + dashBoardColumNames[0].WeekGrossUSD + "</span>",
    format: "{0:n0}",
    type: "number",
    attributes: { style: "font-size: 0.85em;text-align:right" },
    footerTemplate: "<span id='WeekGrossSUM'></span>"
    //width: 120
},
{
    field: "CumulativeGrossUSD",
    title: dashBoardColumNames[0].CumeGrossUSD,
    headerTemplate: "<span class= 'headerTooltip' id='CUME GROSS (USD)'>" + dashBoardColumNames[0].CumeGrossUSD + "</span>",
    format: "{0:n0}",
    type: "number",
    template: '<a  class="titlehyperLink" style="color:blue"  id="cumeTemplate">${CumulativeGrossUSD}</a>',
    attributes: { style: "font-size: 0.85em;text-align:right" },
    width: 120,
}

The above column definitons having the format attribute which converts text into number format. But after applying the hyperlink column to "CumulativeGrossUSD" filed the number format is not applying. it's missed the formatting of number with comma.please refer the screen shot

Code for clicking hyper link

$(self.TitleViewGridID).on("click", "#cumeTemplate", function (e) {
    var grid = $(self.TitleViewGridID).data("kendoGrid");
    var dataItem = grid.dataItem($(e.currentTarget).closest("tr"));
    sessionStorage.setItem("IsDashboardCumeClicked", true);
    window.location.href = "/International/TerritoryTitleList?TitleId=" + dataItem.TitleId;
});

If i remove the header template in the above syntax it's giving the number format separate with comma. But if i applied the header template it's not giving the comma separate format. Find the attached screen shot.

回答1:

Column format works only if you are NOT using a column template. Otherwise, the formatting should be done manually, e.g. by using kendo.toString() inside the template code.

template: '<a>#= kendo.toString(CumulativeGrossUSD, "n0") #</a>'

On a side note, do not use static IDs in column templates ("cumeTemplate"), because they will duplicate and lead to invalid HTML markup. You will also not be able to attach a click handler properly to all hyperlinks. Use custom CSS classes instead.

来源：https://stackoverflow.com/questions/40358863/how-to-set-the-number-format-for-hyperlinks-in-kendo-grid-column

标签

javascript

user-interface

kendo-ui

kendo-grid