KendoUI Grid-可以动态更改字体大小以适合列宽吗？

Question

I see there are some solutions out there for dynamically setting font size to make text fit within a given size span. Any way to automatically do this in Kendo Grid? My columns seem to keep proportional sizes as the table shrinks in size (as desired), but as it gets smaller, it either wraps data making the rows taller, or it puts ellipses at the end. If it shrinks a column in size enough, there is just ellipses, no clue what the data really is. I'm sure if the font were made smaller, it would be more useful. But I need the font larger when the grid is bigger.

I suppose I could have a function that, based on the width of the whole table (or its parent) I could change the font size of all the columns (table-cell's) in the table. That might be acceptable. But not ideal. I'd rather have a field with more text get a smaller font, and a field that still fits because it is very short (in some cases just one letter), there would be no real reason to shrink the font in that column.

Perhaps someone has tried using one of the jQuery plugins to do this, I tried the textfill plugin but did not have luck with it yet.

If nobody has done this before, if/when I find a solution I will post the answer here myself.

Answer 1

What I have done in the past is have a setting for my grids that would set the 'responsive' columns. Upon resize, the columns that were set would be hidden depending on the size of the grid. This would be done in javascript and the columns can be hidden like so:

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

You can hide/show the columns using kendo:

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

You can have a setting for your min/max window size for each column and hide/show accordingly. Good luck.

Answer 2

The best place to handle this manually would be the dataBound event. This event will be called every time the data in the grid will be updated so from there you'll be able to access the grid's column, dataItem and their corresponding html elements. With those information, you'll be able to implement your own logic and set the CSS style for each individual element:

$("#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");
            }

        }
    }
});

Note that the code above was made in a virtual scrolling with lockable column context but I the logic would still work for a regular grid.