[Solved] Hiding command buttons per row

[Mike]

Hello all,

I have a grid with a delete command column. I would like to have that button be present for some but not all rows, or at least disabled.

I think the way to go about this is to use a cell action to set up my conditional but it isn't obvious to me how best to disable the button or hide it. 
1. Is checking for cell.Column.Title == null the best way to determine that I am in the Command column?
2. I believe that setting HtmlAttributes on the cell impacts the TD item that wraps the button so I am not sure how that will help me. Am I missing something? It seems like it should be easy and it's just late and I'm tired.

Thanks!
                              

    .Columns(columns =>

    {

        columns.Bound(p => p.Name).Width(150).Title("Name");


        columns.Bound(p => p.Owner).Width(100).Title("Owner").ReadOnly();

        columns.Command(c =>

        {

            c.Delete().ButtonType(GridButtonType.Image); //can we disable these for non owner?

        }).Width(100);

     })

.CellAction( cell =>

    {   //null Title -> command column

        if (cell.Column.Title == null && !CurrentOwner.Equals(cell.DataItem.Owner))

        {
                //Do something to disable the button

        }

    }

    )

[Mike]

Ugh, so now I see that CellAction is not supported for Ajax bindings.

I was thinking that I could do cell.Template.Html = "" for the command button to clear it but I will have to set up server binding for that. Which might be easy, I forget.

I wonder if I could set up a binding to a data column that faked the delete button ? turn off encoding and just drop an appropriately styled <a><span/></a> element in there?

[Mike]

Fake delete button is a no go. I assume that the Command item in the fluent configurator does something magical and behind the scenes to hook up the action to the button, as the button renders but it does not function.

I've made it a server binding Grid so that I can use CellAction, and I'm setting visibility:hidden on the cells where I want the button disabled. Not a perfect solution but I think it will work for me.

Hopefully this thread of progress notes between me and myself will one day be useful for someone hitting the same problem.

[Tundey]

Hey Mike, I ran into this same problem. Except in my situation I had multiple custom commands in a cell and wanted to be able to selectively deactivate each command based on the row value. So here's what I did:

• I added this cell action

                .CellAction(cell =>
                {
                    if (cell.Column.Title == "Actions")
                    {
                        if ([this row should have the button disabled])
                        {
                            cell.HtmlAttributes.Add("class", "disableButton");
                        }
                    }
                })

• I added some jquery to find that row and deactivate the click event for the button. Like this:

        $('.disableButton a.t-grid-Edit').attr('class', 't-button t-grid-Edit disabledLink')

        $('.disabledLink').click(function (e) {
            e.preventDefault(); // this prevents the link from being clickable
        });

Hope this helps.

[Jeremy]

I had a custom "Void" button that I wanted to hide for certain rows. Here is the code I used:

.CellAction(cell => {

    //Command button col has no title, only hide Void button if a voideddate value exists in the DateVoided column
    if (cell.Column.Title == null && cell.DataItem.DateVoided.HasValue)


    {

        //Hides Void button rendering it uneditable
        cell.HtmlAttributes["style"] = "visibility:hidden";

    }

})