Search code examples
javascriptdatatabledatagridcolorize

Grid deselects when clicking a button

I have created a simple data grid with dummy data according to this example. However, if I click one of the custom buttons, the grid deselects and the method (_setCellColors) is never called.

When I add a playground grid in the API and perform the "_setCellColors" method, it works fine however. (https://www.datagridxl.com/api/methods).

I am not sure what I am doing wrong here. How to call the methods without deselecting the grid?

enter image description here

Edit: forgot to include the JSFiddle link: https://jsfiddle.net/0nrjvx1p/5/.

var grid = new DataGridXL("grid", {
  data: DataGridXL.createDummyData(100,10)
});

// not working
document.getElementById("button-pink").onclick = function(){
  grid._setCellColors(grid.getCellSelection(), "#ffe1f0");
}

// not working
document.getElementById("button-green").onclick = function(){
  grid._setCellColors(grid.getCellSelection(), "#f0ffe1");
}
Solution

  • Alright, found the issue. It was actually on the demo page, but I overlooked it somehow.

    If anyone else is looking for the answer: the buttons do not automatically belong to the app, unless you add a CSS classname to the buttons, or their parent:

    .dgxl-app

    Just add the class to your parent div:

    <div class="dgxl-app">
    <button class="button" id="button-green">Green</button>
    <button class="button" id="button-pink">Pink</button>
</div>

    Here's the updated Fiddle: https://jsfiddle.net/x8tqyhab/