<div id="grid"></div>
<script>
  $("#grid").kendoGrid({
    columns: [
      { field: "id" },
      { field: "name" },
      { command: [
        {
          // for click to work when there is template, add class "k-grid-[command.name]" to some element, otherwise the click handler will not be triggered
          name: "settings",
          template: "#= data.id # text in the command column <a class='k-button k-grid-settings'><span class='k-icon k-i-settings'></span>Settings</a>",
          click(e){
            kendo.alert("how to")
          }
        }
      ]
      }
    ],
    dataSource: [{ id: 1, name: "Jane Doe", bib: 1 }, { id: 2, name: "Jane Doe 2", bib: 1 }]
  });
</script>
</body>
</html>

 var window = $('#kendo-window')
            
         	if(!window.data("kendoWindow")) {
            window.kendoWindow({})
          }
          
         window.data("kendoWindow").setOptions({
                 title: title,
           			 content: "../content/web/window/ajax/ajaxContent1.html",
           			 modal: true,
                 actions: ["maximize","close"],
                 position: {
                     top: "10",
                     left: "10"
                 },
                 width: width,
                 minHeight: 900,
               	 scrollable: true,
                 animation: {
                     open: {
                         effects: "fade:in",
                         duration: 500
                     },
                     close: {
                         effects: "fade:out",
                         duration: 500
                     }
                 }
             })
         
         window.data("kendoWindow").center().open()

  $.ajax({
            url: SendPrompt.fmt(encodedMessage, encodedUserName), 
            async: true,
            contentType: 'application/json',
            type: "POST",
            dataType: "json",
            processData: false,          
            headers: { Authorization: tokenData() },
            beforeSend: setHeader,
            success: function (data) { 
                    var answer = data.Answer.replace(/(?:\r\n|\r|\n)/g, '\n\n');                   
                chat.renderMessage({
                    type: "MyText",
                    text: answer 
                }, {
                    id: kendo.guid(),
                    name: gptName
                });
            }, error: function (jqXHR, textStatus, errorThrown) {
                console.log("Status:", textStatus);
            },
            complete: function () {
                messageTemplate.animate({ opacity: 0 }, 500, function () {
                    $(this).css({ display: 'none' });
                });
                chat.wrapper.find(".k-input").prop('disabled', false);
                chat.wrapper.find(".k-button-send").prop('disabled', false);
            }
        });

"dependencies": {
"@progress/kendo-ui": "^2021.3.1207",
"@types/node": "^12.20.15",
"@types/react": "^17.0.11",
"moment": "^2.29.4",
"react": "^17.0.2",
.
.
.
}

  "devDependencies": {
    "@types/jquery": "^3.5.5",
.
.
.
  }

      <input
        id={this.id}
        name={this.props.validationName}
        data-role="timepicker"
        data-bind={`value: ${ValueCodes.Start}`}
        data-format="h:mm tt"
        required={true}
        disabled={true}
      />

export class ValueCodes {
  public static readonly Start = 'sTRT_TIME';
.
.
.
}

protected getDataSourceOptions() {
    const fields: { [key: string]: { type: string } } = {};
    switch (this.categoryCode) {
      case 'INIT':
        fields[ValueCodes.Start] = { type: 'date' };
.
.
.
        break;
.
.
.
      default:
        break;
    }
    return {
      fields: fields,
      transportOptions: { baseUrl: `${X.getApiUrl()}value/${this.categoryCode}` }
    };
  }
}