Posted 29 April 2019, 3:24 am EST
Hi,
I have an issue where in Chrome the click events on the buttons fire, but in Firefox and Edge they don’t.
In Firefox there appear to end up with two instances of the buttons, and the ones bound to the click events is hidden by the copy.
<html>
<head>
<!-- Wijmo -->
<link href="https://cdn.grapecity.com/wijmo/5.latest/styles/wijmo.min.css" rel="stylesheet"/>
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.grid.min.js"></script>
<script src="https://code.jquery.com/jquery-3.4.0.js"></script>
</head>
<body>
<table id="theGrid" style="height: 300px"></table>
<script>
var src = [
{"test": "a", "col2": "", "col3": "", "col4": "" },{"test": "a"},{"test": "b"},{"test": "c"},
{"test": "d"},{"test": "d"},{"test": "d"},{"test": "d"},{"test": "d"},{"test": "d"},{"test": "d"}];
var data = new wijmo.collections.CollectionView(src);
data.groupDescriptions.push(new wijmo.collections.PropertyGroupDescription('test'));
var _super = wijmo.grid.CellFactory;
var cellFactory = new wijmo.grid.CellFactory();
cellFactory.updateCell = function (panel, r, c, cell, rng, updateContent)
{
_super.prototype.updateCell.call(this, panel, r, c, cell, rng, true);
if (panel.cellType == wijmo.grid.CellType.Cell)
{
if (panel.rows[r] instanceof wijmo.grid.GroupRow
&& panel.cellType !== wijmo.grid.CellType.RowHeader)
{
if (r === 0)
{
let expand = $("<button class='test' style='min-height: 1.5em; padding: 0'>expand</button>");
let collapse = $("<button class='test' style='min-height: 1.5em; padding: 0'>collapse</button>");
$(cell).append(expand);
$(cell).append(collapse);
expand.on('click', function ()
{
alert('expand');
});
collapse.on('click', function ()
{
alert('collapse');
});
}
}
}
};
var theGrid = new wijmo.grid.FlexGrid('#theGrid', {
itemsSource: data,
frozenRows: 1,
cellFactory: cellFactory
});
</script>
</body>
</html>
(couldn’t tell if the attachment was working - the tick/x buttons were disabled)