Default sort icon ( arrow up or down ) in custom sort

Default sort icon ( arrow up or down ) in custom sort

Posted by: aniket.bhavsar on 29 January 2018, 9:41 pm EST

• 

  aniket.bhavsar

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 29 January 2018, 9:41 pm EST

  Hello Team,

  I am implementing custom sort on Pivot grid. I want to know how i can keep sort icon ( up or down arrow ).While implementation of custom sort by default. i.e when grid is generate i can see Row Field in sorted order with ( up or down arrow ) sort icon.

  In normal sort ( Not in custom sort) i can use showRowFieldSort:true property for by default to getting icon. How i can implement same things while custom sort on Pivot grid/Flex grid with sort icon.

  http://jsfiddle.net/u4a2mnn6/
  
  

  In image i mention in red color arrow by default when grid loaded.

• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 1 February 2018, 5:50 pm EST

  Hi Aniket,
  
  We are sorry for the delayed response.

  You may use showRowFieldSort property to show the sort Icon in custom sort too. Since, custom sort is applying through sortComparer.
  
  http://jsfiddle.net/u4a2mnn6/1/
  
  If you would like to show custom icon, you need to use itemFormatter and add custom icon for ColumnHeader using innerHTML. For this, you need to get sorted order.

  ~Manish

• 

  aniket.bhavsar

  • Post Options:
  • Link
    Copy

  Posted 2 February 2018, 6:14 am EST

  Hello Manish,
  
  Thank you so much Mr.Manish. I really appreciate for that. You and your team really doing great work.

• 

  aniket.bhavsar

  • Post Options:
  • Link
    Copy

  Posted 1 March 2018, 8:11 pm EST

  Yes, I have sorted order data. How i implement on itemFormatter to add custom sort icon on grid ?

• 

  grapecity

  • Post Options:
  • Link
    Copy

  Posted 4 March 2018, 10:39 pm EST

  Hi Aniket,

  We are working on your issue. Please allow us some time to resolve this.

  ~nilay

• 

  aniket.bhavsar

  • Post Options:
  • Link
    Copy

  Posted 4 March 2018, 11:29 pm EST

  Thank You So Much Nilay. I am waiting for response.

• 

  abhishek.dutta

  

  • Post Options:
  • Link
    Copy

  Posted 5 March 2018, 5:15 pm EST

  <wj-pivot-grid
      items-source="ngFmt"
      control="pivotGrid"
      initialized="init(s,e)"
       item-formatter="itemFormatter">
    </wj-pivot-grid>
  

        $scope.itemFormatter = function (panel, r, c, cell) {
         if (panel.cellType == wijmo.grid.CellType.ColumnHeader) {
             var col = panel.columns[c];
             if ($scope.sort.col == col.binding) {
                 if ($scope.sort.dir == 'a') {
                     cell.innerHTML = col.header + ' <span class="wj-glyph-up"></span>';
                 } else {
                     cell.innerHTML = col.header + ' <span class="wj-glyph-down"></span>';
                 }
             }
         }
     }
  

  Please try this code and let me know if you face any issues

• 

  aniket.bhavsar

  • Post Options:
  • Link
    Copy

  Posted 5 March 2018, 6:35 pm EST

  any Jsfiddle which implement above solution ?

• 

  abhishek.dutta

  

  • Post Options:
  • Link
    Copy

  Posted 5 March 2018, 8:26 pm EST

  here you go

  http://jsfiddle.net/ho0av8zq/1/