9

ajax dataSource を使用して 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: [...]
});
    });

グリッドが生成された後に実行するメソッドを使用してこれを実行できることはわかっていますJQuery.addClass()が、グリッドのセットアップ/構成で設定する方法はありますか?

前もって感謝します。

4

4 に答える 4

12

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

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

しかし、JS で本当に必要な場合は、次のようにする必要があります。

$("#pending_documents").kendoGrid({
dataSource: {
   //code
  }
}).addClass("newclass");
于 2013-05-31T03:08:49.537 に答える
8

また、TableHtmlAttributes()

@(Html.Kendo().Grid<Object>()
        .Name("dataGrid").TableHtmlAttributes(new { @class = "interactive" })
于 2014-08-08T11:16:52.417 に答える
4

私が行う方法は、attributesセクションの構成の列に追加することです。クラスを設定する列に応じて、次の操作を行います。

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

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

于 2014-07-07T20:41:07.620 に答える
2

元の要素でクラスを定義することでそれを行うことができます, 次のように使用しました:

<div id="pending_documents" class="your-class-name"> </div>
于 2014-05-02T10:37:02.760 に答える