search

DHTMLX / gantt

GPL version of Javascript Gantt Chart
https://dhtmlx.com/docs/products/dhtmlxGantt/
GNU General Public License v2.0
1.44k stars 320 forks source link

DOMException in onrender when column name has a space #99

Open DanielRose opened 1 year ago

DanielRose commented 1 year ago

Create a column definition where the column name has a space, and add an onrender function:

{ name: "or der", label: "Order", onrender: function(task) { return task.order; } }

This throws a DOMException, because the generated querySelector does not properly escape the column name:

Uncaught DOMException: Failed to execute 'querySelector' on 'Element': '[data-column-name=or der]' is not a valid selector.
    at Object.onrender (https://cdn.dhtmlx.com/gantt/pro/edge/dhtmlxgantt.js?a1693916881097:18:250003)
    at Object.render_items (https://cdn.dhtmlx.com/gantt/pro/edge/dhtmlxgantt.js?a1693916881097:18:304012)
    at a (https://cdn.dhtmlx.com/gantt/pro/edge/dhtmlxgantt.js?a1693916881097:18:505613)
    at c.<anonymous> (https://cdn.dhtmlx.com/gantt/pro/edge/dhtmlxgantt.js?a1693916881097:18:506648)
    at c.i (https://cdn.dhtmlx.com/gantt/pro/edge/dhtmlxgantt.js?a1693916881097:11:11326)
    at t.callEvent (https://cdn.dhtmlx.com/gantt/pro/edge/dhtmlxgantt.js?a1693916881097:11:12071)
    at c.<anonymous> (https://cdn.dhtmlx.com/gantt/pro/edge/dhtmlxgantt.js?a1693916881097:18:506482)
    at c.i (https://cdn.dhtmlx.com/gantt/pro/edge/dhtmlxgantt.js?a1693916881097:11:11326)
    at t.callEvent (https://cdn.dhtmlx.com/gantt/pro/edge/dhtmlxgantt.js?a1693916881097:11:12071)
    at c.refresh (https://cdn.dhtmlx.com/gantt/pro/edge/dhtmlxgantt.js?a1693916881097:18:101068)
    at Object.refreshData (https://cdn.dhtmlx.com/gantt/pro/edge/dhtmlxgantt.js?a1693916881097:18:513362)
    at https://cdn.dhtmlx.com/gantt/pro/edge/dhtmlxgantt.js?a1693916881097:18:379313
    at t._quickRefresh (https://cdn.dhtmlx.com/gantt/pro/edge/dhtmlxgantt.js?a1693916881097:18:378462)
    at e.<anonymous> (https://cdn.dhtmlx.com/gantt/pro/edge/dhtmlxgantt.js?a1693916881097:18:379286)
    at e.i (https://cdn.dhtmlx.com/gantt/pro/edge/dhtmlxgantt.js?a1693916881097:11:11326)
    at t.callEvent (https://cdn.dhtmlx.com/gantt/pro/edge/dhtmlxgantt.js?a1693916881097:11:12071)

In the codebase:

  function onrender(item, rowNode, view) {
    var columns = view.getGridColumns();

    for (var i = 0; i < columns.length; i++) {
      var column = columns[i];

      if (column.onrender) {
        // find cell node for current column
        var cellNode = rowNode.querySelector("[data-column-name=" + column.name + "]"); // <---
gearcoded commented 1 year ago

@DanielRose, thank you for reporting the bug! It seems to be working that way since the 7.1 version. I added it to the internal bug tracker. The dev team will fix the bug in the future, but I cannot give you any ETA. As a workaround, you can try using the underscore symbols instead of the spaces.