KendoUI Grid-可以動態更改字體大小以適合列寬嗎？

Question

我看到有一些解決方案可以動態設置字體大小，以使文本適合給定的大小范圍。 有什么方法可以在Kendo Grid中自動執行此操作嗎？ 當表的大小縮小時（根據需要），我的列似乎保持成比例的大小，但是隨着表的變小，它要么包裝數據使行變高，要么將橢圓放在末尾。 如果將列的大小縮小到足夠大，則只會出現橢圓，而無法知道數據的真正含義。 我確定如果將字體縮小，會更有用。 但是當網格更大時，我需要更大的字體。

我想我可以有一個功能，可以基於整個表（或其父表）的寬度來更改表中所有列（表單元格）的字體大小。 那可能是可以接受的。 但是並不理想。 我寧願有一個文本較多的字段使用較小的字體，而一個仍適合的字段，因為它很短（在某些情況下只有一個字母），因此沒有真正的理由在該列中縮小字體。

也許有人嘗試使用jQuery插件之一來執行此操作，但我嘗試使用textfill插件，但還沒有運氣。

如果以前沒有人做過，如果/當我找到解決方案時，我會在這里自己張貼答案。

Answer 1

我過去所做的是為網格設置一個設置，該設置將設置“響應”列。 調整大小后，根據網格的大小，設置的列將被隱藏。 這將在javascript中完成，並且列可以這樣隱藏：

$(window).on("resize", function () {
        //add your code here
    });

您可以使用kendo隱藏/顯示列：

$("#grid_name").data("kendoGrid").showColumn("ColumnName");
$("#grid_name").data("kendoGrid").hideColumn("ColumnName");

您可以為每列設置最小/最大窗口大小，並相應地隱藏/顯示。 祝好運。

Answer 2

手動處理此問題的最佳方法是dataBound事件。 每次更新網格中的數據時都會調用此事件，因此您可以從那里訪問網格的列，dataItem及其對應的html元素。 有了這些信息，您將能夠實現自己的邏輯並為每個單獨的元素設置CSS樣式：

$("#YourGrid").kendoGrid({
    dataBound: function(){

        //You can use the TR element
        $.each($("#YourGrid").data("kendoGrid").dataSource.view(), function (index, viewDataItem) {

            var jqTr = $("#YourGrid").find("tbody>tr[data-uid='" + viewDataItem.uid + "']");

            if ($("#YourGrid").width() > 1000) {
                jqTr.css("font-size", "10px");
            } else {
                jqTr.css("font-size", "12px");
            }

        });

        //Or a specific TD element if you need to set a font-size per column (or for a specific cell)
        $.each($("#YourGrid").data("kendoGrid").columns, function (index, columnScan) {

            var jqTd;
            if (columnScan.locked) {
                lockCount++;
                jqTd = _this.kendoGrid().lockedContent.find("tbody>tr>td:nth-child(" + (index + 1) + ")");
            } else {
                jqTd = _this.kendoGrid().tbody.find(">tr>td:nth-child(" + (index + 1 - lockCount) + ")");
            }

            if (columnScan.width > 100) {
                jqTd.css("font-size", "10px");
            } else {
                jqTd.css("font-size", "12px");
            }

        }
    }
});

請注意，以上代碼是在具有可鎖定列上下文的虛擬滾動中完成的，但我的邏輯仍然適用於常規網格。