5

動的に変化するデータを監視する「ダッシュボード」アプリケーションのグリッドで一般的であるように、私の（Telerik）Kendo UIグリッドは、60秒ごとに定期的に新しいデータで更新されます。

grid.dataSource.data(freshData);
grid.refresh();  // have been informed this refresh may not be necessary

スキーマは変更されませんが、一部の新しい行がデータセットに表示され、一部が削除された可能性があります。

リーフはグループ化をそのまま残し、grid.refresh()ソート状態も保持されますが、折りたたまれたグループは展開されます。

質問：グループの拡張/折りたたみ状態を保持（または復元）する方法（したがって、他のグループが折りたたみた状態で特定の拡張グループに焦点を合わせているユーザーは、すべてのグループが再拡張される定期的な更新によって不便/イライラすることはありませんデフォルト）？

編集：一部のWinformsグリッドは、データを更新する前にグループの展開/折りたたみ状態の「スナップショットを作成」し、データソースの更新後にその状態を再適用する方法を提供します。Kendo UIグリッドのグループヘッダー行にUID（更新後も存続）が含まれている場合は、それを実行できます。 ただし、永続的なUIDを含まない以下の推奨アプローチを参照してください。

ユースケース：これは、この機能の典型的な、やや劇的なユースケースです。米国疾病対策センターは、特定のインフルエンザ株の発生を都市ごとにリアルタイムで監視しています。15秒ごとに、データセットが更新されます。彼らはたまたまロサンゼルスに焦点を合わせており、その都市は拡大し、他の都市は崩壊しました。15秒ごとにグリッド全体が拡大すると、CDCの医師が怒り、プログラマーの首を絞め、家に帰ってゴルフをし、ロサンゼルスの全員が屈服します。剣道は本当にその災害の責任を負いたいですか？

考えられる機能拡張の提案：上記のUIDに関する私の提案は無視してください。これがより良い方法です。グリッドには

<div class="k-group-indicator" data-field="{groupedByDataFieldName}">
    ...
</div>

ここで、そのk-group-indicator divに、の個別の値のリストを含めることができ、data-field各キーの関連データが対応するセクションの展開/折りたたみ状態である場合、作成する前にそのリストをバッファーに保存することができます。 dataSource.data（someNewData）メソッドを呼び出してから、dataBoundイベントをリッスンするイベントハンドラーで、これらの展開状態を再適用できます。k-grouping-rowグループ化値に対応するグループ化セクションを見つけるには、特定のグループ化セクションのグループ化値を保持するというプロパティを指定できると非常に役立ちます。group-data-valueたとえば、データでグループ化する場合は「Sales」や「Marketing」などです。部門と呼ばれるフィールド。

<div class="k-group-indicator" data-field="dept" data-title="Dept" data-dir="asc">
       ...
   <div class="k-group-distinct-values">
     <div group-data-value="Sales" aria-expanded="false" />
     <div group-data-value="Events Planning" aria-expanded="true" />
   </div>  
</div>

そしてk-grouping-row： <tr class="k-grouping-row" group-data-value="Sales">

4

5 に答える 5

4

これが組み込み機能ではないことは理解できます。ネストされたグループがある場合、それが存在していた階層内の折りたたまれた各グループを覚えておく必要があるため、かなり複雑です。アイテムはデータソースに出入りするため、追跡するのは面倒です。

とは言うものの、複雑になりすぎない限り、これはあなたが望むことを達成するための非常にハックな方法です。groupHeaderTemplateプロパティを使用して、各グループ化行にUIDを追加するだけです。UIDとして列名+値を使用しているだけです。これは、複数のグループに入る場合は技術的に間違っていますが、例としては十分です。

そこから、更新する前に、剣道が現在持っているARIA属性から折りたたまれたグループを見つけることができます（補足として、これを機能させるには2012 Q3を使用する必要があります）。次に、ドリルダウンして、テンプレートによって追加されたUIDを取得します。

更新後、一致するUIDを持つ行を見つけて、それらをグリッドの.collapseGroup()関数に渡して再折りたたみすることができます。

これを示す動作中のjsFiddleを次に示します。

そして、jsFiddleからのコードをコピーして貼り付けました（テンプレートはCity列にのみ設定しているため、この例ではCity列のみがグループ化の折りたたみを保持することに注意してください！）：

HTML：

<button id="refresh">Refresh</button>
<div id="grid" style="height: 380px"></div>

JavaScript：

var _getCollapsedUids = function () {
    var collapsedUids = [];
    $("#grid .k-grouping-row span[data-uid]")
        .each(function(idx, item) {
            if($(item)
               .closest(".k-grouping-row")
               .children("td:first")
               .attr("aria-expanded") === "false") {
                collapsedUids.push($(item).data("uid"));
            }
        }
    );
    return collapsedUids;
};

var _collapseUids = function (grid, collapsedUids) {
    $("#grid .k-grouping-row span[data-uid]")
        .each(function(idx, item) {
            if($.inArray($(item).data("uid"), collapsedUids) >= 0) {
                console.log("collapse: " + $(item).data("uid"))
                grid.collapseGroup($(item).closest("tr"));
            }
        }
    );
};

var refresh = function () {
    var collapsedUids = _getCollapsedUids();
    var grid = $("#grid").data().kendoGrid;
    grid.dataSource.data(createRandomData(50));
    _collapseUids(grid, collapsedUids);
};

$("#refresh").click(refresh);

$("#grid").kendoGrid({
    dataSource: {
        data: createRandomData(50),
        pageSize: 10
    },
    groupable: true,
    sortable: true,
    pageable: {
        refresh: true,
        pageSizes: true
    },
    columns: [ {
            field: "FirstName",
            width: 90,
            title: "First Name"
        } , {
            field: "LastName",
            width: 90,
            title: "Last Name"
        } , {
            width: 100,
            field: "City",
            groupHeaderTemplate: '<span data-uid="City-#=value#">#= value #</span>'
        } , {
            field: "Title"
        } , {
            field: "BirthDate",
            title: "Birth Date",
            template: '#= kendo.toString(BirthDate,"dd MMMM yyyy") #'
        } , {
            width: 50,
            field: "Age"
        }
    ]
});

個人的には、このソリューションはまったく好きではありません。それはあまりにもハッキーであり、あまりにも多くのDOMトラバーサルです。ただし、グリッドウィジェットを再実装しないと、これを行うためのより良い方法を考えることはできません。多分それはあなたが達成しようとしていることやあなたにもっと良いアイデアを与えるのに十分でしょう。

最後にもう1つ。Kendo UIのソースコードを確認しましたが、どのグループが展開/折りたたまれているかを追跡していないようです。それらは、私がaria属性で行ったことと同様のことを行いますが、代わりに、アイコンの状態を駆動するクラスをチェックします。

            if(element.hasClass('k-i-collapse')) {
                that.collapseGroup(group);
            } else {
                that.expandGroup(group);
            }

Kendo 2012 Q3を使用しておらず、aria-expanded属性を使用できない場合は、代わりにコードを変更してアイコンクラスを確認できます。

于 2012-12-21T03:15:06.783 に答える
2

KendoGridとASP.NetRadGrid（共通の機能を利用するコントロール固有の実装）の両方で動作するように設計された、堅牢なグループ状態保存グリッド拡張機能を開始しました。

この拡張機能は、Telerikのグループ状態保存の例を大幅に改善し、RadGridを強化します。これについては、KendoUIの例に近いものは他にありません。ここで改善点のリストを見ることができ、ここでコードをチェックすることができます。

ご意見をお聞かせください。

于 2015-05-08T10:54:56.147 に答える
1

回答エディタでのコードフォーマットの読みやすさを向上させるためだけに、私自身の質問に「回答」します。これは議論の延長です。

ネストされたグループ化はより複雑であることに同意します。それぞれk-grouping-rowに、グループ化の基礎となる個別のデータ値の配列のJSON表現を含むプロパティがある場合、開発者は、折りたたまれた各k-grouping行からデータ値の個別の組み合わせを抽出できます。（k-grouping-rowが展開されているか折りたたまれているかを直接示していれば役立ちますが、その情報は含まれているセルから取得できますよね？）

折りたたまれたグループのこの個別の値のセットを使用すると、折りたたまれたグループへの独自のマップを作成できます。個別のデータ値は、このマップ内のオブジェクトへのキーとして機能する可能性があります。ネストのレベルがいくつ含まれていても、それぞれの個別のデータの組み合わせは一意であり、グリッド内の1つのグループ化セクションにのみ関連付けられます。

たとえば、2層のネストの場合、次のby Department by ProductTypeようになります。

<tr class="k-grouping-row" data-distinct-values="['Sales','Toys, Games and Videos']">.

Departmentの値は「Sales」で、ProductTypeの値は「Toys、GamesandVideos」です。JSONは、データ値のコンマを処理します。

による3層のグループ化の場合、次のstate, city, zipcodeようになります。

   ...  data-distinct-values="['California','Beverly Hills','90210']"

これらのデータ値は、グループの作成時に認識されるため、k-grouping-rowへの一意のハンドルとして挿入できます。

k-grouping-row個別の値は一意のハンドルですが、DOMをトラバースする必要性を排除するものではなく、折りたたまれた状態を再適用するたびにアクセスします。それでも、剣道グリッドは、これが操作に費用がかかりすぎると感じられた場合、デフォルトで折りたたまれた状態の復元を実装する必要はありません。ただし、を使用してそれを実現する簡単な方法を開発者に提供することになりますdata-distinct-values=[...]。開発者は、パフォーマンスの低下がアプリケーションの要件によって正当化されるかどうかを自分で判断できます。

于 2012-12-21T14:11:16.833 に答える
1

これはそのままではサポートされていませんが、展開されたグループ（または折りたたまれたクラスター）の配列を維持することで実現できます。

大まかに言うと、マーカーを使用して、グループが折りたたまれているか展開されているかを確認します。次に、展開したグループのリストを維持し、グリッドを更新するときにのみ展開します。

私の場合、展開されたグループ（.ki-collapse）と折りたたまれたグループ（.ki-expand）で異なるデフォルトの剣道アイコンを使用します。

var expandedGroups = [];

ExpandedGroupsは私がグローバルに利用できます。必要に応じてこれを変更します。次に、剣道グリッドの変更を保存または破棄するときに、次のメソッドを呼び出します。つまり、コードがgrid.refresh（）またはgrid.dataSource.read（）を実行する前に呼び出します。これにより、グループ化状態が失われます。

    function updateExpandedGroupsList() {
    expandedGroups = []; // reset state

    // find the list of group labels adjacent to expanded group icons
    var listOfExpandedGroupsLabels = $("#gridId .k-icon.k-i-collapse~span");
    for (i = 0; i < listOfExpandedGroupsLabels .length; i++) {
        expandedGroups.push(listOfExpandedGroupsLabels [i].innerHTML);
    }
  }

したがって、上記のメソッドで行っているのは、下向きの小さな展開矢印のすべてのインスタンスを見つけてから、後で使用するためにexpandedGroups配列に格納する必要があるグループの名前を持つ兄弟スパンを見つけることです。 。

これで、グリッドをリセットするアクションが発生し、dataBoundまたは別のイベントが後で発生する可能性があります。コードのその部分には、デフォルトですべてのグループを折りたたむ（たとえば）何かがあります。そこで、逆のプロセスを実行する必要があります。反復グループコントロールからスパンとグループ名を見つけ、それがexpandedGroupsのリストにあるかどうかを確認します。そうである場合は、折りたたまないでください（または展開しないでください）。

    collapseGroups(expandedGroups);

折りたたみグループを呼び出して配列を渡した後：

  // method collapse groups, excluded groups will not be touched
    function collapseGroups(listOfExcludedGroups) {
    var grid = $("#gridId").data("kendoGrid");   
    if (!listOfExcludedGroups) {
        listOfExcludedGroups = [];
    }
        $(".k-grouping-row").each(function () {            
            var groupName = $(this).find("span")[0].innerHTML;
            if (groupName && listOfExcludedGroups.indexOf(groupName) > -1) {
                return; // continue
            }
            grid.collapseGroup(this);
        });   
    }
于 2019-12-17T20:59:12.893 に答える
0

まず第一に、コードからrefreshを呼び出す必要はめったにありません。グリッド（およびすべてのデータバインドされた剣道ウィジェット）は、データソースの変更をリッスンしており、それに応じて更新されます。

設計上、グループの展開/折りたたみ状態は保持されません。データソースを変更すると、すべてのグループが展開されます（これがデフォルトの状態です）。

于 2012-12-20T08:13:11.430 に答える