Correct way to disable command button?

[H]

Hi,

Is there a way to conditionally disable the Edit or Delete command buttons?

We tried doing it like this & it does make the data in the row & the command buttons look disabled (grayed-out) but I can still click on the command buttons & the functions are called.

.RowAction(row =>{

 

 

if (row.DataItem.Status.Equals("C"))

 

{     row.HtmlAttributes[

 

"disabled"] = "true";}

 

})

This grid is using Server binding.

If there isn't a way to disable the command buttons, is there a way to use our own custom buttons to mimic the funtionality of the Edit command button?

Thank you.

[Atanas Korchev]

Hello H,

You can try CellAction instead:

.CellAction(cell =>
            {
                if (cell.Column.Title == "Commands" && cell.DataItem.Status.Equals("C")))
                {
                    cell.HtmlAttributes["style"] = "visibility:hidden";
                }
            })

Regards,
Atanas Korchev
the Telerik team

[H]

Thanks, yes, we are able to hide command buttons but we are trying to disable them, so the user still sees the button but it's disabled & doesn't react when they click on it.

If we used Ajax binding we could catch the OnEdit event if the user clicks on the disabled button, but we are using Server binding so that won't work.

Any ideas?

[Atanas Korchev]

Hi H,

 Currently this is not possible. You don't have access to the buttons so you cannot disable them. Hiding them altogether is the only thing we can offer as a workaround.

All the best,
Atanas Korchev
the Telerik team

[Carson]

I would like to hide a delete button, conditionally, but NOT the edit button in the same row.
It doesn't seem like that would be possible with your CellAction solution, either, right?
Is there a way?

Edit: Got it working with two separate Command columns. Would prefer one Command column.

[Tomas]

Sorry, you can solution your problem, i have the same.

[Carson]

I think I would probably use Row Templates, now. But here was the solution I went with, a year ago:

Html.Telerik().Grid(Model)
        .Name("ElementsGrid")
        .DataKeys(dataKeys => dataKeys.Add(o => o.ElementId))
        .ToolBar(commands => commands.Insert().ButtonType(GridButtonType.ImageAndText))
        .DataBinding(dataBinding => dataBinding.Server()
            .Insert("UpdateElement", "Design")
            .Update("UpdateElement", "Design")
            .Delete("DeleteElement", "Design")
        )
        .Columns(columns =>
        {
            columns.Bound(o => o.ElementId).Width(50);
            columns.Bound(o => o.Name).Width(178);
            columns.Bound(o => o.Description).Width(150);
            columns.Command(commands =>
            {
                commands.Edit().ButtonType(GridButtonType.ImageAndText);

            }).Width(100);
            columns.Command(commands =>
            {
                commands.Delete().ButtonType(GridButtonType.ImageAndText);

            }).Width(100).HtmlAttributes(new { name = "delete" });
        })
        .CellAction(cell =>
        {
            if (cell.DataItem.AllowDelete == false)
            {
                if (cell.Column.HtmlAttributes["name"] == "delete")
                {
                    cell.HtmlAttributes["style"] = "visibility:hidden";
                }
            }
        })

[Doogle]

Hiding a button violates too many UX patterns, so I set about to disabling the links.
My solution was applied to the edit popup for a grid, but it should be easily used in other circumstances.

Our grid has the following settings:
.Editable(editing => editing.Mode(GridEditMode.PopUp))
.ClientEvents(clientEvents => {
    clientEvents.OnError("dates.grid_onError");
    clientEvents.OnDelete("dates.grid_onRowDelete");
    clientEvents.OnRowDataBound("dates.grid_onRowDataBound");
    clientEvents.OnEdit("dates.grid_onEdit");
})

The dates.grid_onEdit()  method includes the following code:
        // are we an insert or an update? Store that knowledge.
        var $insertUpdateLink = $('.t-edit-form .t-grid-insert, .t-edit-form .t-grid-update');
        originalLinkButtonClass = $insertUpdateLink.hasClass('t-grid-insert') == true ? 't-grid-insert' : 't-grid-update';

        // modify the insert/update "button" (really a link) so that we can disable the click event and still keep the styling
        // add our own class
        $insertUpdateLink.addClass('telerik-link-button');

        // can we enable the insert/update link?
        enableInsertUpdateLink();

-  The originalLinkButtonClass variable is scoped at the dates object level so that it can be referenced later on by the event handlers.
-  The addition of our own class 'telerik-link-button' allows us to do some of our own styling as explained below.

In the enableInsertUpdateLink() method, we have:
    var enableInsertUpdateLink = function () {
        var $insertUpdateButton = $('.t-edit-form .telerik-link-button');
        var aDayIsChecked = $('#toggleButtonGroup input[type=checkbox]').is(':checked');
        var aTimeHasAnError = timepickers.hasError();

        if (aDayIsChecked == true && aTimeHasAnError == false) {
            // all is well
            // remove the disabled class
            $insertUpdateButton.removeClass('disabled');
            // attach the telerik button-specific class
            $insertUpdateButton.addClass(originalLinkButtonClass);
        } else {
            // no go
            // add the disabled class
            $insertUpdateButton.addClass('disabled');
            // remove the telerik button-specific class
            $insertUpdateButton.removeClass(originalLinkButtonClass);
        }
    };

The important code is:
- the addition/removal of the disabled class (links css does not seem to respond to the :disabled pseudo-class) 
- the addition/removal of the original link button's class (t-grid-insert or t-grid-update).

Adding/removing the disabled class allows us to style the link like a disabled button.
.t-edit-form .telerik-link-button.disabled
{
    opacity: 0.4;
    cursor: default;
}

Removing the original link button's class defeats the link from firing it's ajax method to communicate with the server.
If all is well, we remove the disabled class and re-instate the original class. Now the button looks normal and the link does it's usual stuff.

Hope this helps!