Hide column button based on a condition

[Jamie]

I am currently evaluating the Grid to see that I can achieve everything I could when using the WebForms GridView/ListView.

In the model below I have 2 properties that determine if the Edit and Delete button should show on the player row in the grid.

Is it possible to prevent the buttons from rendering using the AllowEdit & AllowDelete properties?

Public Class Player
    Public Property PlayerId As Int32
    Public Property Forename As String
    Public Property Surname As String
    Public Property SportId As Int32
    Public Property AllowEdit As Boolean
    Public Property AllowDelete As Boolean
End Class

N.B. I am using Razor & VB.

[Daniel]

Hi Jamie,

This can be achieved by handling the OnRowDataBound client-side event and hiding the button with jQuery.
For example:

function onRowDataBound(e) {
    if (e.dataItem.AllowEdit) {
        $(e.row).find(".t-grid-edit").hide();
    }
}

All the best,
Daniel
the Telerik team

[Chris McNear]

Will this work if you are using Server side binding and editing?

I have the following view 

@model IEnumerable<MWestRazor.Models.Status_LU>
@{
    ViewBag.Title = "Status Options";
}
<h2>
    Status Options</h2>
@(Html.Telerik().Grid(Model)
            .Name("ContactGrid")
            .DataKeys(datakey => datakey.Add(stat => stat.StatusId))
            .ToolBar(commands => commands.Insert().ButtonType(GridButtonType.Image))
            .DataBinding(databinding =>
                         databinding.Server().Select("Status", "Admin")
                             .Insert("AddNewStatus", "Admin")
                             .Delete("DeleteStatus", "Admin")
                             .Update("UpdateStatus", "Admin"))
            .Columns(columns =>
                         {
                             //columns.Bound(column => column.StatusId).Title("ID").ReadOnly(true);
                             columns.Bound(column => column.StatusDescription).Title("Description");
                             columns.Command(commands =>
                                                 {
                                                     commands.Edit().ButtonType(GridButtonType.Image);
                                                     commands.Delete().ButtonType(GridButtonType.Image);
                                                 }).Title("Editing");

                         })
            .Editable(editing => editing.Mode(GridEditMode.InLine))
            .Sortable()
            .Pageable()
           .ClientEvents(events=> events.OnRowDataBound("OnRowBound")))

<script type="text/javascript">
    function OnRowBound(e) {
        if (e.dataItem.StatusId == 1) {
            $(e.row).find(".t-grid-delete").hide();
        }
    }
</script>
<h3>
    * Note: You will not be able to delete the first Status Option as this is the default
    option for all newly submitted stories.</h3>

When I run it and attempt to debug the script for OnRowBound it never gets in there.... do the events fire when using the server binding?

[Daniel]

Hello Chris,

No, the OnRowDataBound event is raised only when using Ajax or WebService binding. To hide the button when using Server bindding, I can suggest either to add a CSS class to the row in the RowAction method or use a Row template e.g.:

.RowAction(action =>
{
    if (action.DataItem.StatusId == 1)
    {
        action.HtmlAttributes["class"] = "nonEditable";
    }
})

//CSS
.nonEditable .t-grid-delete
{
    display:none;
}

Row template:

.RowTemplate(grid => @<text>
            //omitted for brevity

            @if (item.StatusId != 1)
            {
                @grid.DeleteButton(item)
            }
   </text>
)

Kind regards,
Daniel
the Telerik team