如何在Kendo Grid中根据列值隐藏按钮及gridDataBound函数实现示例

Hey there, let's get this sorted out. You need to hide the Copy button in your Kendo Grid rows based on the value of the status column, and this logic should run inside the gridDataBound event. Here's a straightforward implementation with explanations:

Step-by-Step Code Example #

First, assuming your Grid is set up with a command column that includes the Copy button, here's how you can wire up the gridDataBound event to handle the hiding logic:

<div id="yourGridId"></div>

<script>
$("#yourGridId").kendoGrid({
    columns: [
        { field: "yourOtherField1", title: "Field 1" },
        { field: "status", title: "Status" },
        // Command column with Copy button
        { 
            command: [{ name: "copy", text: "Copy" }], 
            title: "Actions",
            width: "120px"
        }
    ],
    dataSource: {
        // Your data source configuration here (remote or local)
        data: [
            { yourOtherField1: "Sample Item 1", status: "Completed" },
            { yourOtherField1: "Sample Item 2", status: "Draft" },
            { yourOtherField1: "Sample Item 3", status: "Completed" }
        ]
    },
    gridDataBound: function(e) {
        // Get reference to the Grid instance
        const grid = e.sender;
        // Grab all rows in the Grid's body
        const rows = grid.tbody.find("tr");

        // Loop through each row to check status
        rows.each(function() {
            // Get the data object bound to this row
            const dataItem = grid.dataItem(this);
            // Extract the status value from the data item
            const rowStatus = dataItem.status;

            // Define your condition: hide Copy button when status meets this rule
            // Example: Hide if status is "Completed"
            if (rowStatus === "Completed") {
                // Find the Copy button in this row (Kendo adds .k-grid-[commandName] class)
                $(this).find(".k-grid-copy").hide();
                
                // Optional: If you want to disable instead of hide, use this line instead:
                // $(this).find(".k-grid-copy").prop("disabled", true).addClass("k-state-disabled");
            }
        });
    }
});
</script>

Key Notes: #

• Targeting the Copy Button: Kendo automatically adds a CSS class to command buttons in the format .k-grid-[commandName]. Since your command is named "copy", the button will have the class k-grid-copy—that's how we target it reliably.
• Accessing Row Data: Using grid.dataItem(this) gives you direct access to the original data bound to the row, so you don't have to parse the DOM to get the status value (this is far more stable than reading from the UI).
• Customize the Condition: Adjust the if statement to match your specific business rule (e.g., rowStatus === "Archived" or rowStatus !== "Editable").
• Disable vs Hide: If you prefer to keep the button visible but unclickable, replace .hide() with the disabled logic commented in the code.

This approach ensures that every time the Grid finishes binding data (including after sorting, filtering, or pagination), the button visibility is updated correctly.

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