Sort column position based on json data

Sort column position based on json data

Posted by: sneha.nagaruru on 11 February 2021, 8:13 am EST

• 

  sneha.nagaruru

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 11 February 2021, 8:13 am EST

  Hi Team,
  
  I’m working with angular and typescript. Below is the requirement

  I have columnproperties json data as below
  
  {binding: ‘name’,header: ‘Name’,filterType: 3,visible: true, index:3},
  
  {binding: ‘userId’,header: ‘User ID’, filterType: 3,visible: true, index:1},
  
  {binding: ‘jobTitleName’, header: ‘Job’, filterType: 3,visible: true, index:2}

  I need to show column order based on the index. Is there any way to make it happen in wijmogrid.

  Also if the user sorts the columns by dragging the columns, I need the binding, header, index position information to save the user preferences.

  Please address both the requirements.

  Thanks & regards,
  
  Sneha Nagaruru

• 

  sharad.tomer

  

  • Post Options:
  • Link
    Copy

  Posted 15 February 2021, 6:06 am EST

  Hi Sneha,

  You may simply sort the array based on index property and then use ngFor to create wj-flex-grid-columns. To save columns order after drag, you may handle the draggedColumn event and save the current order. Please refer to the following code sample which demonstrates the same:
  
  https://codesandbox.io/s/wijmo-angular-forked-x1cm9?file=/src/app/app.component.ts

  Regards
  
  Sharad

• 

  sneha.nagaruru

  • Post Options:
  • Link
    Copy

  Posted 15 February 2021, 6:41 am EST

  Hi Sharad,

  This demo works perfectly fine as per the requirement. Thanks for your help.

  The requirement got little bit changed. Even width is added to the colsInfo like
  
  {binding: ‘name’,header: ‘Name’,filterType: 3,visible: true, index:3, width:100}

  I have added width changes to the demo it working.

  I need help on getting the width of the columns when the user resizes them. Is their any handle to capture it.

  Thanks & Regards,
  
  Sneha Nagaruru

• 

  sharad.tomer

  

  • Post Options:
  • Link
    Copy

  Posted 16 February 2021, 2:01 pm EST

  Hi Sneha,

  You may use the resizedColumn event to get notified about when the column width changes by dragging column.
  
  https://www.grapecity.com/wijmo/api/classes/wijmo_grid.flexgrid.html#resizedcolumn

  Regards
  
  Sharad