0

私は剣道グリッドを使っています。今度は、剣道グリッドの3つ目のカラムを2つの他のフィールドを減算して表示します。これは剣道グリッドで可能ですか?例えばのために:私はフィールド剣道グリッドの2つのフィールドを外す

に見せたい= "TotalAmount-TotalDepriciated"

コードを "割り当て":

$("#grid").kendoGrid({ 
     dataSource: DataSource, 
     autoBind: false, 
     scrollable: false, 
     sortable: { 
      allowUnsort: false 
     }, 
     filterable: { mode: "row", style: "max-width:100px;" }, 
     groupable: true, 
     pageable: { 
      refresh: true, 
      buttonCount: 5, 
      pageSizes: GlobalPagingDDL 
     }, 
     //rowTemplate: kendo.template($("#template").html()), 
     dataBound: gridDataBound, 

     columns: 
      [ 
      //field: "Name", title: "Licensee", width: 200, filterable: { cell: { showOperators: false, suggestionOperator: "contains" } }, template: "<a href='javascript:void(0)' onclick='RedirectToOrgDetail(&quot;#:LicenseeId#&quot; , &quot;#:PublicName#&quot;)' >#:LicenseeName# </a>" }, 
      { field: "AgreementName", title: "Agreement Name", width: 200, filterable: { cell: { showOperators: false, suggestionOperator: "contains" } } }, 
      { 
       field: "Count", title: "Related Agreement", width: 150, 
       filterable: { cell: { showOperators: true, suggestionOperator: "contains" } } 
      }, 
      { 
       field: "Status", title: "Status", width: 150, filterable: { 
        cell: { 
         template: function (args) { 

          args.element.kendoDropDownList({ 
           dataSource: new kendo.data.DataSource({ 
            data: 
            [ 
             { Status: "Approved" }, 
             { Status: "Pending" }, 

            ] 
           }), 
           dataTextField: "Status", 
           optionLabel: "All", 
           dataValueField: "Status", 
           valuePrimitive: true 
          }); 
         }, showOperators: false, suggestionOperator: "contains" 
        } 
       } 
      }, 
      { 
       field: "Type", title: "Type", width: 150, filterable: { 
        cell: { 
         template: function (args) { 
          args.element.kendoDropDownList({ 
           dataSource: new kendo.data.DataSource({ 
            data: 
            [ 
             { Type: "4" }, 
             { Type: "3" }, 
             { Type: "2" }, 
             { : "1" } 
            ] 
           }), 
           dataTextField: "Type", 
           optionLabel: "All", 
           dataValueField: "Type", 
           valuePrimitive: true 
          }); 
         }, showOperators: false, suggestionOperator: "contains" 
        } 
       } 
      }, 





      { field: "StartDate", title: "All Periods Start Date", width: 150, format: "{0:MM/dd/yyyy}", filterable: { cell: { showOperators: true } } }, 
      { field: "EndDate", title: "All Periods End Date", width: 150, format: "{0:MM/dd/yyyy}", filterable: { cell: { showOperators: true } } }, 
      { field: "TotalAmount", title: "Invoiced", format: "{0:c2}", footerTemplate: "$ #= sum # ", width: 200, filterable: { cell: { showOperators: false, suggestionOperator: "contains" } } }, 
      { field: "TotalDepriciated", title: "Allocated", format: "{0:c2}", width: 200, footerTemplate: "$ #= sum # " }, 
      { field: "Allocated", title: "Balance", format: "{0:c2}", filterable: { cell: { showOperators: false, suggestionOperator: "contains" } } }, 
      //{ field: "LastUpdatedDate", title: "Last Updated Date", width: 150, format: "{0:MM/dd/yyyy}", filterable: { cell: { showOperators: true } } } 
      ] 
    }); 

答えて

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


     var products = [{ 
      ProductID: 1, 
      ProductName: "Chai", 
      TotalAmount: 100, 
      TotalDepriciated: 10, 
     }, { 
      ProductID: 2, 
      ProductName: "Chang", 
      TotalAmount: 100, 
      TotalDepriciated: 10, 
     }, { 
      ProductID: 3, 
      ProductName: "Aniseed Syrup", 
      TotalAmount: 100, 
      TotalDepriciated: 10, 
     }, { 
      ProductID: 4, 
      ProductName: "Chef Anton's Cajun Seasoning", 
      TotalAmount: 100, 
      TotalDepriciated: 10, 
     }, { 
      ProductID: 5, 
      ProductName: "Chef Anton's Gumbo Mix", 
      TotalAmount: 100, 
      TotalDepriciated: 30, 
     }]; 

     $(document).ready(function() { 
      $("#grid").kendoGrid({ 
       dataSource: { 
        data: products, 
        schema: { 
         model: { 
          id: "ProductID", 
          fields: { 
           ProductName: { 
            type: "string" 
           }, 
           TotalAmount: { 
            type: "number" 
           }, 
           TotalDepriciated: { 
            type: "number" 
           } 
          }, 
          Allocated: function() { 
           return this.TotalAmount - this.TotalDepriciated; 
          }, 
         } 
        }, 
        aggregate: [{ field: "TotalAmount", aggregate: "sum" }, 
           { field: "TotalDepriciated", aggregate: "sum" }], 
        pageSize: 10 
       }, 
       sortable: true, 
       dataBound: function (e) { 
        var sumTotalAmount = parseFloat($("#sumTotalAmount").html()); 
        var sumTotalDepriciated = parseFloat($("#sumTotalDepriciated").html()); 
        $("#sumAllocated").html(sumTotalAmount - sumTotalDepriciated); 
       }, 
       filterable: true, 
       pageable: { 
        input: true, 
        numeric: false 
       }, 
       columns: [ 
        { field: "ProductID", title: "ProductID" }, 
        { field: "ProductName", title: "ProductName" }, 
        { field: "TotalAmount", title: "TotalAmount", aggregates: ["sum"], footerTemplate: "<label id='sumTotalAmount'> #=sum# </label>" }, 
        { field: "TotalDepriciated", title: "TotalDepriciated", aggregates: ["sum"], footerTemplate: "<label id='sumTotalDepriciated'> #=sum# </label>" }, 
        { field: "Allocated", title: "Allocated", template: "#= Allocated() #", footerTemplate: "<label id='sumAllocated'></label>" }, 
        { command: ["edit", "destroy"], title: "&nbsp;" } 

       ], 
       editable: "inline" 
      }); 
     }); 
    </script> 
</body> 
</html> 

:コードの下

は他の二つのフィールド

Allocated: function() { 
     return this.TotalAmount - this.TotalDepriciated; 
}, 
..... 
..... 
{ field: "Allocated", title: "Allocated", template: "#= Allocated() #", footerTemplate: "<label id='sumAllocated'></label>" }, 

に完全なコードを差し引いて剣道グリッドの3番目の列を追加します。

+0

アメージング瞬間のためにこれを達成する方法を理解していません。しかし、私はこの色を合計するためのフッタテンプレートを添付することができ、私はまた、この新たに追加された色の前にお金のサインを表示したい。 – Sweetie

+0

塊全体を集計できない場合は、剣道グリッドのdataboundイベントで合計を計算し、ここでテンプレートを設定することができます。私はdataboundイベントですべてのcoulmを合計することができますが、私はいくつかのフィールドのフッターとして設定することはできません。 – Sweetie

+2

[コードダンプは回答ではありません](http://meta.stackoverflow.com/questions/256359/flag-try-this-code-answers-as-very-low-quality?lq=1) – whipdancer

0

このコードは私には役に立ちます。私はそれが

{ field: "Allocated", title: "Allocated", 
    template: '<div>#= TotalAmount-TotalDepriciated#</div>'   
} 

I'amは、この結果の合計を表示するFooterTemplateのを作成することもしようとして支援を期待しかし、私は病気

関連する問題