如何用jQuery在缩短Kendo Grid单元格内容后重新调整行高？

方法一：通过Kendo Grid API修改数据（推荐） #

直接操作DOM不会触发Grid的内部更新机制，正确的做法是通过Grid的dataItem和set方法修改数据源，让Grid自动重新渲染行：

// 替换成你的Grid的ID
var grid = $('#yourGridId').data('kendoGrid');

$('.shortenString').each(function () {
    // 获取当前单元格所在行的数据源对象
    var dataItem = grid.dataItem($(this).closest('tr'));
    // 替换成对应的数据字段名
    var fieldName = 'yourTargetField';
    var originalContent = dataItem[fieldName];
    
    // 截取字符串
    var shortenedContent = originalContent.substring(0, originalContent.indexOf('-'));
    // 更新数据源，Grid会自动重新渲染该行
    dataItem.set(fieldName, shortenedContent);
});

方法二：修改DOM后触发指定行重绘 #

如果必须直接修改DOM内容，修改完成后可以调用Grid的refreshRow方法单独刷新修改过的行，强制重新计算行高：

// 替换成你的Grid的ID
var grid = $('#yourGridId').data('kendoGrid');

$('.shortenString').each(function () {
    // 修改单元格内容（改用innerHTML，避免破坏Grid的DOM绑定）
    var shortenedContent = this.innerHTML.substring(0, this.innerHTML.indexOf('-'));
    this.innerHTML = shortenedContent;
});

// 刷新所有修改过的行
$('.shortenString').closest('tr').each(function() {
    grid.refreshRow($(this));
});

关键说明 #

• 避免直接修改outerHTML：替换outerHTML会完全替换单元格DOM元素，导致Grid失去对该元素的绑定，改用innerHTML修改内容更安全。
• 优先使用API操作数据源：Kendo Grid的渲染依赖于内部数据源状态，通过API修改能保证组件状态同步，避免出现行高、样式不一致的问题。

内容的提问来源于stack exchange，提问作者Tom S