剣道グリッドUI用のgroupHeaderTemplateを設定する

私は現在、PHPで剣道グリッドUIを扱っています。グリッドに私のDB（テーブル 'stage_name'のフィールド名）から 'ステージ'の名前を列にした列があります。 "stage_name"を列のフィールドとして設定することでこれを行うことができましたが、ステージ名を "stage_id"（テーブルの主キー）に基づいてソートする必要があります。剣道グリッドUI用のgroupHeaderTemplateを設定する

var grid = $("#stageGrid").kendoGrid({ 
    columns: [{ 
     field: "stage_id", // stage_name 
     title: "Stage", 
     template: "#=stage_name#", 
     aggregates: ["count"], 
     groupHeaderTemplate: "Stage : #=(value != null)? value : 'Empty' # (Count: #=count#)", 
     width: 150 
    }] 
});

私はソート、ステージ名のリストを&すべてのことをstage_idに関しての名前を付けることができた。だから私は以下のようにコードを書き直します。さて、私の問題は、列をグループ化する間にstage_idが列ヘッダーとして表示されていることです（画像attachedで確認できます）。対応するステージ名を表示して修正する必要があります。あなたの誰もが私を助けるためにこれについて良いアイデアを持っていることができます。貴重なアイデアを期待しています。

ありがとうございます。

出典

2016-12-14 Sinto

私があなたのシナリオを正しく理解している場合は、グリッド内で外部キー列を使用していて、その外部キーIDに対応する名前を表示したい場合、その外部キーを使用してグループ化することもできます。これを行うには、textとvalueプロパティを持つオブジェクトの配列を除くcolumnのvaluesプロパティを使用する最良の方法を実行するために、Kendo girdは自動的にその列の値の行ベースのテキストを選択します。あなたはここでは、このリンクに

http://demos.telerik.com/kendo-ui/grid/foreignkeycolumn

を確認することができます詳細については、

は、作業のデモです。私はそれに役立つことを願っています

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <meta charset="utf-8" /> 
 
    <title>Kendo UI Snippet</title> 
 

 
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.common.min.css" /> 
 
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.rtl.min.css" /> 
 
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.silver.min.css" /> 
 
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.mobile.all.min.css" /> 
 

 
    <script src="http://code.jquery.com/jquery-1.12.4.min.js"></script> 
 
    <script src="http://kendo.cdn.telerik.com/2016.3.1028/js/kendo.all.min.js"></script> 
 
</head> 
 

 
<body> 
 

 
    <div id="grid"></div> 
 
    <script> 
 
    var positionValues = [{ 
 
     "text": "Project Manager", 
 
     "value": 1 
 
    }, { 
 
     "text": "Sales Manager", 
 
     "value": 2 
 
    }, { 
 
     "text": "Engineer", 
 
     "value": 3 
 
    }]; 
 

 
    $("#grid").kendoGrid({ 
 
     columns: [{ 
 
     field: "name", 
 
     title: "Name" 
 
     }, { 
 
     field: "age", 
 
     title: "Age" 
 
     }, { 
 
     field: "positionId", 
 
     title: "Position", 
 
     values: positionValues 
 
     }], 
 
     dataSource: { 
 
     data: [{ 
 
      name: "Jane Doe", 
 
      age: 30, 
 
      positionId: "2" 
 
     }, { 
 
      name: "John Doe", 
 
      age: 34, 
 
      positionId: "1" 
 
     }, { 
 
      name: "Sam Degree", 
 
      age: 40, 
 
      positionId: "1" 
 
     }, { 
 
      name: "Salina Kile", 
 
      age: 51, 
 
      positionId: "2" 
 
     }, { 
 
      name: "Johney Doe", 
 
      age: 24, 
 
      positionId: "3" 
 
     }, { 
 
      name: "Matt Prior", 
 
      age: 23, 
 
      positionId: "3" 
 
     }, { 
 
      name: "Michael Jackson", 
 
      age: 37, 
 
      positionId: "2" 
 
     }, ], 
 
     group: { 
 
      field: "positionId", 
 
      aggregates: [{ 
 
      field: "age", 
 
      aggregate: "count" 
 
      }] 
 
     } 
 
     } 
 
    }); 
 
    </script> 
 
</body> 
 

 
</html>

。助けのための

EDIT

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <meta charset="utf-8" /> 
 
    <title>Kendo UI Snippet</title> 
 

 
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.common.min.css" /> 
 
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.rtl.min.css" /> 
 
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.silver.min.css" /> 
 
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.mobile.all.min.css" /> 
 

 
    <script src="http://code.jquery.com/jquery-1.12.4.min.js"></script> 
 
    <script src="http://kendo.cdn.telerik.com/2016.3.1028/js/kendo.all.min.js"></script> 
 
</head> 
 

 
<body> 
 

 
    <div id="grid"></div> 
 
    <script> 
 
    var positionValues = [{ 
 
     "text": "Project Manager", 
 
     "value": 1 
 
    }, { 
 
     "text": "Sales Manager", 
 
     "value": 2 
 
    }, { 
 
     "text": "Engineer", 
 
     "value": 3 
 
    }]; 
 

 
    function showPos(value) { 
 
     position = positionValues.find(function(el){ 
 
     return el.value == value; 
 
     }); 
 
     return (position) ? position.text : ""; 
 
    } 
 
    $("#grid").kendoGrid({ 
 
     columns: [{ 
 
     field: "name", 
 
     title: "Name" 
 
     }, { 
 
     field: "age", 
 
     title: "Age" 
 
     }, { 
 
     field: "positionId", 
 
     title: "Position", 
 
     values: positionValues, 
 
     groupHeaderTemplate: "Custom Template: #= showPos(value) #" 
 
     }], 
 
     dataSource: { 
 
     data: [{ 
 
      name: "Jane Doe", 
 
      age: 30, 
 
      positionId: "2" 
 
     }, { 
 
      name: "John Doe", 
 
      age: 34, 
 
      positionId: "1" 
 
     }, { 
 
      name: "Sam Degree", 
 
      age: 40, 
 
      positionId: "1" 
 
     }, { 
 
      name: "Salina Kile", 
 
      age: 51, 
 
      positionId: "2" 
 
     }, { 
 
      name: "Johney Doe", 
 
      age: 24, 
 
      positionId: "3" 
 
     }, { 
 
      name: "Matt Prior", 
 
      age: 23, 
 
      positionId: "3" 
 
     }, { 
 
      name: "Michael Jackson", 
 
      age: 37, 
 
      positionId: "2" 
 
     }, ], 
 
     group: { 
 
      field: "positionId", 
 
      aggregates: [{ 
 
      field: "age", 
 
      aggregate: "count" 
 
      }] 
 
     } 
 
     } 
 
    }); 
 
    </script> 
 
</body> 
 

 
</html>

出典

2016-12-14 11:19:34

のTy、私はこのに見て＆あなたを更新します。 – Sinto

これは参考になることですが、もう1つ手助けできますか？あなたが提案している間、私はgroupHeaderTemplateを表示することができません。私は上記のコードで示すように設定する方法を知っていますか？ – Sinto

groupHeaderTemplateを使用する場合は、カスタム関数を使用して値を対応するテキストと対応付けることができます。更新された答えを確認してください –

剣道グリッドUI用のgroupHeaderTemplateを設定する

答えて

関連する問題