FlexGrid dropdown appearing in wrong place

FlexGrid dropdown appearing in wrong place

Posted by: chills on 31 January 2018, 6:21 am EST

• 

  chills

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 31 January 2018, 6:21 am EST

  This came up two years ago in this thread, but I’m having the same issue today. I’m using Wijmo version 5.20173.380.

  First up, a couple screenshots. In the first one, we see the dropdown cell selected:

  But when the dropdown is opened, the choices appear far below the target cell:

  I’m using the AngularJS interop library and this is my flexgrid component code:

  
      <wj-flex-grid ng-show="RbxGrid.showGrid()"
              control="flex"
              items-source="RbxGrid.tableData"
              loaded-rows="RbxGrid.rowsLoaded(e)"
              beginning-edit="RbxGrid.backupCell(e)"
              cell-edit-ending="RbxGrid.saveCell(s,e)"
              item-formatter="RbxGrid.customFormatter"
              allow-add-new="RbxGrid.allowAdd()"
              allow-delete="RbxGrid.allowDelete()"
              frozen-columns="0"
              frozen-rows="0"
      >
  
  

  The grid data is coming from an $http.get() call. The returned JSON is then mapped to RbxGrid.tableData, where tableData is built from “new wijmo.collections.CollectionView(val);” The dataMap attribute for the “Favorite Pizza Topping” column is built from “new wijmo.grid.DataMap(meta.dataMap.data, meta.dataMap.key, meta.dataMap.value);”

  Functionally, everything works. Visually, I can’t figure out what might be causing the dropdown selection window to appear so far south of the cell.

• 

  abhishek.dutta

  

  • Post Options:
  • Link
    Copy

  Posted 31 January 2018, 9:40 pm EST

  Could you please share a small sample application with your problem and we would surely look into it.

  Thanks,
  
  Abhishek

• 

  chills

  • Post Options:
  • Link
    Copy

  Posted 1 February 2018, 12:58 am EST

  Well, that might be more than half the battle. This is actually part of a relatively large and complex system: Wijmo, AngularJS, formly on the front end, with dynamic, data-driven FlexGrids; Symfony on the server side for both serving pages and as RESTful endpoints, multiple databases…

  I guess I was kind of hoping for one or two, “Oh yeah that happened to me and here is how I fixed it” replies. It happened to at least one other person here who reported it and never replied further:

  https://www.grapecity.com/en/forums/wijmo/angularjs-flexgrid-datamap

  I’ll see if I can cut this down to just the basics. But if anyone has that “Oh yeah” response, would love to hear it.

• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 1 February 2018, 7:41 pm EST

  Hi Chills,
  
  We are sorry for the inconvenience.

  We are unable to replicate the issue at our end. Please find the small fiddle sample used for replicating issue:
  
  http://jsfiddle.net/q5z3yvjw/11/

  We request you to modify this depicting your issue so that we can replicate and suggest solution to you.

  We also request you to test your application with latest build 5.20173.405 that may be contain fix for your issue.

  We may not suggest anything without replicating issue at our end.

  Again, sorry for inconvenience.

  ~Manish

• 

  chills

  • Post Options:
  • Link
    Copy

  Posted 3 February 2018, 12:59 am EST

  I’ll take a look at the fiddle and get the latest version.

• 

  chills

  • Post Options:
  • Link
    Copy

  Posted 3 February 2018, 2:29 am EST

  SOLVED: I wondered if this was a CSS or JS library conflict, so I began removing various things from my project. When I removed Angular Material:

  …the dropdowns popped back into the correct positions. I don’t believe I’m actively using Angular Material, so I should be good for now. If I do end up needing it, I guess I’ll revisit this compatibility issue later.

  Hopefully this helps someone else. Or perhaps someone at GrapeCity can put it on their “to look into” list.

• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 4 February 2018, 8:12 pm EST

  Hi Chillis,
  
  Thanks for sharing solution here. However, I was trying to reproduce error at my end by adding angular material references.

  But, I was unable to replicate the issue.

  We would suggest to use the latest build 5.20173.405. There may be some issues with Angular material and it should be fixed in latest release.
  
  However, if you find any issues, please let us know.

  ~Manish