aurelia bridge kendo grid refresh

Question

Я пытаюсь использовать мост Aurelia KendoUi в своем приложении. В моем коде у меня есть сервис, который возвращает новый KendoDataSource:

export class KendoDataSource { 

ToKendoDataSource(data: any, recordCount: number, pageSize: number, currentPage: number): any { 
    return { 
     transport: { 
      read: (p) => { 
       p.success({ data: data, recordCount: recordCount }); 
      } 
     }, 
     pageSize: pageSize, 
     serverPaging: true, 
     serverFiltering: true, 
     serverSorting: true, 
     schema: { 
      data: (result) => { 
       console.log('Transforming data to kendo datasource.'); 
       return result.data; 
      }, 
      total: (result) => { 
       return result.recordCount; 
      } 
     } 
    }; 
} 

}

И это мой ViewModel:

@inject(HttpService, KendoDataSource, EventAggregator) 

экспорт класс списке групп {

grid: any; 
gridVM: any; 
datasource: any; 
pageable: any; 
subscriber: any; 
paginationDetailsRequest: PaginationDetailsRequest; 
test: string; 

constructor(private httpService: HttpService, private kendoDataSource: KendoDataSource, private eventAggregator: EventAggregator) { 
    this.httpService = httpService; 
    this.kendoDataSource = kendoDataSource; 
    this.eventAggregator = eventAggregator; 

    this.paginationDetailsRequest = new PaginationDetailsRequest(4, 1); 
    this.GetGroups(this.paginationDetailsRequest); 

    this.datasource = { 
     transport: { 
      read: { 
       url: 'PersonGroup/GetGroups', 
       type: 'POST', 
       contentType: "application/json; charset=utf-8", 
       dataType: 'json' 
      }, 
      parameterMap: function (data, type) { 
       if (type == "read") { 
        let paginationDetails = new PaginationDetailsRequest(data.pageSize, data.page); 

        if(data.sort && data.sort.length > 0){ 
         paginationDetails.orderBy = data.sort[0].field; 
         paginationDetails.OrderDesc = (data.sort[0].dir == 'desc'); 
        } 

        console.log(this.datasource); 

        return JSON.stringify(paginationDetails); 
       } 
      } 
     }, 
     schema: { 
      data: "data.currentPageData", 
      total: "data.totalCount" 
     }, 
     pageSize: 2, 
     serverPaging: true, 
     serverFiltering: true, 
     serverSorting: true 
    }; 
}; 

attached() { 
    this.subscriber = this.eventAggregator.subscribe('Search', response => { 
     this.search(response); 
    }); 
} 

activate() { 


    this.pageable = { 
     refresh: true, 
     pageSizes: true, 
     buttonCount: 10 
    }; 
} 

GetGroups(paginationDetails: PaginationDetailsRequest): void { 

    this.httpService.post('PersonGroup/GetGroups', paginationDetails) 
     .then(response => response.json()) 
     .then(groups => { 
      console.log(groups); 
      if (groups.succeeded) { 
       this.datasource = this.kendoDataSource.ToKendoDataSource(groups.data.currentPageData, groups.totalCount, groups.pageSize, groups.currentPage); 
       this.grid.setDataSource(this.datasource); // initialize the grid 
      } 
      else { 
       //TODO: Show error messages on screen 
       console.log(groups.errors); 
      } 
     }) 
     .catch(error => { 
      //TODO: Show error message on screen. 
      console.log(error); 
     }); 
} 

search(searchDetails: Filter) { 
    console.log(searchDetails); 
    this.paginationDetailsRequest.filters.push(searchDetails); 
    console.log(this.paginationDetailsRequest); 
    this.GetGroups(this.paginationDetailsRequest); 
} 

detached() { 
    this.subscriber.dispose(); 
} 

}

Я понимаю, что кендо не имеет двусторонней привязки данных, но я пытаюсь найти способ обновить сетку, когда я фильтрую данные, а источник данных изменился. Спасибо.

Answer 1

У меня была эта проблема, и я нашел решение, создав новый источник данных и присвоив его setDataSource, следующим образом ... Примечание. getClients() - это поиск, который активируется нажатием кнопки. Вот сетка:

<ak-grid k-data-source.bind="datasource" 
     k-pageable.bind="{ input: true, numeric: false}" 
     k-filterable.bind="true" 
     k-sortable.bind="true" 
     k-scrollable.bind="true" 
     k-widget.bind="clientgrid" 
     k-selectable.bind="true"> 
    <ak-col k-title="First Name" k-field="firstName" k-width="120px"></ak-col> 
    <ak-col k-title="Last Name" k-field="lastName" k-width="120px"></ak-col> 
    <ak-col k-title="Email Address" k-field="primaryEmail" k-width="230px"></ak-col> 

</ak-grid> 

А вот код, который обновляет DATASOURCE

public getClients() 
{ 
    console.log("ClientService.getClients"); 
    this.clientService.getClients() 
     .then(result => 
     { 
      this.clientList = result; 

      // the new datasource in the next line is displayed 
      // after the call to setDataSource(ds) below. 
      let ds: kendo.data.DataSource = new kendo.data.DataSource({ 
       data: this.clientList, 
       schema: { 
        model: { 
         id: "id", 
         fields: { 
          firstName: { type: 'string' }, 
          id: { type: 'number' }, 
          lastName: { type: 'string' }, 
          primaryEmail: { type: 'string' } 
         } 
        } 
       }, 
       pageSize: 10 
      });  

      this.clientgrid.setDataSource(ds); 
      this.clientgrid.refresh(); 
     }) 
     .catch(err => console.log("Error returned from getClients " + err)); 

} 

Answer 2

Вам не нужно, чтобы создать новый источник данных. Чтобы обновить сетку после изменения базовых данных, вы можете просто заменить элемент данных в источнике данных следующим образом:

this.clientgrid.dataSource.data(this.datasource.data);