Wijmo flexgrid sort column data

Wijmo flexgrid sort column data

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

• 

  hima.brahmbhatt

  • Post Options:
  • Link
    Copy

  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

• 

  sharad.tomer

  

  • Post Options:
  • Link
    Copy

  Posted 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

• 

  hima.brahmbhatt

  • Post Options:
  • Link
    Copy

  Posted 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

• 

  sharad.tomer

  

  • Post Options:
  • Link
    Copy

  Posted 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

• 

  hima.brahmbhatt

  • Post Options:
  • Link
    Copy

  Posted 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

• 

  sharad.tomer

  

  • Post Options:
  • Link
    Copy

  Posted 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