Kendo UI kılavuz sütun genişlikleri programatik olarak nasıl ayarlanır

Question

Kendo UI ızgara sütun genişliklerini programsal olarak ayarlamak istiyorum. Ancak hiçbir şey GUI değişiklikleri, sütun

function setColumnWidths(grid, options) { 
    for (var i = 0; i < options.columns.length; i++) { 
     grid.columns[i].width = options.columns[i].width; 
    } 
} 

ifadeleri infaz sonrasında krom ayıklama, grid.columns [i] .width uygun yeni değere ayarlanmış gibi görünüyor: Aşağıdaki kodu kullanıyorum genişlikler aynı kalır. Neyi eksik?

Answer 1

Ben bununla sona. Dion'un çözümü, ortak grupların kullanımı hakkında bir fikre kapılmamı sağladı, ancak çözüm kilitli sütunlara sahip olmakla sınırlı değil, farklı ortak grupta.

Ayrıca dikkat: Ben grid.setOptions kullanmak istemiyorum, onun sınırlamaları (ızgara işlemek için ASP MVC yardımcı kullanarak durumunda) ekli olay ve başlık mahvediyor

function setColumnWidths(grid, options) { 
    var lockedCount = 0; 
    for (var i = 0; i < options.columns.length; i++) { 
     if (options.columns[i].hasOwnProperty('locked')) { 
      if (options.columns[i].locked) { 
       lockedCount++; 
      } 
     } 
    } 

    for (var i = 0; i < options.columns.length; i++) { 
     var width = options.columns[i].width; 
     grid.columns[i].width = width; 
     if (options.columns[i].hasOwnProperty('locked') && options.columns[i].locked) { 
      $("#grid .k-grid-header-locked").find("colgroup col").eq(i).width(width); 
      $("#grid .k-grid-content-locked").find("colgroup col").eq(i).width(width); 

     } else { 
      $("#grid .k-grid-header-wrap").find("colgroup col").eq(i-lockedCount).width(width); 
      $("#grid .k-grid-content").find("colgroup col").eq(i - lockedCount).width(width); 
     } 
    } 
    // Hack to refresh grid visual state 
    grid.reorderColumn(1, grid.columns[0]); 
    grid.reorderColumn(1, grid.columns[0]); 
} 

Answer 2

Kılavuz genişliğini, tanımı yerine elemanın içinden değiştirmelisiniz. Kendo ızgarası başlık ve içerik içerir, bu yüzden iki öğeyi değiştirmeniz gerekir.

kullanın bu kod yerine

$("#grid-id .k-grid-header-wrap").find("colgroup col").eq(xx).width(yy); 
$("#grid-id .k-grid-content").find("colgroup col").eq(xx).width(yy); 

Sample