Question

我试图在我的应用程序中使用Aurelia KendoUi Bridge。在我的代码中，我有一个返回新的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)

导出类GroupList {

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();
}

}

我知道kendo没有双向数据绑定，但是当我过滤数据并且数据源发生变化时，我试图找到一种刷新网格的方法。感谢。

Answer 1

我遇到了这个问题并通过创建新的dataSource并将其分配给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

您并不需要创建全新的数据源。要在更改基础数据后刷新网格，您只需替换dataSource中的数据元素，如下所示：

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

aurelia bridge kendo网格刷新

2 个答案: