2016-12-15 6 views
0

基本的なグリッドをセットアップするためのドキュメントです。最初の列を太字にするために列テンプレートを追加しましたが、適用されていません。私はDojoでコードを試してみました。トリプルで構文がチェックされ、すべてのデータでgirdが正常に表示されますが、太字は適用されません。剣道のグリッドの列のテンプレートが適用されていません

表のデータに適用されないスタイルを示すクロムのhtmlの検査。

これは、ここでのコードで、私は...

を見下ろすよ本当に簡単なものである必要があります:あなたが提供されたコードに基づいて、まあ

<!DOCTYPE html> 
 

 
<html> 
 
<head runat="server"> 
 
    <title>Client</title> 
 
    
 
<!-- Common Kendo UI CSS for web widgets and widgets for data visualization. --> 
 
    <link href="../css/kendo/kendo.common.min.css" rel="stylesheet" /> 
 
    <!-- (Optional) RTL CSS for Kendo UI widgets for the web. Include only in right-to-left applications. --> 
 
    <%--<link href="../css/kendo/kendo.rtl.min.css" rel="stylesheet" type="text/css" />--%> 
 
    <!-- Default Kendo UI theme CSS for web widgets and widgets for data visualization. --> 
 
    <link href="../css/kendo/kendo.default.min.css" rel="stylesheet" /> 
 
    <!-- (Optional) Kendo UI Hybrid CSS. Include only if you will use the mobile devices features. --> 
 
    <link href="../css/kendo/kendo.default.mobile.min.css" rel="stylesheet" type="text/css" /> 
 
    <!-- Kendo UI combined JavaScript --> 
 
    <script src="../js/kendo/kendo.all.min.js"></script> 
 
    
 
    <script> 
 

 
     var people = [ 
 
       { firstName: "John", 
 
        lastName: "Smith", 
 
        email: "[email protected]" 
 
       }, 
 
       { firstName: "Jane", 
 
        lastName: "Smith", 
 
        email: "[email protected]" 
 
       }, 
 
       { firstName: "Josh", 
 
        lastName: "Davis", 
 
        email: "[email protected]" 
 
       }, 
 
       { firstName: "Cindy", 
 
        lastName: "Jones", 
 
        email: "[email protected]" 
 
       } 
 
     ]; 
 

 

 
     $("#client_grid").kendoGrid({ 
 
      autoBind: false, 
 
      selectable: true, 
 
      columns: [{ 
 
       field: "firstName", 
 
       title: "First Name", 
 
       template: "<strong>#: firstName # </strong>" 
 
      }, 
 
      { 
 
       field: "lastName", 
 
       title: "Last Name", 
 
      }, 
 
      { 
 
       field: "email", 
 
       title: "Email", 
 
      }] 
 
     }); 
 

 

 
     $("#client_grid").kendoGrid({ 
 
      dataSource: people 
 
     }); 
 

 
         
 
    </script> 
 

 

 
</head> 
 
<body> 
 

 
<div id="client_grid" /> 
 

 

 
</body> 
 
</html>

答えて

1

、あなたはグリッドを2回初期化しています:

1つ:

二:

$("#client_grid").kendoGrid({ 
     dataSource: people 
    }); 

2つ目は、(テンプレートを含む)最初のあなたの設定を離れて吹いています。

だけではなく、次の操作を行います。

$("#client_grid").kendoGrid({ 
     dataSource: people, 
     autoBind: false, 
     selectable: true, 
     columns: [{ 
      field: "firstName", 
      title: "First Name", 
      template: "<strong>#: firstName # </strong>" 
     }, 
     { 
      field: "lastName", 
      title: "Last Name", 
     }, 
     { 
      field: "email", 
      title: "Email", 
     }] 
    }); 
// Because autobind is false, you have to trigger the fetch somehow... 
$("#client_grid").getKendoGrid().dataSource.read(); 

デモ:http://dojo.telerik.com/@Stephen/UPuga

+0

これは動作しますが、それはデータソースが必要です(!):人々は初期設定で宣言されて...私の意図は、リモート・データにバインドするためにデータソースが事前にわからないようにajax呼び出しによって取得されます。私は二重初期化が問題であることを知っているので、どうすればこのような設定が可能ですか? – kpg

+0

OK、私は、データソースがリモートデータアクセス用のトランスポートコンストラクトを必要とするのを見ています...私は上記のコードで(間違って)シミュレーションし、グリッドを再初期化しようとしていました。ありがとう! – kpg

+0

setDataSource()メソッドもあります:http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#methods-setDataSource –

関連する問題