CODEWITHSUNDEEP
telerik-gridtelerik-mvc
Axel Burström
Axel Burström

Reputation: 33

How do I hide Edit button on a Ajax bound Telerik Grid for MVC?

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!

Upvotes: 1

Views: 5307

Answers (4)

Marc L.
Marc L.

Reputation: 3399

@AZee's currently accepted answer is good, but will no longer work since Telerik transitioned from "MVC extensions" to KendoUI wrappers. See Telerik Grid Migration page. Near the bottom are instructions for using the DataBound grid event in place of the onRowDataBound event. Note also that the view() in the former link isn't available, so you'll need to use _data. Finally, the class-prefixes were changed from t- to k-.

The impact of these changes: to set up the event handler:

@(Html.Kendo().Grid<type>()
    .Name("grid")
    .Events(e => e.DataBound("onDataBound"))
    ...

And the event handler itself:

function onDataBound() {
    var data = this._data;

    for (var i = 0; i < data.length; i++) {
        // the relevant row-data
        var dataItem = data[i]; 
        // selector for the table-row in the DOM
        var $tr = $("#grid").find("[data-uid='" + dataItem.uid + "']");

        if (<dataItem not deleteable>) $tr.find("a.k-grid-delete").remove();
        if (<dataItem not editable>) $tr.find("a.k-grid-edit").remove();
    }
}

Upvotes: 2

AZee
AZee

Reputation: 205

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.

Upvotes: 7

Guillermo Ortiz
Guillermo Ortiz

Reputation: 11

In my case I used a different jQuery function to hide the Edit button and looks like that.

Create a style:

.hide
 {
   display:none !important;
 }

In the onRowDataBound javascript function:

if (e.dataItem.SomeValueA!= 4 || e.dataItem.SomeValueB != 16) {
   $(e.row).find('a.t-grid-edit').removeClass("t-button"); 
   $(e.row).find('a.t-grid-edit').addClass("hide");
}

Hope, this help.

Upvotes: 1

Axel Burstr&#246;m
Axel Burstr&#246;m

Reputation: 33

I managed solve it in a somewhat hacky way:

I added a function for the "OnRowBound"-event, that set the innerText of the cell containing the Edit button to nothing.

Adding the function to the event:

.ClientEvents(events => events.OnRowDataBound("hideEdit"))

The function:

function hideEdit(e) {

    if (e.dataItem["status_id"] < 0) {
        e.row.cells[5].innerText = "";
    }
}

Upvotes: 2

Related Questions