Wijmo flexgrid sort column data

Posted by: hima.brahmbhatt on 21 August 2018, 3:41 am EST

  • Posted 21 August 2018, 3:41 am EST

    Hello,

    I have below column structure in Flexgrid.

    <wj-flex-grid control="flexGrid"
    style="height:300px; border-bottom: 1px solid #d9d9d9"
    class="bento-flex-grid validate"
    items-source="assignments"
    selection-mode="Cell"
    headers-visibility="Column"
    allow-sorting="true"
    allow-delete="true"
    is-read-only="false"
    key-action-tab="Cycle"
    item-formatter="itemFormatter"
    validate-edits="false"
    initialized="initialized(s)"
    show-errors="true"
    allow-dragging="None"
    selection-changed="selectionChanged(s,e)"
    cell-edit-ended="cellEditEnded(s,e)">
    <!-- BEGIN: NEW BENTO SELECTOR -->
    <wj-flex-grid-column header="" width="40" min-width="40" binding="selected" allow-sorting="false" allow-dragging="false" allow-resizing="false" is-read-only="true" css-class="col-select" align="center">
    <wj-flex-grid-cell-template cell-type="ColumnHeader">
    <div class="col-select">
    <i class="bento-flex-grid-checkbox"
    ng-click="onHeaderCheckBoxChange()"
    ng-model="headerCheckBoxMode"
    data-qe-id="bmad.header.checkbox"
    ng-class="{'bento-icon-checkmark': headerCheckBoxMode}">
    </i>
    </div>
    </wj-flex-grid-cell-template>
    <wj-flex-grid-cell-template cell-type="Cell">
    <i class="bento-flex-grid-checkbox"
    ng-click="onCheckBoxChange($item)"
    ng-model="$item.selected"
    data-qe-id="bmad.checkbox - {{$item.sequenceNumber}}"
    ng-class="{'bento-icon-checkmark':$item.selected}">
    </i>
    </wj-flex-grid-cell-template>
    </wj-flex-grid-column>
    <wj-flex-grid-column header="{{'bmad.OpeningBalance.Assignments.Account' | translate }}"
    binding="selectedAccount"
    data-type="Object"
    width="*">
    <wj-flex-grid-cell-template cell-type="Cell">
    <div class="truncate-text-flex" data-qe-id="bmad.account.tooltip - {{$item.sequenceNumber}}">
    <small ng-style="$item.selectedAccount.accountNumber == null && {'color' : 'rgb(175, 175, 175)'}" data-qe-id="bmad.accountLabel - {{$item.sequenceNumber}}">{{($item.selectedAccount.accountNumber != null)? $item.selectedAccount.accountNumber + ' - ' + $item.selectedAccount.description : 'Start typing or choose from drop down list' }}</small>
    </div>
    </wj-flex-grid-cell-template>
    <wj-flex-grid-cell-template cell-type="CellEdit">
    <div bento-combobox
    data-qe-id="bmad.accountinput - {{$item.sequenceNumber}}"
    columns-width="auto"
    placeholder="{{'bmad.OpeningBalance.Assignments.PlaceHolder' | translate}}"
    get-data="getData()"
    headers="comboboxData.headers"
    label-name="label"
    searchable="true"
    ng-model="$value"
    bento-append-to-parent="true"
    defer-load="true" bento-flex-grid-control>
    </div>
    </wj-flex-grid-cell-template>
    </wj-flex-grid-column>
    </wj-flex-grid>


    In this I want to sort on column "selectedAccount". I am trying below code in js but that is not working.

    $scope.assignments.sortDescriptions.push(new wijmo.collections.SortDescription("selectedAccount", "true"));


    Thanks
  • Replied 22 August 2018, 1:08 am EST

    Hi,

    We are indeed sorry but we are unable to replicate the issue at our end.

    Our implementation steps include creating a grid, binding it to an instance of CollectionView then pushing SortDescription into CollectionView's sortDescriptions.

    We used the following fiddle for replicating the issue, please have a look at it and let us know if we are missing something to replicate the issue:-

    http://jsfiddle.net/0k9y5mLz/

    ~Sharad
  • Replied 22 August 2018, 1:44 am EST

    Hello,

    I have updated the fiddle code and changed binding of a 'country' to object. After that sorting stopped working. How can we sort on object?

    Updated fiddle:-

    http://jsfiddle.net/0k9y5mLz/16/

    Thanks
  • Replied 23 August 2018, 1:35 am EST

    Hi,
    For default sorting to work properly, the binding should point to a value type. So you may define binding as 'country.name' for sorting to work properly.
    Another alternative would be to use sortConverter property of collectionView which allows you to modify the values for sorting.
    Please refer to the following document for more info on sortConverter:-
    https://demos.wijmo.com/5/Angular/WijmoHelp/WijmoHelp/topic/wijmo.collections.CollectionView.Class.html#sortConverter

    You may also refer to the following updated fiddle:-
    http://jsfiddle.net/25yp16qL/2/

    ~Sharad
  • Replied 23 August 2018, 3:53 am EST

    Hi,

    Thanks for your time. I tried with sortMemberPath property on column like below and it worked for me.

    sort-member-path="country.name"


    As in my case changing the binding of column to string was causing issue at some place.


    Here is updated fiddle:-

    http://jsfiddle.net/25yp16qL/4/

    Thanks
  • Replied 24 August 2018, 12:56 am EST

    Hi,

    We are glad to hear that you able to solve your problem.
    Also thanks for sharing your approach for the solution.

    ~Sharad
Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels