简体   繁体   English

无效的模板Kendo UI数字格式

[英]Invalid template Kendo UI Number Formatting

what is the correct way to format template: 格式化模板的正确方法是什么:

<!DOCTYPE html>
<html>
  <head>
    <base href="https://demos.telerik.com/kendo-ui/treelist/local-data-binding">
    <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
    <title></title>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.220/styles/kendo.common-material.min.css" />
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.220/styles/kendo.material.min.css" />
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.220/styles/kendo.material.mobile.min.css" />

    <script src="https://kendo.cdn.telerik.com/2019.1.220/js/jquery.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2019.1.220/js/kendo.all.min.js"></script>


  </head>
  <body>
    <div id="example">
      <div id="treelist"></div>

      <script>
        $(document).ready(function () {
          var dataSource = new kendo.data.TreeListDataSource({
            data: [
              { id: 1, Name: "Daryl Sweeney", Position: "CEO", Num: 555757843457.65, parentId: null },
              { id: 2, Name: "Guy Wooten", Position: "Chief Technical Officer", Num: 555757843457.66889, parentId: 1 },
              { id: 32, Name: "Buffy Weber", Position: "VP, Engineering", Num:555757843457.86868, parentId: 2 },
              { id: 11, Name: "Hyacinth Hood", Position: "Team Lead", Num: 555757843457.58686, parentId: 32 },
              { id: 60, Name: "Akeem Carr", Position: "Junior Software Developer", Num: 555757843457.566456, parentId: 11 },
              { id: 78, Name: "Rinah Simon", Position: "Software Developer", Num:555757843457.88567567, parentId: 11 },

            ],

            schema: {
              model: {
                id: "id",
                expanded: true,
                fields: {
                  Num: {type: "number",

                       parse: function(value) {
                    return  kendo.parseFloat(kendo.toString(value,"#,##0.0000"));  
                  }
                       }
                }
              }
            }
          });

          $("#treelist").kendoTreeList({
            dataSource: dataSource,
            height: 540,
            filterable: true,
            columns: [
              { field: "Position" },
              { field: "Name" },
              { field: "Num",template: '#= formatNm(Num) #',
                filterable: {
                                ui: function (element) {
                 element.kendoNumericTextBox({

                                decimals: getDecimals("#,##0.0000")
                 });
             }
        }
              }
            ]
          });
        });

        //\#,\#\#0.00
        function formatNm(Num,val){
          console.log('Num---',Num)
        if (Num)
          return kendo.toString(Num, "#,##0.0000");
          else
            return '';
        }
      function getDecimals(format){
    return format.split('.')[1].split('').length;
  }

      </script>
    </div>


  </body>
</html>

It works in Jquery. 它适用于Jquery。 Same thing I am implementing in .ts file. 我在.ts文件中实现的相同的东西。

there instead of template: '#= formatNm(Num) #' I am writing this.formatNum but it gets triggered before data is available 而不是模板:'#= formatNm(Num)#'我正在编写this.formatNum但它在数据可用之前被触发

Any Idea how can we achieve this. 任何想法我们怎样才能做到这一点。

Or instead of writing a separate funtion cant I directly pass the format in kendo.toString('Num',"#,##0.0000") 或者不是写一个单独的功能,我直接传递kendo.toString中的格式('Num',“#,## 0.0000”)

You could do something like this if you don't want the extra formatting function: 如果你不想要额外的格式化功能,你可以这样做:

template: (dataItem) => kendo.toString(dataItem.Num, '#,##0.0000') template:(dataItem)=> kendo.toString(dataItem.Num,'#,## 0.0000')

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM