1. Feedback
  2. JavaScript
  3. 25365

Welcome to the JavaScript feedback portal. We’re happy you’re here! If you have feedback on how to improve the JavaScript, we’d love to hear it!

  • Check out the features or bugs others have reported and vote on your favorites. Feedback will be prioritized based on popularity.
  • If you have feedback that’s not listed yet, submit your own.

Thanks for joining our community and helping improve Syncfusion products!

1
Vote

Column reorder fails for stacked headers with transformed (in CSS) text

Hi,

We have noticed a problem in Grid component for columns reorder and stacked headers features working together.

Conditions:

  1. Grid with columns reordering enabled and stacked headers configured.
  2. Some customization of headers text in CSS
    (e.g. text-transform: uppercase)
Steps to reproduce:
  1. Start (parent) column reordering with mouse drag
Result:
Error logged in the console, column drag&drop not working.

Stack trace for non-minified sources:
Uncaught TypeError: Cannot read property 'lockColumn' of undefined
at Draggable.HeaderRender.helper (ej2-grids.es2015.js:3682)
at Draggable.getHelperElement (ej2-base.es2015.js:7846)
at Draggable.intDragStart (ej2-base.es2015.js:7430)

Reproduce demo:

https://stackblitz.com/edit/angular-2jnzhe-vkkv2q?file=index.html
(try to drag "ORDER DETAILS" header and observe console logs)

Probable source of failure is on this line:

https://github.com/syncfusion/ej2-javascript-ui-controls/blob/32e04f974a6a43741783ea9e1e83bd74218f3d4f/controls/grids/src/grid/renderer/header-renderer.ts#L57

For parent headers column object is searched by innerText of DOM element, that can be modified/transformed. Another problem can appear if column's header text would be not unique?