Мост аурелия кендо сетка обновление

kendo-grid aurelia

474 просмотра

2 ответа

295 Репутация автора

Я пытаюсь использовать 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;
            }
        }
    };
}

}

И это моя модель представления:

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

}

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

Автор: Alex Источник Размещён: 19.07.2016 06:49

Ответы (2)


2 плюса

333 Репутация автора

Решение

У меня была эта проблема, и я нашел решение, создав новый источник данных и назначив его 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>

А вот код, который обновляет источник данных

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

}
Автор: Alastair Размещён: 06.02.2017 03:58

0 плюса

11 Репутация автора

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

this.clientgrid.dataSource.data(this.datasource.data);
Автор: Arman-M Размещён: 05.11.2017 11:10
Вопросы из категории :
32x32