KendoUI Grid动态添加行绑定VM问题（v2017.3.913客户端）

Hey Boomer, let's dig into that final step issue with your Kendo Grid (2017.3.913) in client-side mode. Since all prior steps work fine, the problem is almost certainly tied to how you're inserting those green header rows and handling checkbox states after binding/filtering. Here's how to fix it:

1. Hook into the Right Grid Event #

Kendo Grid re-renders rows whenever you apply filters, sort, or paginate. If you're only running your row-modification logic once (right after initial binding), those green rows will disappear or get messed up after filtering. Instead, use the dataBound event—it fires every time the grid finishes loading/binding data, including post-filter updates.

Here's how to wire it up:

$("#yourGridId").kendoGrid({
    // Your existing config: dataSource, columns, etc.
    dataBound: function(e) {
        this.setCheckboxStates(); // Handle disabled/checked checkboxes
        this.insertGreenHeaderRows(); // Add those grouping green rows
    }
});

2. Cleanly Insert Green Header Rows #

Direct DOM manipulation works, but you need to avoid duplicate rows and target only data rows. First, clear any existing green rows before inserting new ones, then group your data rows by their associated identifier (I'll assume you have a GroupId or similar field in your data items):

Add this as a custom method to your grid (or wrap it in a function):

insertGreenHeaderRows: function() {
    var grid = this;
    var tbody = grid.tbody;
    
    // Remove old green rows first to avoid duplicates
    tbody.find(".green-group-header").remove();
    
    var rows = tbody.find("tr[data-uid]"); // Target only actual data rows (Kendo marks these with data-uid)
    var previousGroup = null;

    rows.each(function(index) {
        var dataItem = grid.dataItem(this);
        // Check if we've switched to a new group
        if (dataItem.GroupId !== previousGroup) {
            // Create the green header row (span all columns)
            var headerRow = $(`<tr class='green-group-header'><td colspan='${grid.columns.length}'>${dataItem.GroupName}</td></tr>`);
            // Insert it before the current data row
            $(this).before(headerRow);
            previousGroup = dataItem.GroupId;
        }
    });
}

Add CSS to style the green rows:

.green-group-header {
    background-color: #d4edda;
    font-weight: 600;
    color: #155724;
}

3. Properly Set Checkbox States #

When updating checkbox disabled/checked status, tie it directly to your data item properties (like IsSelected and a new IsDisabled flag if you don't have one already). This ensures consistency even after filtering:

setCheckboxStates: function() {
    var grid = this;
    grid.tbody.find("tr[data-uid]").each(function() {
        var dataItem = grid.dataItem(this);
        var checkbox = $(this).find(".k-checkbox input");
        
        // Set disabled state based on data item
        checkbox.prop("disabled", dataItem.IsDisabled);
        // Set checked state from your IsSelected property
        checkbox.prop("checked", dataItem.IsSelected);
        
        // Optional: Add a visual cue for disabled rows
        if (dataItem.IsDisabled) {
            $(this).addClass("disabled-row");
        } else {
            $(this).removeClass("disabled-row");
        }
    });
}

4. Version-Specific Notes for 2017.3.913 #

• The data-uid attribute is critical here—2017-era Kendo Grids use this to link DOM rows to data items, so always target tr[data-uid] to avoid modifying non-data rows (like pagination or header rows).
• If you're using client-side pagination, this logic will only affect the current page's rows, which is exactly what you want.

Common Pitfalls to Avoid #

• Forgetting to clear old green rows before inserting new ones: This causes duplicate headers after multiple filter actions.
• Running logic outside dataBound: Filtering/sorting triggers a re-render, so one-time DOM changes get wiped out.
• Not linking checkbox state to data items: If you hardcode states instead of using IsSelected/IsDisabled, they'll reset after filtering.

Give these steps a shot—they should resolve the final step issues you're seeing!

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