2013-05-29 8 views
6

私は、ajax dataSourceを使用してKendoUIグリッドを生成しています。テーブルが生成され、デフォルトではクラスはありません。サイトの他の部分と同じように見えるように、私はそれに "インタラクティブ"なクラスを追加したいと思います。私は、グリッドが生成された後に実行JQuery.addClass()方法、しかしそこにあれば、グリッドのセットアップ/コンフィギュレーションでそれを設定する方法を使用して、これを行うことができることを知ってKendoUI Grid - 生成されたテーブルにクラスを追加する方法

$("#pending_documents").kendoGrid({ 
    dataSource: { 
     transport: { 
      read: "/get-data?type=1" 
     }, 
     schema: { 
      data: "data", 
      total: "total" 
     }, 
     pageSize: 2, 
     serverPaging: true, 
     serverFiltering: true, 
     serverSorting: true, 
     reorderable: true 
    }, 
    height: 500, 
    filterable: { 
     extra: false 
/* 
, ui: "datetimepicker" // use Kendo UI DateTimePicker 
*/ 
    }, 
    sortable: true, 
    pageable: { 
     pageSize: 2  }, 
    columns: [...] 
}); 
    }); 

ありがとうございます。

答えて

5

addClass()を使用する以外は選択肢がありません。グリッド(グリッド列ではない)の設定に関するドキュメントで何も見つかりませんhtmlAttributes JSの組み込みプロパティを使用しています。私もそれを成功させてみました。あなたは、この(C#)と同じようにそれを宣言しない限り:

@(Html.Kendo().TabStrip() 
    .Name("TabStrip") 
    .HtmlAttributes(new { @class = "newclass"}) 
) 

しかし、あなたが本当にJSでそれを必要とする場合、その後、あなたはこのようにそれを行う必要があるでしょう:

$("#pending_documents").kendoGrid({ 
dataSource: { 
    //code 
    } 
}).addClass("newclass"); 
+1

うん、残念ながらクラスがテーブルに直接適用する必要が使用することができますので、私の唯一のオプションは、表の後に、それを追加することです質問。調査に時間をかけてくれてありがとう! –

2

あなたは定義することによってそれを行うことができます以下のような元の要素内のクラス、あなたが使用し、:

<div id="pending_documents" class="your-class-name"> </div> 
4

は、私はそれを行う方法がattributesセクションでは、私の構成では、私の列に追加しています。どの列に応じて、あなたは何で次のクラスを設定したい:

columns: [{ field: 'Name', title: 'Company Name', width: '250px',attributes: { 
        "class": "class1 class2" 
       }}, 
      . 
      . 
      . 
      . 
      . 
      . 
      .] 

(私の場合)「名前」列内のすべての項目は、そのクラスはグリッドの初期化時に設定しているこの方法です。クラスを追加するために追加のjqueryを行う必要はありません。私は最初にそれを試みた。 jQueryのやり方(addClassを使用)は、列をソートしようとするまで機能し、バインディングが壊れました(おそらく、実装で行っていた魔法のためです)。上記のやり方をした後、私のバインディングはソート後も機能しました。私が述べたように生成されたよう

+0

こんにちはDJ Burbは、この方法で、あなたはノックアウトではなくノックアウトのデータを埋め込むことができますか?ありがとう – Mich

+0

わからない、試していない –

+0

これは私にとってはうまくいきました...唯一の警告はテンプレートを使用できません... つまり、 # '、 属性:{' class ':' ui-icon-arrowthick-2-n-s '}、 .... – JayJay

7

あなたはまた、TableHtmlAttributes()

@(Html.Kendo().Grid<Object>() 
     .Name("dataGrid").TableHtmlAttributes(new { @class = "interactive" })