Saya memiliki Grid di aplikasi Vaadin 8 saya dan terkadang scrollbar Grid muncul saat tidak diperlukan atau menghilang saat tidak diperlukan. Mereka bahkan bisa terjebak dalam satu lingkaran. Grid saya memiliki lima kolom, dan saya hanya menggunakan Renderer bawaan yang disertakan dengan Vaadin 8.

Saya menggunakan CSS untuk mengatur lebar kolom untuk kolom pertama menjadi 30%. Masalahnya tidak muncul jika saya menghapus baris itu dari tema saya, tetapi saya membutuhkannya. Bagaimana saya bisa membuatnya bekerja?

7
Anna Koskinen 10 Mei 2021, 19:29

2 jawaban

Jawaban Terbaik

Vaadin 8 Grid tidak mendukung konfigurasi lebar kolom melalui CSS, Anda harus mengatur setiap dan semua konfigurasi lebar kolom secara terprogram (melalui myColumn.setWidth(pixelWidth);) atau perhitungan sisi klien terputus. Perhitungan tersebut sangat penting untuk menentukan lebar yang diharapkan untuk setiap kolom yang tidak memiliki lebar tetap, dan akibatnya terikat erat dengan logika scrollbar.

Sayangnya tidak ada solusi bawaan untuk menyetel lebar persentase untuk kolom, atau untuk mendapatkan ukuran aktual Grid dari sisi server, atau untuk mendengarkan perubahan ukuran Grid. Namun, Anda dapat menggunakan add-on SizeReporter untuk membantu dengan dua yang terakhir (lihat tab Contoh Kode untuk petunjuk penggunaan), dan hitung lebar piksel yang diperlukan dari sana. Add-on GridScrollerExtension juga menawarkan kedua fungsi tersebut, serta menanyakan lebar kolom saat ini dan fitur khusus Grid lainnya.

Untuk solusi yang sedikit lebih meretas, Anda juga dapat menggunakan panggilan balik JavaScript untuk menanyakan lebar:

        ui.getPage().getJavaScript().addFunction("gridSizeCallback",
                new JavaScriptFunction() {
                    @Override
                    public void call(JsonArray arguments) {
                        // set myColumn width as 30%
                        myColumn.setWidth(arguments.getNumber(0) * 0.30);
                    }
                });
        ui.getPage().getJavaScript()
                .execute("gridSizeCallback(document.getElementById('"
                        + grid.getId() + "').clientWidth);");

Perhatikan bahwa ini hanya memberi Anda lebar awal, dan tidak membantu masalah pengubahan ukuran. Solusi untuk itu tergantung pada apa yang semua dapat memicu pengubahan ukuran Grid (misalnya mengulangi panggilan JavaScript kedua melalui ui.getPage().addBrowserWindowResizeListener ketika browser diubah ukurannya).

7
Anna Koskinen 10 Mei 2021, 16:47

Saya ingin memperluas jawaban https://stackoverflow.com/a/67474239/1184842 dari Anna Koskinen, tetapi ini adalah sedikit terlalu banyak kode untuk komentar, jadi tidak ada jawaban terpisah yang nyata di sini ...

SizeReporter hanya dapat digunakan sebagai ide bagaimana mengirim ukuran sisi klien ke server, karena seseorang membutuhkan lebar bagian dalam tableWrapper di Eskalator Grid. Jika tidak, ruang bilah gulir vertikal dapat digunakan sebagai ruang untuk kolom yang mengarah ke hasil yang salah dan mis. pembungkus kolom.

Saya berhasil dengan mengubah implementasi di kelas turunan dari Grid dengan Konektor yang diperluas. Saya mengubah templating metode init dari metode perluasan dari SizeReporterConnector dengan cara ini:

    @Override
    protected void init() {
        super.init();

        this.extendedGridServerRpc = this.getRpcProxy(ExtendedGridServerRpc.class);

        final Element widget = getWidget().getEscalator().getTableWrapper();

        if (widget.getOffsetWidth() > 0 && widget.getOffsetHeight() > 0) {
            extendedGridServerRpc.innerSizeChanged(widget.getOffsetWidth(), widget.getOffsetHeight());
        }

        LayoutManager.get(this.getConnection()).addElementResizeListener(widget, new ElementResizeListener() {
            public void onElementResize(ElementResizeEvent event) {
                extendedGridServerRpc.innerSizeChanged(widget.getOffsetWidth(), widget.getOffsetHeight());
            }
        });
    }
1
jan 12 Mei 2021, 16:23