У меня есть вид сетки kendo ui, и в виде сетки есть 3 вкладки: Активная, Неполная и Неактивная. Существует функция поиска, связанная с видом сетки.
Проблема, с которой я сталкиваюсь в настоящее время, заключается в том, что в активной и неактивной таблице при вводе ключевого слова для поиска результаты не фильтруются. Но на неполной вкладке при вводе ключевого слова для поиска в поле поиска результаты фильтруются.
Код, который я прикрепил, использует AngularJS (v1.0) с Typescript.
Когда я отлаживаю код javascript и выполняю поиск на неполной вкладке, я вижу, что мой код javascript срабатывает. Но этого не происходит с активной и неактивной вкладкой.
Вот код внешнего вида сетки.
<div class="admin-action__sub-content">
<div class="form-group">
<div class="row">
<div class="col-md-9">
<div class="pull-left button-new-item">
<button class="btn btn-primary btn-compact"
type="button"
ui-sref="draft">
<i class="icons__plus"></i>
</button>
<div class="button-label button-label--reverse">Add new asset configuration</div>
</div>
</div>
<div class="col-md-3 form-group">
<div class="row">
<label for="SearchQuery" class="control-label col-xs-3">Search</label>
<div class="col-xs-9">
<input name="SearchQuery" class="form-control" ng-model="$ctrl.searchQuery" ng-model-options="{debounce:250}" />
</div>
</div>
</div>
</div>
<md-tabs md-dynamic-height="true">
<md-tab>
<md-tab-title ng-click="$ctrl.setActiveTab('active')">
Active
</md-tab-title>
<md-tab-body>
<div kendo-grid="$ctrl.activeAssetsGrid" k-options="$ctrl.savedAssetOptions(true)">
</div>
</md-tab-body>
</md-tab>
<md-tab>
<md-tab-title ng-click="$ctrl.setActiveTab('incomplete')">
Incomplete
</md-tab-title>
<md-tab-body>
<div kendo-grid="$ctrl.incompleteAssetsGrid" k-options="$ctrl.incompleteResourceOptions">
</div>
</md-tab-body>
</md-tab>
<md-tab>
<md-tab-title ng-click="$ctrl.setActiveTab('inactive')">
Inactive
</md-tab-title>
<md-tab-body>
<div kendo-grid="$ctrl.inactiveAssetsGrid" k-options="$ctrl.savedAssetOptions(false)">
</div>
</md-tab-body>
</md-tab>
</md-tabs>
</div>
</div>
Вот код машинописи:
export class AssetConfigurationGridController {
private _searchQuery: string;
private activeAssetsGrid: kendo.ui.Grid;
private inactiveAssetsGrid: kendo.ui.Grid;
private incompleteAssetsGrid: kendo.ui.Grid;
private activeTab: string = 'active';
static $inject = ['$http', '$state', 'jsonBlobsService'];
constructor(private http: ng.IHttpService, private state: ng.ui.IStateService, private jsonBlobsService: JsonBlobsService) {
}
get searchQuery(): string {
return this._searchQuery;
}
set searchQuery(value: string) {
this._searchQuery = value;
if (this.activeTab === 'active') {
if (this.activeAssetsGrid) {
this.activeAssetsGrid.dataSource.fetch();
}
} else if (this.activeTab === 'inactive') {
if (this.inactiveAssetsGrid) {
this.inactiveAssetsGrid.dataSource.fetch();
}
} else if (this.activeTab === 'incomplete') {
if (this.incompleteAssetsGrid) {
this.incompleteAssetsGrid.dataSource.fetch();
}
}
}
setActiveTab(value: string) {
this.activeTab = value;
this.searchQuery = "";
}
private baseGridOptions: kendo.ui.GridOptions = {
pageable: true,
sortable: true,
groupable: false,
selectable: false,
dataSource: {
}
};
savedAssetOptions(active: boolean): kendo.ui.GridOptions {
let options: kendo.ui.GridOptions = {
dataSource: {
pageSize: 10,
transport: {
read: (opts: kendo.data.DataSourceTransportReadOptions) => {
if (this.searchQuery) {
if (active) {
opts.data.filter = {
logic: "and",
filters: [
{ field: 'active', operator: 'eq', value: active },
{ field: 'assetTypeActive', operator: 'eq', value: active },
{ field: 'assetSubTypeActive', operator: 'eq', value: active },
{ field: 'searchText', operator: 'contains', value: this.searchQuery }
]
};
} else {
opts.data.filter = {
logic: "and",
filters: [
{ field: 'searchText', operator: 'contains', value: this.searchQuery },
{
logic: "or",
filters: [
{ field: 'active', operator: 'eq', value: active },
{ field: 'assetTypeActive', operator: 'eq', value: active },
{ field: 'assetSubTypeActive', operator: 'eq', value: active }
]
}
]
}
}
} else {
opts.data.filter = {
logic: active ? "and" : "or",
filters: [
{ field: 'active', operator: 'eq', value: active },
{ field: 'assetTypeActive', operator: 'eq', value: active },
{ field: 'assetSubTypeActive', operator: 'eq', value: active }]
};
}
if (opts.data.sort == null) {
opts.data.sort = [];
}
if (opts.data.sort != null && opts.data.sort.length !== 1) {
opts.data.sort = [
{ field: 'assetTypeName', dir: 'asc' },
{ field: 'assetSubTypeName', dir: 'asc' },
{ field: 'assetClassificationName', dir: 'asc' }
];
}
this.http.get("/api/AssetConfiguration").then((response) => opts.success(response.data));
}
}
},
pageable: {
pageSizes: true
},
columns: [
{ field: 'assetTypeName', title: 'Asset Type', template: '<span ng-click="$ctrl.edit(#: assetClassificationId#);">#: assetTypeName #</span>' },
{ field: 'assetSubTypeName', title: 'Asset Sub Type' },
{ field: 'assetClassificationName', title: 'Asset Classification', template: '<span ng-if="#: classificationHiddenFromUser #">n/a</span><span ng-if="!#: classificationHiddenFromUser #">#: assetClassificationName #</span>' },
{ field: 'assetClassificationId', title: 'Edit', template: '<a class="k-button k-button-icontext k-grid-edit" ng-click="$ctrl.edit(#: assetClassificationId#);"><span class="k-icon k-edit"></span>Edit</a>', width: "100px" }
]
};
return angular.merge(options, this.baseGridOptions);
}
get incompleteResourceOptions(): kendo.ui.GridOptions {
let self = this;
let options: kendo.ui.GridOptions = {
dataSource: {
pageSize: 10,
serverFiltering: true,
transport: {
read(opts: kendo.data.DataSourceTransportReadOptions) {
if (opts.data.sort == null) {
opts.data.sort = [];
}
if (opts.data.sort != null && opts.data.sort.length !== 1) {
opts.data.sort = [
{ field: 'resource.assetType.name', dir: 'asc' },
{ field: 'resource.assetSubType.name', dir: 'asc' },
{ field: 'resource.assetClassification.name', dir: 'asc' }
];
}
self.jsonBlobsService.list(JsonBlobTypeEnum.AssetConfiguration).then(response => {
let resources: any;
if (self.searchQuery) {
resources = response.data.value.filter((blob) => (JSON.parse(blob.jsonData).assetType.name.toLowerCase().indexOf(self.searchQuery.toLowerCase()) > -1 || JSON.parse(blob.jsonData).assetSubType.name.toLowerCase().indexOf(self.searchQuery.toLowerCase()) > -1) == true)
.map(blob => {
return {
id: blob.id,
resource: JSON.parse(blob.jsonData)
}
});
} else {
resources = response.data.value.map(blob => {
return {
id: blob.id,
resource: JSON.parse(blob.jsonData)
};
});
}
opts.success(resources);
});
}
}
},
columns: [
{ field: 'resource.assetType.name', title: 'Asset Type', template: '<span ng-click="$ctrl.draft(#: id#);">#: resource.assetType.name #</span>' },
{ field: 'resource.assetSubType.name', title: 'Asset Sub Type' },
{ field: 'resource.assetClassification.name', title: 'Asset Classification', template: '<span ng-if="#: resource.assetClassification.hiddenFromUser #">n/a</span><span ng-if="!#: resource.assetClassification.hiddenFromUser #">#: resource.assetClassification.name #</span>' },
{ field: 'id', title: 'Edit', template: '<a class="k-button k-button-icontext k-grid-edit" ng-click="$ctrl.draft(#: id#);"><span class="k-icon k-edit"></span>Edit</a>', width: "100px" }
]
}
return angular.merge(options, this.baseGridOptions);
}
edit(id: number) {
this.state.go('edit', {id: id});
}
draft(id: number) {
this.state.go('draft', { id: id });
}
}
Ожидаемым результатом будет то, что когда пользователь вводит ключевое слово в строке поиска, результаты в сетке кендо должны фильтроваться в активной и неактивной вкладке.