kendo ui コントロール操作

●ボタンアイコン

<button id="btnSearch"
        data-role="button"
        data-icon="search"/** plus,edit,delete**/
        class="k-primary">
    Search
</button>

●ボタン検索

<input id="txtSearchID" class="k-textbox" type="text" data-bind="value: searchID" />
<input id="txtSearchName" class="k-textbox" type="text" data-bind="value: searchName" />
<button class="btn blue-gradient btn-rounded waves-effect"
        data-bind="click: onSearch">
    <i class="fa fa-search mr-1"></i>
    Search
</button>
*** ts:
private _searchID = UE.String.empty;
public get searchID(): string {
    return this.get("_searchID");
}
public set searchID(value: string) {
    if (this._searchID === value) {
        return;
    }
    this.set("_searchID", value);
}
private _searchName = UE.String.empty;
public get searchName(): string {
    return this.get("_searchName");
}
public set searchName(value: string) {
    if (this._searchName === value) {
        return;
    }
    this.set("_searchName", value);
}

public onSearch(): void {
    const varId = this.searchID;
    const varName = this.searchName;
    $("#grid").data("kendoGrid").dataSource.filter([
        { field: "ProductID", operator: "contains", value: varId },
        { field: "ProductName", operator: "contains", value: varName },
    ]);
}

●pop modal window

<!--POP Window HTML-->
<div id="window"
         data-role="window"
         data-title="my title"
         data-actions="['Close']"
         data-visible="false"
         data-width="600px"
         data-center="true"
         data-modal="true">
         ....
<div>
         
<a class="btn-floating btn-sm blue-gradient waves-effect"
   data-bind="click: onOpenPopup">
    <i class="fa fa-list"></i>
</a>
**ts:
public onOpenPopup(): void {
    $("#window").data("kendoWindow").center().open();
}

●grid onChange

<div id="gridDetail"
data-role="grid"
data-bind="source: testDataSource, events: { change: onChange }"
data-columns="[
                   { 'field': 'ProductID', title: 'title 1' },
                   { 'field': 'ProductName', title: 'title 2' },
               ]"
data-selectable="row"
data-pageable="true">
**ts:
public onChange(e: kendo.ui.GridChangeEvent): void {
    alert(e.sender.dataItem(e.sender.select()));
}


public readonly testDataSource = new kendo.data.DataSource({
    transport: {
        read: {
            url: "https://demos.telerik.com/kendo-ui/service/Products",
            dataType: "jsonp",
        },
        update: {
            url: "https://demos.telerik.com/kendo-ui/service/Products/Update",
            dataType: "jsonp",
        },
        destroy: {
            url: "https://demos.telerik.com/kendo-ui/service/Products/Destroy",
            dataType: "jsonp",
        },
        create: {
            url: "https://demos.telerik.com/kendo-ui/service/Products/Create",
            dataType: "jsonp",
        },
        parameterMap: (options, operation) => {
            if (operation !== "read" && options.models) {
                return { models: kendo.stringify(options.models) };
            }
        },
    },
    batch: true,
    pageSize: 10,
    schema: {
        model: {
            id: "ProductID",
            fields: {
                ProductID: { type: "string", editable: false, nullable: true },
                ProductName: { validation: { required: true } },
                UnitsInStock: { validation: { required: true } },
            },
        },
    },
});