KendoUI Grid - может динамически изменять размер шрифта в соответствии с шириной столбца?

Question

Я вижу, что есть некоторые решения для динамического определения размера шрифта, чтобы текст вписывался в заданный диапазон размеров. Любой способ автоматически сделать это в Kendo Grid? Мои столбцы, по-видимому, сохраняют пропорциональные размеры, поскольку таблица сжимается по размеру (по желанию), но по мере того, как она становится меньше, она либо обертывает данные, делая строки выше, либо кладет эллипсы в конец. Если он сжимает колонку размером достаточно, есть только эллипсы, не знаю, что такое данные на самом деле. Я уверен, что если шрифт будет меньше, это будет более полезно. Но мне нужен шрифт больше, когда сетка больше.

Я полагаю, что у меня могла бы быть функция, которая в зависимости от ширины всей таблицы (или ее родителя) могла бы изменить размер шрифта для всех столбцов (table-cell's) в таблице. Это может быть приемлемо. Но не идеально. Я предпочел бы, чтобы поле с большим количеством текста получило меньший шрифт и поле, которое все еще подходит, потому что оно очень короткое (в некоторых случаях только одна буква), не было бы реальной причины сжимать шрифт в этом столбце.

Возможно, кто-то попытался использовать один из плагинов jQuery, чтобы сделать это, я попробовал плагин textfill, но пока не повезло.

Если никто не делал этого раньше, если/когда я нахожу решение, я сам отправлю ответ здесь.

Answer 1

Что я сделал в прошлом, есть настройка для моих сеток, которые устанавливают «чувствительные» столбцы. При изменении размера столбцы, которые были установлены, будут скрыты в зависимости от размера сетки. Это будет сделано в JavaScript и столбцы могут быть скрыты так:

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

Вы можете скрыть/показать столбцы с помощью кендо:

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

     } 
    } 
}); 

Обратите внимание, что код выше был сделан в виртуальной прокрутке с блокируемым контексте колонки, но я усовершенствовал логику будет по-прежнему работать на регулярной сетке.