<script>
  $("#grid").kendoGrid({
    columns: [
      { field: "name" },
      {
        template: function(dataItem) {
            const isActive = dataItem.isActive;
            return '<a title=' + (isActive ? "Hide": "Show") + ' class="k-grid-hideRow k-button"><span class="k-icon k-i-' + (isActive ? 'lock' : 'unlock') + '"></span></a>'
        }
      },
      {
        title: "Action", command: [
            {
                name: 'startEdit',
                template: function(dataItem) {
                    const isActive = dataItem.isActive;
                    return '<a title=' + (isActive ? "Hide": "Show") + ' class="k-grid-hideRow k-button"><span class="k-icon k-i-' + (isActive ? 'lock' : 'unlock') + '"></span></a>'
                }
            }
        ]
      }
    ],


    dataBound: function(e) {
      e.sender.tbody.find(".k-grid-hideRow").click(function(evt) {
        const row = $(evt.target).closest("tr")
        const dataItem = e.sender.dataItem(row)
        dataItem.set("isActive", !dataItem.isActive)
        console.log(dataItem);
      })
    },

    dataSource: [{ name: "Jane Doe", isActive: false }, { name: "Jane Doe", isActive: true }]
  });
</script>