Angular 4 grid touch column order and widths

Angular 4 grid touch column order and widths

Posted by: johan-nilsson on 14 September 2017, 12:10 pm EST

• 

  johan-nilsson

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 14 September 2017, 12:10 pm EST

  Hello!

  I’m trying to enable grid column ordering and width resizing on the flexgrid however I’m coming up short.

  Running the example here http://demos.wijmo.com/5/SampleExplorer/SampleExplorer/Sample/DynamicDashboard for angular 1 and I’m experiencing the expected behavior, however running the same sample for angular 2 does not seem to have the support for reordering columns or changing the column widths when on a touch device.

  Please advice how this can be achieved.

  We are currently using C1Wijmo-Enterprise_5.20171.300 and will soon upgrade to 5.20172.328
  
  Thanks in advance
  
  Johan Nilsson

• 

  manish-gupta1

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 12:10 pm EST

  Hi,
  
  We are investigating this and we will update you soon.

  Thanks,
  
  Manish Kumar Gupta

• 

  manish-gupta1

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 12:10 pm EST

  Hello Johan,
  
  You need to add support for DragDrop in touch devices, you can get detailed information in the following sample that allows you to drag-drop in touch devices.
  
  http://demos.wijmo.com/5/SampleExplorer/SampleExplorer/Sample/DragDropTouch

  Thanks,
  
  Manish Kumar Gupta

• 

  michael-prentice

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 12:10 pm EST

  Any chance of an Angular v4 sample coming soon?

• 

  manish-gupta1

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 12:10 pm EST

  Hi,
  
  This sample is in the queue for porting to Angular 2. But we cannot provide any ETA for this. We have requested to put this in priority.
  
  We will inform you once it gets ported.

  Thanks,
  
  Manish Kumar Gupta

• 

  manish-gupta1

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 12:10 pm EST

  Hi,
  
  The sample has been ported to Angular 2. The sample can be found in the latest nightly drop build 5.20172.338 which can be downloaded from here.

  The sample can be found inside Samples/TS/Angular2 folder in the downloaded build.

  Thanks,
  
  Manish Kumar Gupta

• 

  johan-nilsson

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 12:10 pm EST

  Hello and thanks for the quick turnaround on a sample!

  The sample is using “DragDropTouchNoWijmo” and I was able to get it working with that as well.
  
  However that force me to load the script by itself using the scripts in angular-cli.json, and I was wondering how to get it working with “DragDropTouch”.
  
  I’m not 100% sure about the difference, as the sample uses “DragDropTouchNoWijmo” but it still loads and utilizes wijmo, please advise to the difference and which one I should be using.

  Thanks in advance

• 

  manish-gupta1

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 12:10 pm EST

  Hi Johan,
  
  We have requested to the concerned team for clarification.

  Thanks,
  
  Manish Kumar Gupta

• 

  johan-nilsson

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 12:10 pm EST

  Any feedback on this?

  Thanks

• 

  manish-gupta1

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 12:10 pm EST

  Hi,
  
  The DragDropTouch.ts and DragDropTouchNoWijmo.ts files provide the exact same functionality, you can pick one or the other.

  The difference between them is only that DragDropTouchNoWijmo.ts does not reference or need Wijmo.

  Thanks,
  
  Manish Kumar Gupta

• 

  michael.prentice

  • Post Options:
  • Link
    Copy

  Posted 18 October 2017, 3:41 am EST

  This has worked for us to allow for dragging and dropping column headers to move them and to resize columns on desktop and mobile. Thank you.

  However, this has broken the ability to sort columns on Android and iOS. Single tapping the column header no longer has the effect of sorting the column. It seems like some of the drag and drop code tries to activate and then blocks the event (there is a grey flash over the table).

  Note that this problem can be observed in the demo here: http://demos.wijmo.com/5/Angular2/DragDropTouch/DragDropTouch/

  Is it possible to support both column resize, column reorder, and column sorting via touch on mobile at the same time?

• 

  michael.prentice

  • Post Options:
  • Link
    Copy

  Posted 19 October 2017, 2:16 am EST

  Removing the second

  e.preventDefault();

  in ```
  
  _touchstart()