Conditionally disable custom command button

3 Answers 2014 Views
Grid
Jim Collier
Top achievements
Rank 1
Jim Collier asked on 13 Feb 2016, 12:18 AM

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

 

3 Answers, 1 is accepted

Sort by
0
Dimiter Madjarov
Telerik team
answered on 16 Feb 2016, 12:26 PM

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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Ron
Top achievements
Rank 1
answered on 20 Dec 2018, 03:54 PM
You can also add .prop("disabled", true) to functionally disable the action form the databound event.
0
Konstantin Dikov
Telerik team
answered on 24 Dec 2018, 08:00 AM
Hello,

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

Best Regards,
Konstantin Dikov
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Dennis
Top achievements
Rank 1
commented on 21 Jun 2019, 06:39 PM

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
Telerik team
commented on 25 Jun 2019, 11:41 AM

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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.

Ólafur Gíslason
Top achievements
Rank 1
commented on 31 Dec 2020, 12:04 PM

Thanks!  This solved my problem.
Tags
Grid
Asked by
Jim Collier
Top achievements
Rank 1
Answers by
Dimiter Madjarov
Telerik team
Ron
Top achievements
Rank 1
Konstantin Dikov
Telerik team
Share this question
or