Kendo Grid：编辑单个单元格并更新已选中的多个单元格

Absolutely, this is totally doable with Kendo Grid! I’ve implemented similar functionality before, so let me break down how to make this work for you.

Core Idea #

We need to:

• Track the cells the user selects (only those from the same column)
• Capture the value the user enters in the last selected cell
• Sync that new value to all previously selected cells in the same column

Step-by-Step Implementation #

First, let’s set up the Grid with the right configurations, then add the event handlers to handle selection and value syncing.

1. Grid Initialization & Event Setup

<div id="grid"></div>

<script>
// Store info about selected cells from the same column
let selectedSameColumnCells = [];

$("#grid").kendoGrid({
    dataSource: {
        data: [
            { id: 1, product: "Laptop", price: 999 },
            { id: 2, product: "Phone", price: 699 },
            { id: 3, product: "Tablet", price: 299 },
            { id: 4, product: "Headphones", price: 199 }
        ],
        schema: {
            model: {
                id: "id",
                fields: {
                    product: { type: "string" },
                    price: { type: "number" }
                }
            }
        }
    },
    selectable: "multiple cell", // Enable multiple cell selection
    editable: "incell", // Use incell editing (works with inline too, adjust events)
    columns: [
        { field: "product", title: "Product Name" },
        { field: "price", title: "Price" }
    ],
    // Handle cell selection to track same-column cells
    change: function(e) {
        const grid = e.sender;
        const selectedCells = grid.select();

        if (selectedCells.length === 0) {
            selectedSameColumnCells = [];
            return;
        }

        // Get the target column field from the first selected cell
        const firstSelectedCell = selectedCells.first();
        const targetColumnIndex = $(firstSelectedCell).index();
        const targetField = grid.columns[targetColumnIndex].field;

        // Collect data items and field for all selected same-column cells
        selectedSameColumnCells = $.map(selectedCells, function(cell) {
            const row = $(cell).closest("tr");
            const dataItem = grid.dataItem(row);
            return { dataItem: dataItem, field: targetField };
        });
    },
    // Sync value when edit is saved
    save: function(e) {
        const updatedValue = e.values[e.field];
        const targetField = e.field;

        // Only sync if we have selected cells from the same column
        if (selectedSameColumnCells.length > 0 && selectedSameColumnCells[0].field === targetField) {
            selectedSameColumnCells.forEach(function(cellInfo) {
                // Skip the current edited item (it's already updated by the save event)
                if (cellInfo.dataItem.id !== e.model.id) {
                    cellInfo.dataItem.set(cellInfo.field, updatedValue);
                }
            });
        }

        // Clear the selection tracker to avoid accidental syncs in future actions
        selectedSameColumnCells = [];
    }
});
</script>

Key Details Explained #

• selectable: "multiple cell": This turns on multi-cell selection, which is required for your use case.
• change Event: Every time the user selects cells, we check if they’re all from the same column, then store references to their corresponding data items and the target field.
• save Event: When the user finishes editing the last cell, we grab the new value and update all stored data items with it. We skip the current edited item since it’s already updated by the Grid’s native save logic.
• Clearing Selection Tracker: After syncing, we reset the tracker so subsequent selections don’t accidentally use old data.

Adjustments for Different Editing Modes #

• If you’re using inline editing, replace the save event with an edit + save combo: listen for edit to track which cell is being edited, then on save, sync the value to the selected cells.
• If you want to keep the selection after syncing, remove the line that clears selectedSameColumnCells—just be aware this might lead to unexpected syncs if the user selects new cells without clearing the old selection.

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