Question

I use Telerik Extensions for MVC. On one page I use a grid to display status messages. I want to show edit buttons for all status messages that have a positive status_id.

I have previously done this using a server bound grid and CellAction. However I am trying to change it into an Ajax bound grid, but I cannot figure out how to hide the buttons for specific rows then.

Is there, perhaps, a way to reference a specific cell from JavaScript, and hide it that way?

Thanks!

Answer 1

I realize this question was posted some time ago but I am hoping my answer will prove useful to others.

In your data model pass a field. In this case it is “RemoveDelete” and since it is used expressly to remove the Delete button based on a predetermined condition it is set to be hidden in the grid. If data displayed in your grid already contains the condition you want to examine then you don’t have to do this.

In the Grid…

.ClientEvents(events => events.OnRowDataBound("onRowDataBound"))
.Columns(columns => {
  columns.Bound(c => c.ColumnName).Attributes().Etc();
  columns.Bound(c => c.ColumnName).Attributes().Etc();
  columns.Command(commands => {
    commands.Edit().ButtonType(ButtonType);
    commands.Delete().ButtonType(ButtonType);
  });
  columns.Bound(c => c.RemoveDelete).Hidden(true);
})

the script…

<script type="text/javascript">
  function onRowDataBound(e) {
    if (e.dataItem.RemoveDelete > 0) {
      $(e.row).find('a.t-grid-delete').remove(); //remove Delete button
    }
  }
</script>

to remove the Edit button…

$(e.row).find('a.t-grid-edit').remove();

to hide the last column use

$(e.row).find('td.t-last a.t-grid-action').hide();

With all that being said, this allows you to predetermine what buttons you want displayed on a row by row basis.