2

グリッドにデータが入力されていますが、3列または2列のみを表示し、残りの列を非表示にすると、グリッドが非常に広くなります。マウスを行に合わせると、その行のすべての列がポップアップ/ツールチップフォームとして表示されます。

これを手伝ってください。私はたくさん検索しましたが、編集可能なポップアップと、ホバーではなくボタンクリックでしか見つかりませんでした。

function PopulateGrid() {
    $("#recentNews").kendoGrid({

        columns: [
            { field:      'Date', title: 'Date', width: 80,
                template: '#=kendo.toString(toDate(NewsDate), "yyyy/MMM/dd") #'
            },
            { field:      'TradeTime', title: 'Time', width: 60,
                template: '#=kendo.toString(toDate(NewsTime), "hh:mm:ss") #'
            },

            { field: 'Title', title: 'Description', width: 200 },
            { field: 'Country', title: 'Country', width: 40 },
            { field: 'Economy', title: 'Economoy', width: 40 }

        ],

        dataSource: {
            transport: {
                read: {
                    url:      'Home/GetNews',
                    dataType: "json",
                    type:     "POST"
                }
            },
            schema:    {
                data:  function (data) {
                    return data.data;
                },
                total: function (data) {
                    return data.total;
                }
            },
            pageSize:  100

        },
        //            change: onChange,
        //          dataBound: onDataBound,
        dataBound:  HoverOnGrid,
        pageable:   true,
        sortable:   true,
        scrollable: true,
        height:     565,
        width:      2000
    });
}
4

1 に答える 1

5

実装しようとしているものについて、2つの別々の質問があります。

  1. ホバーをGrid行にバインドします（簡単）。
  2. 残りの列を表示するポップアップ/ツールチップを生成します（簡単ですが、ある程度のコーディングが必要です）。

と呼ばれる関数をすでに定義しているように見えるので、次のようにHoverOnGrid記述します。

function HoverOnGrid() {
    $("tr", "#recentNews").on("mouseover", function (ev) {
        // Invoke display tooltip / edit row
        var rowData = grid.dataItem(this);
        if (rowData) {
            showTooltip(rowData);
        }
    });
}

ここgridで：

var grid = $("#recentNews").kendoGrid({
    ...
}).data("kendoGrid";

さて、トリッキーな質問、ツールチップ/ポップアップを表示する方法...事前定義された方法はありません。自分で行う必要があります。あなたが得ることができる終値は次のように定義HoverOnGridされています：

function HoverOnGrid() {
    $("tr", "#recentNews").on("click", function (ev) {
        grid.editRow(this);
    })
}

そしてGrid初期化は言う：

 editable:   "popup",

しかし、これは開きますが、編集モードのフィールドがあります（すべてのフィールドが編集可能ではないことをpopup定義するハックできるもの：dataSource.schema.model

model: {
    fields: {
        Date:      { editable: false },
        TradeTime: { editable: false },
        Title:     { editable: false },
        Country:   { editable: false },
        Economy:   { editable: false }
    }
}

しかし、それでも。updateにcancelボタンが表示されますpopup。

したがって、私の推奨事項は、それを作成するコードを作成することtooltipです。

編集：非表示にするには、最初にイベントtooltipをインターセプトする必要があります：mouseout

$("tr", "#recentNews").on("mouseout", function (ev) {
    // Hide Tooltip
    hideTooltip();
});

ここで、hideTooltip次のような単純なものがあります。

var tooltipWin = $("#tooltip_window_id").data("kendoWindow");
tooltipWin.close()

（この例では）に常に同じものidを使用していると仮定します。tooltiptooltip_window_id

于 2012-12-28T22:45:13.473 に答える