[Solved] Show command button conditionally

[Datamex]

Hello,

I've added a custom command button to the grid as follows:

                 columns.Command(commands =>
                 {
                     columns.Bound(c => c.UserName)
                      .ClientTemplate("<a href=\"#\" onclick=\"javascript: LockAndRefresh('<#= UserName #>'); return false;\" class=\"t-button\">Unlock</a>")
                      .Title(String.Empty)
                      .Width(103);
                   commands.Delete().ButtonType(GridButtonType.ImageAndText);
                 }).Width(103);

Now I want to show this column only when the property 'IsLockedOut' on the item is true. So I need to do something like

.Hidden(IsLockedOut == false)

But I don't know how to get to the IsLockedOut property in that scope?

[Rosen]

Hello,

I suspect you want to hide the button in the cell, as you cannot hide the entire column base on a current record's value due to the fact that usually  this value is different for each record therefore it can be either visible or not. If this is the case you may hide the button with similar to the following code:

.ClientTemplate("<a href=\"#\" onclick=\"javascript: LockAndRefresh('<#= UserName #>'); return false;\" class=\"t-button <#= IsLockedOut? 'hidden' : '' #>\">Unlock</a>")

where hidden css class has following declaration:

.hidden
{
    display:none;
}

Regards,
Rosen
the Telerik team

[Datamex]

Sounds like a solution, but isn't there anything I can do to prevent it from rendering alltogether? Rendering it and then hiding seems a bit dirty.

[Rosen]

Hi,

You may expose a single property of the ViewModel which to determine if the columns should be visible or not.

All the best,
Rosen
the Telerik team

[Datamex]

That would hide the entire column, that's not what I want. I want to only prevent some of the buttons from rendering alltogether.

[Rosen]

Hi Datamex,

I'm afraid that this is not possible if you are using ajax binding.

All the best,
Rosen
the Telerik team

[Morgan]

One tip when trying the solution indicated here.  The styles for the 't-button' class will cascade and override your hidden class in some cases.  However, if you mark your style with the '!important' attribute as shown here, it will then work as intended.

.hidden
{
    display: none !important;
}

As for the solution being a little dirty... I'll paraphrase.. if it's dirty, and it works, it's not dirty ;)

Morgan