3

ポップアップを使用して剣道グリッド列のサイズを変更しようとしています。IE10 を除くすべてのブラウザで問題なく動作します。ヘッダー列は、グリッド内のコンテンツ列と一緒にサイズ変更されません。

サンプルを作成しました。IE 10 と chrome で実行すると違いがわかります

http://jsfiddle.net/pavancbz1/6LFYM/4/

サンプルには 3 列のグリッドがあります。ポップアップで列インデックスを 0、1、2 にして、それぞれの列のサイズを変更できます。

   $(document).ready(function() {
        var window = $("#window"),
            undo = $("#undo")
                    .bind("click", function() {
                        window.data("kendoWindow").open();
                        undo.hide();
                    });

        var onClose = function() {
            undo.show();
        }

        if (!window.data("kendoWindow")) {
            window.kendoWindow({
                width: "280",
                title: "Pop up",
                actions: [
                   "Minimize",
                    "Maximize",
                    "Close"
                ],
                close: onClose
            });
        }
          $("#grid").kendoGrid({
            dataSource: {
                transport: {
                    read: {
                        url: "http://demos.kendoui.com/service/Products",
                        dataType: "jsonp"
                    }
                },
                pageSize: 5,

            },
            selectable: "multiple row",
            pageable: {
                buttonCount: 5
            },
            scrollable: true,
            groupable: false,
             resizable: true,
            columns: [
                {
                    field: "ProductName",
                    width: 'auto',
                    title: "Product Name"
                },
                {
                    field: "UnitPrice",
                    width: 'auto',
                    title: "Unit Price",
                    format: "{0:c}"
                },
                {
                    field: "UnitsInStock",
                    width: 'auto',
                    title: "Units In Stock"
                }
            ]
        });
         var IncreaseWidth = function (e) {
            if (e.type != "keypress" || kendo.keys.ENTER == e.keyCode) {
                var grid = $("#grid"),
                        Index = $("#index").val(),
                        tablewidth = grid.find('table').width();
                        grid.find('table').width(tablewidth+20);
                         columnwidth = grid.find('colgroup:first').find('col:eq(' + Index + ')').width();
                          grid.find('colgroup').find('col:eq(' + Index + ')').width(columnwidth+20);

            }
        },
            DecreaseWidth = function (e) {
                if (e.type != "keypress" || kendo.keys.ENTER == e.keyCode) {
                   var grid = $("#grid"),
                        Index = $("#index").val(),
                        tablewidth = grid.find('table').width();
                        grid.find('table').width(tablewidth-20);
                         columnwidth = grid.find('colgroup:first').find('col:eq(' + Index + ')').width();
                          grid.find('colgroup').find('col:eq(' + Index + ')').width(columnwidth-20);
                }
            };


        $(".Increase").click(IncreaseWidth);

        $(".Decrease").click(DecreaseWidth);


    });

この問題の解決策はありますか?

4

1 に答える 1

1

同様の問題を抱えている人のために、列のサイズ変更の問題に対処するために使用した簡単な回避策を次に示します。

この問題に関する主な観察結果は、ユーザーが列を手動で調整すると、グリッド列が適切に再調整されることです。

したがって、私の回避策では、基本的に最初の列を非表示にして表示し、グリッド列のサイズを変更して列を適切に自動的に再配置します。ただし、グリッドがすべてのデータを受け取った後、列のサイズを変更する必要があります。カスタム メッセージングに増幅を使用しましたが、コードがデータの受信後にグリッドで列のサイズ変更を自動的に強制できる限り、その実装の詳細は重要ではありません。

例えば、

var dataSource = new kendo.data.DataSource({
            type: 'json',
            transport: {
                read: config.AppBasePath + '/Home/GetSomething',
                parameterMap: function (data, type) {
                    if (type == 'read') {
                        return {
                            id: messageId
                        };
                    }
                }
            },
            pageSize: 10,
            requestEnd: function (e) {
                amplify.publish(config.Messages.ShowWindowComplete);
            }
        }),           

    ....


    amplify.subscribe(config.Messages.ShowWindowComplete, function () {
        messageHistoryKendoGridElem.data('kendoGrid').hideColumn(1);
        messageHistoryKendoGridElem.data('kendoGrid').showColumn(1);
    });

これが同様の問題に直面している人の助けになることを願っています。

于 2013-10-29T18:05:45.403 に答える