●ボタンアイコン
<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 } },
},
},
},
});