Hide Edit and Delete Buttons conditionally

[JP13]

I have a grid that has an edit and a delete button.  I want to hide those buttons conditionally based on a specific value within the row.  How can I accomplish this?  For reference here is the current Grid create.

 

01.@(Html.Kendo()
02.      .Grid<CdEyeColor>()
03.      .Name("Codes")
04.      .DataSource(ds =>
05.      {
06.        ds.Ajax()
07.        .ServerOperation(true)
08.        .Model(m =>
09.        {
10.          m.Id(code => code.EyeColorId);
11.        })
12.        .Create(create => create.Action("CreateCode", "CdEyeColor"))
13.        .Read(read => read.Action("ReadCode", "CdEyeColor"))
14.        .Update(update => update.Action("EditCode", "CdEyeColor"))
15.        .Destroy(destroy => destroy.Action("DeleteCode", "CdEyeColor"));
16.      })
17.      .Columns(columns =>
18.      {
19.        columns.Bound(c => c.EyeColorTitle).Width(100);
20.        columns.Bound(c => c.EyeColorDescription).Width(200);
21.        columns.Bound(c => c.BeginDate).Width(100);
22.        columns.Bound(c => c.EndDate).Width(100);
23.        columns.Bound(c => c.changedByName).Width(150);
24.        columns.Bound(c => c.ChangedTimestamp).Width(200);
25.        columns.Bound(c => c.createdByName).Width(150);
26.        columns.Bound(c => c.CreatedTimestamp).Width(100);
27.        columns.Command(command =>
28.        {
29.          command.Edit().UpdateText("Update");
30.          command.Destroy();
31.        });
32.      })
33.      .ToolBar(toolbar => toolbar.Create())
34.      .HtmlAttributes(new { style = "height: 380px;" })
35.      .Scrollable()
36.      .Groupable()
37.      .Events(x => { x.Edit("onEdit"); x.Save("onGridSave"); })
38.      .Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("EditorTemplateEyeColor").Window(window => { window.Title("Eye Color"); }))
39.      .Sortable()
40.      .Pageable(pageable => pageable
41.      .Refresh(true)
42.      .PageSizes(true)
43.      .ButtonCount(5))
44.)

[Alex Hajigeorgieva]

Hi, Jed,

The Kendo UI Grid for ASP.NET Core command columns have a Visible() JavaScript handler that can be used to conditionally hide the edit and destroy buttons as follows:

columns.Command(command => {
  command.Edit().Visible("setVisible");
  command.Destroy().Visible("setVisible");
});

<script>
  function setVisible(dataItem){
   // return true or false dependent on the dataItem field value
    return dataItem.Discontinued;
 }
</script>

ASP.NET Core Grid API https://docs.telerik.com/aspnet-core/api/grid
jQuery API: https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/configuration/columns.command#columnscommandvisible



Let me know in case you have further questions.

Kind Regards,
Alex Hajigeorgieva
Progress Telerik

[JP13]

This worked, thanks!

[Joel]

This doesn't work for me.  Why?

@(Html.Kendo().Grid<Customer>()
      .Name("grid")
      .Columns(columns =>
      {
          columns.Command(command => command
              .Custom("Detail")
              .Click("goDetail"))
              .Width(Glossary.ButtonWidth)
              .Visible("setDetailsVisible");
          columns.Bound(p => p.Name)
              .Filterable(ftb => ftb.Cell(cell => cell.Operator("contains")
                  .ShowOperators(false)
                  .SuggestionOperator(FilterType.Contains)));
          columns.Bound(p => p.DatabaseName).Title("Database Name")
              .Filterable(ftb => ftb.Cell(cell => cell.Operator("contains")
                  .ShowOperators(false)
                  .SuggestionOperator(FilterType.Contains)));
          columns.Bound(p => p.DatabaseStatusName).Title("Database Status")
              .Filterable(ftb => ftb.Cell(cell => cell.Operator("contains")
                  .ShowOperators(false)
                  .SuggestionOperator(FilterType.Contains)));
          columns.Bound(p => p.AddTimestamp).Format("{0:MM/dd/yyyy}");
      })
      .Pageable()
      .Sortable()
      .Scrollable()
      .Selectable()
      .Navigatable()
      .Filterable(ftb => ftb.Mode(GridFilterMode.Row))
      .HtmlAttributes(new { style = "height:550px;" })
      .DataSource(dataSource => dataSource
          .Ajax()
          .PageSize(20)
          .Read(read => read.Action("IndexJson", "Customers"))
      )
)

 

with Script:

function setDetailsVisible(dataItem) {
    return true;
}

 

I get this error... like the grid can't evaluate the script correctly:

Severity    Code    Description Project Path    File    Line    Suppression State
Error   CS1503  Argument 1: cannot convert from 'string' to 'bool'  Gsi.Portal  C:\GSI Deploy\Gsi.Portal\Views\Customers    C:\GSI Deploy\Gsi.Portal\Views\Customers\Index.cshtml   46  Active

 

Thanks,

Joel

[Joel]

Never mind.  I had .Visible connected to the column instead of to the command.  This now works:

columns.Command(command => command
    .Custom("Detail")
    .Click("goDetail")
    .Visible("setDetailsVisible"))
    .Width(Glossary.ButtonWidth);