Conditionally disable custom command button

[Jim Collier]

I would like to conditionally disable custom command button when a specific value existing in a column field.

@(Html.Kendo().Grid<Swisslog.DC.Entities.AlarmRespond>
                ()
                .Name("alarmRespondGrid")
                .Events(e => e.DataBound("commandButtons"))
                .Columns(columns =>
                {
                    columns.Bound(c => c.Customer).Title("Customer");
                    columns.Bound(c => c.CustomerID).Title("Customer #").Sortable(false).Width(100);
                    columns.Bound(c => c.EquipmentID).Title("Equipment #").Sortable(false).Width(100);
                    columns.Bound(c => c.AlarmCode).Title("Alarm").Sortable(false).Width(75);
                    columns.Bound(c => c.AltAlarmDescription).Title("Description").Sortable(false);
                    columns.Bound(c => c.FirstAlarmDateLocal).Title("Alarm Date").Format("{0:MM/dd/yy hh:mm:ss tt}").Width(175);
                    columns.Bound(c => c.AlarmCount).Title("Count").Sortable(false).Width(75);
                    columns.Bound(c => c.AssignedTo).Title("Assigned To").Sortable(false).Width(175);
                    columns.Command(command => command.Custom("Assign").Click("assignAlarm")).Width(100);
                    columns.Command(command => command.Custom("Auto Case").Click("showResolveWindow")).Width(100);
                    columns.Command(command => command.Custom("Manual Case").Click("createSfdcAlarmCase")).Width(100);
                })

 When c.AssignedTo == "" I would like to disable the Auto Case and Manual Case buttons.  It is not clear to me how to accomplish this with a custom command.

 

Jim

 

[Dimiter Madjarov]

Hello Jim,

There is no configuration option for disabling custom commands. A visually disabled style could be applied in the dataBound event handler of the Grid by iterating it's items.
E.g.

columns.Command(c => c.Custom("customCommand"));

.Events(e => e.DataBound("dataBound"))

function dataBound(e) {
    var grid = this;

    grid.tbody.find("tr[role='row']").each(function () {
        var model = grid.dataItem(this);

        if (model.Freight > 20) {
            $(this).find(".k-grid-customCommand").addClass("k-state-disabled");
        }
    });
}

Nevertheless this will not prevent the custom handler for the command to be executed. You should perform similar check in the command click handler.

Regards,
Dimiter Madjarov
Telerik

[Ron]

You can also add .prop("disabled", true) to functionally disable the action form the databound event.

[Konstantin Dikov]

Hello,

With the latest versions it is also possible to define a function that will render the command button conditionally:

• https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/configuration/columns.command#columnscommandvisible

Best Regards,
Konstantin Dikov
Progress Telerik

[Dennis]

Just curious, but how come when someone asks about a MVC Kendo widget, do you almost always give a link to the jQuery widgets examples? It's very frustrating for someone who is new to using Kendo products.

[Viktor Tachev]

Hi Dennis,

I understand that it can be confusing to get JavaScript code when asking for an MVC widget. 

The reason behind this is that the Grid HtmlHelper is actually a wrapper of the jQuery widgets. Thus, if you would like to customize the widget it is likely that you would need to use JavaScript. 

Regarding the configuration for showing a command button conditionally. With the MVC Grid the setup would look similar to the following:

columns.Command(command => command.Custom("customCommand").Visible("isVisible"));

And the isVisible handler in JavaScript: 

function isVisible(e) {
    if (condition) {
        // hide command
        return false;
    }

    // show command
    return true;
}

Regards,
Viktor Tachev
Progress Telerik

[Ólafur Gíslason]

Thanks!  This solved my problem.