Datatable: setting sortField for multiple sort

UI Components for Angular
Post Reply
kimbered
Posts: 13
Joined: 30 Nov 2016, 21:45

21 Feb 2017, 20:19

Hi,

I'm using primeng in Angular 2. I have p-dataTable. I would like the table to allow multiple column sorting, but also be able to set the preliminary default sort order.

When I try to do this I get the following error:
Cannot read property '0' of undefined

It works fine for a sortMode="single", but I need multiple.

My datatable is defined as:

Code: Select all

<p-dataTable
        id="searchResults"
        #resultsGrid
        [value]="transArray"
        expandableRows="true"
        data-payxautoid="transactions.grid"
        selectionMode="single"
        (onRowSelect)="handleRowSelect($event)"
        (onRowUnselect)="handleRowUnselect($event)"
        [(selection)]="selectedTransaction"
        [globalFilter]="gb"
        sortMode="multiple"
        sortField="effectiveDate"
        sortOrder="1"
        [rows]="10"
        [paginator]="true"
        [pageLinks]="10"
        [rowsPerPageOptions]="[10,20,30]"
        resizableColumns="true"
        columnResizeMode="expand"
        [paginatorPosition]="top"
        styleClass="ui-datatable-hor-scroll"
        [rowStyleClass]="lookupRowStyleClass"
        [totalRecords]="totalRecords"
    >

Thanks.

kimbered
Posts: 13
Joined: 30 Nov 2016, 21:45

21 Feb 2017, 22:16

Hi,

Still looking. I did find the sortMeta functionality but I'm having no luck getting this to work.

I modified the p-datable as:

Code: Select all

<p-dataTable
        id="searchResults"
        #resultsGrid
        [value]="transArray"
        expandableRows="true"
        data-payxautoid="transactions.grid"
        selectionMode="single"
        (onRowSelect)="handleRowSelect($event)"
        (onRowUnselect)="handleRowUnselect($event)"
        [(selection)]="selectedTransaction"
        [globalFilter]="gb"
       [multiSortMeta]="multiSortMeta"
        [paginator]="true"
        [pageLinks]="10"
        [rowsPerPageOptions]="[10,20,30]"
        resizableColumns="true"
        columnResizeMode="expand"
        [paginatorPosition]="top"
        styleClass="ui-datatable-hor-scroll"
        [rowStyleClass]="lookupRowStyleClass"
        [totalRecords]="totalRecords"
I defined:
multiSortMeta: SortMeta[];

Then in the ngOnInit I have:

Code: Select all

        this.multiSortMeta = [];
        this.multiSortMeta.push({field: 'effectiveDate', order: 1});
        this.multiSortMeta.push({field: 'branchNumber', order: 1});
        this.multiSortMeta.push({field: 'clientNumber', order: 1}); 
There is not sort occurring at all with this.

What am I missing?

Thanks.

cagatay.civici
Prime
Posts: 18616
Joined: 05 Jan 2009, 00:21
Location: Cybertron
Contact:

22 Feb 2017, 06:49

This should have worked, @darthmaul please take a look at it.

User avatar
DarthMaul
Posts: 582
Joined: 23 Nov 2015, 21:20

22 Feb 2017, 09:33

Hi,

I tried it locally and everything seems to be working. I did it like this;

Code: Select all

<p-dataTable [value]="cars2" sortMode="multiple" [multiSortMeta]="multiSortMeta">
    <p-column field="vin" header="Vin" [sortable]="true"></p-column>
    <p-column field="year" header="Year" [sortable]="true"></p-column>
    <p-column field="brand" header="Brand" [sortable]="true"></p-column>
    <p-column field="color" header="Color" [sortable]="true"></p-column>
</p-dataTable>

Code: Select all

ngOnInit() {
    this.multiSortMeta = [];
    this.multiSortMeta.push({field: 'vin', order: 1});
    this.multiSortMeta.push({field: 'year', order: 1});
}
http://pasteboard.co/BjEY5MS9C.png

Can you please share a full code of your datatable.

kimbered
Posts: 13
Joined: 30 Nov 2016, 21:45

22 Feb 2017, 16:45

Hi,

I'll take another look.
Another oddity is that even though I have rowsPerPageOptions set, I do not see the drop down.
Below is the code for the entire datatable.

Right now, I have the table set for single sort.
And I'm using priming 1.1.4. When I tried to update to 2.0.1 the custom styles I had implemented disappeared.

Thanks.

Kim

Code: Select all

    <p-dataTable
        id="searchResults"
        #resultsGrid
        [value]="transArray"
        expandableRows="true"
        data-payxautoid="transactions.grid"
        selectionMode="single"
        (onRowSelect)="handleRowSelect($event)"
        (onRowUnselect)="handleRowUnselect($event)"
        [(selection)]="selectedTransaction"
        [globalFilter]="gb"
        sortMode="single"
        sortField="effectiveDate"
        sortOrder="1"
        [rows]="10"
        [paginator]="true"
        [pageLinks]="10"
        [rowsPerPageOptions]="[10,20,30]"
        resizableColumns="true"
        columnResizeMode="expand"
        [paginatorPosition]="top"
        styleClass="ui-datatable-hor-scroll"
        [rowStyleClass]="lookupRowStyleClass"
        [totalRecords]="totalRecords"
    >
        <p-column expander="true" styleClass="col-icon" data-payxautoid="transGrid.expander"></p-column>
        <p-column #cellStatus data-field="status" header="Status" [sortable]="true" data-payxautoid="transGrid.status">
            <template let-col let-data="rowData" pTemplate="body">
                <div *ngIf="data.status === 'FurtherReview' || data.status === 'PendingApproval'">
                    <span style="color: red">{{data.status}}</span>
                </div>
                <div *ngIf="data.status != 'FurtherReview' && data.status != 'PendingApproval'">
                    <span>{{data.status}}</span>
                </div>
            </template>
        </p-column>
        <p-column data-field="branchNumber" header="Branch" [sortable]="true" data-payxautoid="transGrid.branchNumber"></p-column>
        <p-column data-field="clientNumber" header="Client Number" [sortable]="true" data-payxautoid="transGrid.clientNumber"></p-column>
        <p-column data-field="accountName" header="Client Name" [sortable]="true" data-payxautoid="transGrid.accountName"></p-column>
        <p-column data-field="productCode" header="Product Code" [sortable]="true" data-payxautoid="transGrid.productCode"></p-column>
        <p-column data-field="amount"  header="Amount" [sortable]="true" data-payxautoid="transGrid.amount">
            <template let-col let-data="rowData" pTemplate="body">
                {{data.amount | currency: 'USD' : true}}
            </template>
        </p-column>
        <p-column data-field="creditOrDebit" header="Credit/Debit" [sortable]="true" data-payxautoid="transGrid.creditOrDebit"></p-column>
        <p-column data-field="submittedDateFormatted" header="Submitted Date" [sortable]="true" data-payxautoid="transGrid.submittedDate"></p-column>
        <p-column data-field="effectiveDateFormatted" header="Effective Date" [sortable]="true" data-payxautoid="transGrid.effectiveDate"></p-column>
        <p-column data-field="sameDayAch" header="Same Day ACH" [sortable]="true" data-payxautoid="transGrid.sameDayAch" hidden="true"></p-column>
        <p-column data-field="facsFileName" header="File Name" [sortable]="true" data-payxautoid="transGrid.facsFileName" ></p-column>
        <p-column data-field="returned" header="Returned" [sortable]="true" data-payxautoid="transGrid.returned" hidden="true"></p-column>


        <template let-transaction pTemplate="rowexpansion">
            <div class="ui-grid ui-grid-responsive ui-fluid" style="font-size:14px; padding:5px; border-style: solid; border-width: 1px;">
                <div  class="ui-grid-row">
                    <div class="ui-grid-col-5" >
                        <div class="ui-grid ui-grid-responsive ui-grid-pad" >
                            <div class="ui-grid-row">
                                <div class="ui-grid-col-5 label" data-payxautoid="rowTemplate.submittedBy.label">Submitted By: </div>
                                <div class="ui-grid-col-1" data-payxautoid="rowTemplate.submittedBy.value">{{transaction.submittedBy}}</div>
                            </div>
                            <div class="ui-grid-row">
                                <div class="ui-grid-col-5 label" data-payxautoid="rowTemplate.federalId.label">Federal ID: </div>
                                <div class="ui-grid-col-1" data-payxautoid="rowTemplate.federalId.value">{{transaction.federalId}}</div>
                            </div>
                            <div class="ui-grid-row">
                                <div class="ui-grid-col-5 label" data-payxautoid="rowTemplate.bankRoutingNumber.label">Bank Routing Number: </div>
                                <div class="ui-grid-col-1" data-payxautoid="rowTemplate.bankRoutingNumber.value">{{transaction.routingNumber}}</div>
                            </div>
                            <div class="ui-grid-row">
                                <div class="ui-grid-col-5 label" data-payxautoid="rowTemplate.bankAccountNumber.label">Bank Account Number: </div>
                                <div class="ui-grid-col-1" data-payxautoid="rowTemplate.bankAccountNumber.value">{{transaction.accountNumber}}</div>
                            </div>
                        </div>
                    </div>

                    <div class="ui-grid-col-5" style="border-left-style: solid; border-left-width: 1px;">
                        <div class="ui-grid ui-grid-responsive ui-grid-pad">
                            <div class="ui-grid-row">
                                <div class="ui-grid-col-5 label" data-payxautoid="rowTemplate.source.label">Source: </div>
                                <div class="ui-grid-col-1" data-payxautoid="rowTemplate.source.value">FACS</div>
                            </div>
                            <div class="ui-grid-row">
                                <div class="ui-grid-col-5 label" data-payxautoid="rowTemplate.returnedDate.label">Returned Date: </div>
                                <div class="ui-grid-col-1" data-payxautoid="rowTemplate.returnedDate.value"></div>
                            </div>
                            <div class="ui-grid-row">
                                <div class="ui-grid-col-5 label" data-payxautoid="rowTemplate.returnedReasonCode.label">Returned Reason Code: </div>
                                <div class="ui-grid-col-1" data-payxautoid="rowTemplate.returnedReasonCode.value"></div>
                            </div>
                            <div class="ui-grid-row">
                                <div class="ui-grid-col-5 label" data-payxautoid="rowTemplate.returnedDescription.label">Returned Description: </div>
                                <div class="ui-grid-col-1" data-payxautoid="rowTemplate.returnedDescription.value"></div>
                            </div>
                        </div>
                    </div>
                    <div class="ui-grid-col-1">
                        <button type="submit" class="primary small" data-payxautoid="details.action" (click)="showTransactionDetails(transaction)">Details</button>
                    </div>
                </div>

                <hr style="color:black !important">

                <div class="ui-grid-col-5" >
                    <div class="ui-grid-row">
                            Validation Errors:
                        <br/>
                    </div>
                    <div class="ui-grid-row">
                        <p-dataTable id="validationErrors"
                                     [value]="transaction.validationErrors"
                                data-payxautoid="validationErrors.grid"
                        >
                            <p-column data-field="errorCode" header="Code" data-payxautoid="validationErrorsGrid.errorCode"></p-column>
                            <p-column data-field="errorDateFormatted" header="Date" data-payxautoid="validationErrorsGrid.errorDate"></p-column>
                            <p-column data-field="errorDescription" header="Description" data-payxautoid="validationErrorsGrid.errorDescription"></p-column>
                            <p-column data-field="errorName" header="Name" data-payxautoid="validationErrorsGrid.errorName">></p-column>
                            <p-column data-field="errorOverride" header="Override" data-payxautoid="validationErrorsGrid.errorOverride">></p-column>
                            <p-column data-field="errorType" header="Type" data-payxautoid="validationErrorsGrid.errorType">></p-column>
                        </p-dataTable>
                    </div>
                </div>
            </div>
        </template>
    </p-dataTable>

kimbered
Posts: 13
Joined: 30 Nov 2016, 21:45

23 Feb 2017, 23:00

just an update. After ripping out all of the materialize-css and angular2-materialize ... which doesn't play well with priming, the rowPerPages drop down is now appearing.

multiple sort is still not working.

Kim

kimbered
Posts: 13
Joined: 30 Nov 2016, 21:45

24 Feb 2017, 17:44

Hi,

Another update, I've upgraded to Primeng 2.0.1 and still cannot get multiple sort working.

Thanks.

Post Reply

Return to “PrimeNG”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 20 guests