Our state of the art Gantt chart


Post by ginkosan »

gantt.module.js

when my element like this

<div class="b-grid-cell" data-column="0ZS2S2bQN3NQ5hR1" data-column-id="0ZS2S2bQN3NQ5hR12" style="min-width: 60px; width: 100px;">2020-09-01 00:00</div>

DomHelper.children will throw error for [

Uncaught DOMException: Failed to execute 'querySelectorAll' on 'Document': '.b-grid-cell[data-column-id=0ZS2S2bQN3NQ5hR12]' is not a valid selector.
at <anonymous>:1:10

]

DomHelper.children methods show be

DomHelper.children(me.element, `.b-grid-cell[data-column-id="${column.id}"]`)

Post by mats »

Please read the forum rules: viewtopic.php?f=16&t=772

Please ask clear questions, provide a simple test case so we can inspect it.


Post by ginkosan »

Version Info

  • Bryntum Gantt version :2.1.8

  • Browser version : chrome 85.0.4183.102

  • OS version : macOs Catalina 10.15.6

Step by step description

  • gantt rendered html example on one cell

    <div class="b-grid-cell" data-column="0ZS2S2bQN3NQ5hR1" data-column-id="0ZS2S2bQN3NQ5hR117" style="min-width: 60px; width: 100px;">2020-09-01 00:00</div>
    
  • error occur line code

    DomHelper.children(me.element, `.b-grid-cell[data-column-id=${column.id}]`)
    
  • when i drag the column header to resize the column width, chrome will throw error for

    Uncaught DOMException: Failed to execute 'querySelectorAll' on 'Document': '.b-grid-cell[data-column-id=0ZS2S2bQN3NQ5hR117]' is not a valid selector.
    at <anonymous>:1:10
    

Screen dumps

chrome error stack
chrome error stack
QQ20200918-141045@2x.png (465.15 KiB) Viewed 739 times
chrome render html
chrome render html
QQ20200918-141126@2x.png (777.43 KiB) Viewed 739 times
chrome render view
chrome render view
QQ20200918-141531.png (50.13 KiB) Viewed 739 times

what i have try

  • run

    document.querySelectorAll('.b-grid-cell[data-column-id=0ZS2S2bQN3NQ5hR117]')

    in chrome devtools

  • change the upper codes

    document.querySelectorAll('.b-grid-cell[data-column-id="0ZS2S2bQN3NQ5hR117"]')

    in chrome devtools , every things go right

what i thought

that data-column-id="0ZS2S2bQN3NQ5hR12" is an invaild selector in css selector rules

so the gantt.module.js codes

DomHelper.children(me.element, `.b-grid-cell[data-column-id=${column.id}]`)

should be change to

DomHelper.children(me.element, `.b-grid-cell[data-column-id="${column.id}"]`)

is this description Ok ?


Post by arcady »

Thank you for the feedback! Here is a ticket to track the issue state: https://github.com/bryntum/support/issues/1540


Post by ginkosan »

cheers!!!
thanks for rely


Post Reply