New to Telerik UI for ASP.NET MVC? Start a free 30-day trial

Conditionally Show Column Commands in Grid

Environment

Product	Telerik UI for ASP.NET MVC Grid
Product version	2025.1.227

Description

How can I conditionally show a specified column command in the Grid?

Solution

The column commands support the Visible property that accepts a JavaScript function name.

By default, the current dataItem is passed to the JavaScript method as an argument. You can use this configuration to access the values of the respective data item.

The following example demonstrates how to show the built-in Edit command for the entire row based on the value of the ProductID field.

Add the Visible property to the Edit command and specify the name of the JavaScript function.

Razor

    @(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.ProductViewModel>()
        .Name("grid")
        .Columns(columns =>
        {
            columns.Bound(p => p.ProductName);
            columns.Bound(p => p.UnitPrice).Width(120);
            columns.Bound(p => p.UnitsInStock).Width(120);
            columns.Bound(p => p.Discontinued).Width(120);
            columns.Command(command =>
            {
                command.Edit().Visible("editVisible");
                command.Destroy();
            }).Width(250);
        })
        .DataSource(dataSource => dataSource
            .Ajax()
            .Model(model => model.Id(p => p.ProductID))
            ... // Settings omitted for brevity.
        )
        ... // Settings omitted for brevity.
    )

Add logic in the JavaScript function to determine if the Edit command must be displayed.

    <script>
        function editVisible(dataItem) {
        // Hide the "Edit" button for the record with "ProductID" that equals "1".
            return dataItem.ProductID != 1;
        }
    </script>

Conditionally Show Column Commands in Grid

Environment

Description

Solution

More ASP.NET MVC Grid Resources

See Also