Our blazing fast Grid component built with pure JavaScript


Post by cyrus16 »

I tried to modify the demo from codepen (https://codepen.io/pen?editors=0010) with the following code and the cell renders incorrectly with html tags:


let searchField = new TextField({
    appendTo : document.body,
    label    : 'Search',
    icon     : 'b-icon b-icon-search',
    value    : 'on',
    style    : 'margin-bottom: 1em',
    onInput  : () => grid.features.search.search(searchField.value)
});

// grid with Search feature
let grid = new Grid({
    appendTo : document.body,

// makes grid as high as it needs to be to fit rows
autoHeight : true,

features : {
    // enable searching
    search : true
},

data : DataGenerator.generateData(5),

columns : [
    { field : 'name', text : 'Name', flex : 1,
    renderer(renderData) {
      return `<div style='background-color:lightgreen; width: 200px'>${renderData.value}</div>`;
      }      
    },
    { field : 'city', text : 'City', flex : 1 }
]
});

// initial search
grid.features.search.search(searchField.value);

Screen Shot 2022-03-08 at 10.43.33 AM.png
Screen Shot 2022-03-08 at 10.43.33 AM.png (496.32 KiB) Viewed 895 times

Post by tasnim »

Hi cyrus16,
I've pasted your code in my codepen and it worked. This is the code: https://codepen.io/dv-auntik/pen/LYOoEXE?editors=0010

Attachments
codepen.PNG
codepen.PNG (27.13 KiB) Viewed 891 times

Post by cyrus16 »

Please try to enter any string that doesn't match any record.

Screen Shot 2022-03-08 at 1.57.10 PM.png
Screen Shot 2022-03-08 at 1.57.10 PM.png (813.1 KiB) Viewed 883 times

Post by tasnim »

I've reproduced the bug, and here is a ticket https://github.com/bryntum/support/issues/4325
thank you for clarifications


Post by mats »

If you are rendering custom HTML, please set htmlEncode to false on your column. Does that fix it? https://bryntum.com/docs/scheduler/api/Grid/column/Column#config-htmlEncode


Post Reply