KendoUI Grid - 列幅に合わせてフォントサイズを動的に変更できますか？

Question

フォントサイズを動的に設定して、指定されたサイズのスパン内にテキストを収めるためのソリューションがいくつかあります。剣道グリッドでこれを自動的に行う方法はありますか？私の列は、テーブルのサイズが（必要に応じて）縮小するにつれて、比例したサイズを維持するように見えますが、小さくなるにつれて行を大きくするデータをラップするか、末尾に省略記号を置きます。十分な大きさの列を縮小すると、まさに楕円形になり、データが本当に何であるかがわかりません。私はフォントが小さくされている場合は、それがより便利だろうと確信しています。しかし、グリッドが大きくなるとフォントが大きくなる必要があります。

テーブル全体（またはその親）の幅に基づいて、テーブル内のすべての列（表セル）のフォントサイズを変更できる機能があるとします。それは容認できるかもしれません。しかし理想的ではない。私はむしろ、より短いテキスト（場合によってはただ1つの文字）があるため、より多くのテキストを含むフィールドにはより小さなフォントと、まだ適合するフィールドがあり、その列のフォントを縮める本当の理由はありません。

おそらく、誰かがこれを行うためにjQueryプラグインの1つを使ってみましたが、私はtextfillプラグインを試しましたが、まだそれは運がありませんでした。

誰もこれを前に行っていない場合、解決策が見つかった場合、私は自分で回答を投稿します。

Answer 1

私が過去に行ったことは、「レスポンシブな」列を設定するグリッドの設定があることです。サイズを変更すると、設定された列はグリッドのサイズによって隠されます。そのようにこれはJavaScriptで行われるだろうと列を非表示にすることができます：あなたの最小/最大ウィンドウの設定を持つことができます

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

：

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

あなたが剣道を使用して列を表示/非表示にすることができます各列のサイズとそれに応じて非表示/表示します。がんばろう。

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

     } 
    } 
}); 

注けどロジック通常のグリッドではまだ動作します。