剣道グリッド列テンプレートでの計算を追加

# if (((data.Price1 - data.Price2)/data.Price2< 0.02)) { # 
    <table class="bg-success"> 
     <tr> 
      <td width="20px"><label title="Price1"></label></td> 
      <td width="90%">#= kendo.toString(Price1, 'n') || "0" #</td> 
     </tr> 
    <tr> 
     <td width="20px"><img title="Price2" /></td> 
     <td width="90%">#= kendo.toString(Price2, 'n') || "0" #</td> 
    </tr> 
</table> 
# } else { # 
<table class="bg-danger"> 
    <tr> 
     <td width="20px"><label title="Price1"></label></td> 
     <td width="90%">#= kendo.toString(Price1, 'n') || "0" #</td> 
    </tr> 
    <tr> 
     <td width="20px"><img title="Price2" /></td> 
     <td width="90%">#= kendo.toString(Price2, 'n') || "0" #</td> 
    </tr> 
</table> 
# } #

こんにちはすべて、剣道グリッド列テンプレートでの計算を追加

以上、私が追加した剣道列のテンプレートですが、私は私が想定しています無効なテンプレートのエラーが原因私が追加した計算にある取得していますif条件。列の書式設定を行うには、この計算が必要です。私がここで紛失しているもの、またはここで間違っていることを教えてください。ありがとうございました。

出典

2016-05-20 Vani Kulkarni

私はあなたの問題を再現しようとしましたが、役に立たなかった。私は下に私の完全なコードを共有しているので、それを試してみてくださいと私に懸念があれば教えてください。

<!DOCTYPE html> 
<html> 
<head> 
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.412/styles/kendo.common.min.css"> 
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.412/styles/kendo.rtl.min.css"> 
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.412/styles/kendo.default.min.css"> 
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.412/styles/kendo.mobile.all.min.css"> 

    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> 
    <script src="http://kendo.cdn.telerik.com/2016.1.412/js/angular.min.js"></script> 
    <script src="http://kendo.cdn.telerik.com/2016.1.412/js/jszip.min.js"></script> 
    <script src="http://kendo.cdn.telerik.com/2016.1.412/js/kendo.all.min.js"></script> 
</head> 
<body> 
    <div id="grid"> 
    </div> 
    <script> 
     var products = [{ 
      ProductID: 11, 
      ProductName: "Chai", 
      Price1: 13.0, 
      Price2: 11.0, 
     }, { 
      ProductID: 22, 
      ProductName: "Chang", 
      Price1: 19.0, 
      Price2: 11.0, 
     }, { 
      ProductID: 33, 
      ProductName: "Aniseed Syrup", 
      Price1: 1.0, 
      Price2: 11.0, 
     }, { 
      ProductID: 44, 
      ProductName: "Chef Anton's Cajun Seasoning", 
      Price1: 1.0, 
      Price2: 11.0, 
     }, { 
      ProductID: 55, 
      ProductName: "Chef Anton's Gumbo Mix", 
      Price1: 1.0, 
      Price2: 11.0, 
     }]; 
     $(document).ready(function() { 
      $("#grid").kendoGrid({ 
       dataSource: { 
        data: products, 
        schema: { 
         model: { 
          id: "ProductID", 
          fields: { 
           ProductName: { 
            type: "string" 
           } 
          }, 
         } 
        }, 
        pageSize: 10 
       }, 
       sortable: true, 
       dataBound: function (e) { 

       }, 
       filterable: true, 
       pageable: { 
        input: true, 
        numeric: false 
       }, 
       columns: [ 
        { field: "ProductID", title: "ProductID" }, 
        { field: "ProductName", title: "ProductName" }, 
        { 
         title: "Temp", 
         template: '# if (((Price1 - Price2)/Price2< 0.02)) { #' + 
            '<table class="bg-success">' + 
            '<tr>' + 
             '<td width="20px"><label title="Price1"></label></td>' + 
             '<td width="90%">#= kendo.toString(Price1, "n") || "0" #</td>' + 
            '</tr>' + 
            '<tr>' + 
            ' <td width="20px"><img title="Price2" alt="Price2" /></td>' + 
             ' <td width="90%">#= kendo.toString(Price2, "n") || "0" #</td>' + 
            '</tr>' + 
            '</table>' + 
            '# } else { # ' + 
            ' <table class="bg-danger">' + 
            '<tr>' + 
             '<td width="20px"><label title="Price1"></label></td>' + 
             '<td width="90%">#= kendo.toString(Price1, "n") || "0" #</td>' + 
            '</tr>' + 
            '<tr>' + 
             '<td width="20px"><img title="Price2" /></td>' + 
             '<td width="90%">#= kendo.toString(Price2, "n") || "0" #</td>' + 
            '</tr>' + 
            '</table>' + 
            ' # } # ', 
        }, 
        { command: ["edit", "destroy"], title: "&nbsp;" } 

       ], 
       editable: "inline" 
      }); 
     }); 

    </script> 
    <style> 
     .bg-success { 
      background-color: green; 
     } 

     .bg-danger { 
      background-color: red; 
     } 
    </style> 
</body> 
</html>

編集1：列テンプレートの

<!DOCTYPE html> 
<html> 
<head> 
    <title>Jayesh Goyani</title> 
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.412/styles/kendo.common.min.css"> 
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.412/styles/kendo.rtl.min.css"> 
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.412/styles/kendo.default.min.css"> 
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.412/styles/kendo.mobile.all.min.css"> 

    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> 
    <script src="http://kendo.cdn.telerik.com/2016.1.412/js/angular.min.js"></script> 
    <script src="http://kendo.cdn.telerik.com/2016.1.412/js/jszip.min.js"></script> 
    <script src="http://kendo.cdn.telerik.com/2016.1.412/js/kendo.all.min.js"></script> 
</head> 
<body> 
    <div id="grid"> 
    </div> 
    <script type="text/x-kendo-template" id="priceColumnTemplate"> 
     # if (((Price1 - Price2)/Price2< 0.02)) { # 
            <table class="bg-success"> 
            <tr> 
             <td width="20px"><label title="Price1"></label></td> 
             <td width="90%">#= kendo.toString(Price1, "n") || "0" #</td> 
            </tr> 
            <tr> 
             <td width="20px"><img title="Price2" alt="Price2" /></td> 
             <td width="90%">#= kendo.toString(Price2, "n") || "0" #</td> 
            </tr> 
            </table> 
            # } else { # 
            <table class="bg-danger"> 
            <tr> 
             <td width="20px"><label title="Price1"></label></td> 
             <td width="90%">#= kendo.toString(Price1, "n") || "0" #</td> 
            </tr> 
            <tr> 
             <td width="20px"><img title="Price2" /></td> 
             <td width="90%">#= kendo.toString(Price2, "n") || "0" #</td> 
            </tr> 
            </table> 
            # } # 
    </script> 
    <script> 
     var products = [{ 
      ProductID: 11, 
      ProductName: "Chai", 
      Price1: 13.0, 
      Price2: 11.0, 
     }, { 
      ProductID: 22, 
      ProductName: "Chang", 
      Price1: 19.0, 
      Price2: 11.0, 
     }, { 
      ProductID: 33, 
      ProductName: "Aniseed Syrup", 
      Price1: 1.0, 
      Price2: 11.0, 
     }, { 
      ProductID: 44, 
      ProductName: "Chef Anton's Cajun Seasoning", 
      Price1: 1.0, 
      Price2: 11.0, 
     }, { 
      ProductID: 55, 
      ProductName: "Chef Anton's Gumbo Mix", 
      Price1: 1.0, 
      Price2: 11.0, 
     }]; 
     $(document).ready(function() { 
      $("#grid").kendoGrid({ 
       dataSource: { 
        data: products, 
        schema: { 
         model: { 
          id: "ProductID", 
          fields: { 
           ProductName: { 
            type: "string" 
           } 
          }, 
         } 
        }, 
        pageSize: 10 
       }, 
       sortable: true, 
       dataBound: function (e) { 

       }, 
       filterable: true, 
       pageable: { 
        input: true, 
        numeric: false 
       }, 
       columns: [ 
        { field: "ProductID", title: "ProductID" }, 
        { field: "ProductName", title: "ProductName" }, 
        { 
         title: "Temp", 
         template: kendo.template($('#priceColumnTemplate').html()), 
        }, 
        { command: ["edit", "destroy"], title: "&nbsp;" } 

       ], 
       editable: "inline" 
      }); 
     }); 

    </script> 
    <style> 
     .bg-success { 
      background-color: green; 
     } 

     .bg-danger { 
      background-color: red; 
     } 
    </style> 
</body> 
</html>

出典

2016-05-21 07:17:07

こんにちは@Jayesh、あなたの答えをありがとう。しかし、私はコード剣道テンプレートを '

剣道グリッド列テンプレートでの計算を追加

答えて

関連する問題