如何在Kendo网格列中设置超链接的数字格式 [英] 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,
}

上面的列定义了具有format属性的属性，该属性将文本转换为数字格式.但是在将超链接列应用于"CumulativeGrossUSD"字段后，数字格式不适用.错过了用逗号分隔的数字格式.请参考屏幕截图

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

点击超级链接的代码

$(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.

推荐答案

列format仅在不使用列template时有效.否则，应手动进行格式化，例如通过在模板代码内使用 kendo.toString() .

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>'

另一方面，请勿在列模板("cumeTemplate")中使用静态ID，因为它们会重复并导致无效的HTML标记.您也将无法将点击处理程序正确地附加到所有超链接.请改用自定义CSS类.

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.

这篇关于如何在Kendo网格列中设置超链接的数字格式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！