Hello,

I am having an issue with a button menu inserted in an iggrid. More exactly, whenever the grid reload happens, the menu button on the current line is disabled. In order for it to work, I need to select a different row and then re-activate the desired button. The code below shows the initial grid rendering, and the grid reload.

Interestingly, after I populate the grid, I call the reloadGrid method and everything is fine (even if the row is pre-selected) until I recall the same method again.

function doInitGrid() {
     $("#grid").igGrid({
        columns: [
            { headerText: "", key: "Action", dataType: "string", width: "5%", columnCssClass: "centerAlignment", unbound: true, template: "<div style='text-align:center; width:100%'><a href='#' style='text-decoration:none;' class='Menu material-icons popr' data-id='Menu'>more_vert</a></div>" },
            { headerText: "Code", key: "Data", dataType: "string", width: "95%", hidden: false, columnCssClass: "leftAlignment" },
        ],
        type: "POST",
        contentType: "application/json; charset=utf-8",
        dataSourceurl: rootUrl("/Controller/Populate"),
        primaryKey: "Data",
        autoGenerateColumns: false,
        width: "100%",
        height: sMainWindowHeight,
        responseDataKey: "d.Results",
        features: [{
            name: 'Selection',
            mode: 'row',
            multipleSelection: false,
            activation: true,
            rowSelectionChanging: function (evt, ui) {
                $('.Menu').click(function (e) {
                    var offset = document.querySelector('#divMenu').getBoundingClientRect();
                 });
                $('.material-icons.popr').popr();
            },

        }, {
            name: 'Paging',
            pageSizeDropDownLocation: "inpager",
            pageSize: 50
        }, {
            name: 'Sorting',
            columnSettings: [
                { columnKey: 'Action', allowSorting: false }
            ]
        }, {
            name: 'Filtering',
            columnSettings: [
                { columnKey: 'Action', allowFiltering: false }
            ]
        }
        ]
    });
 
    reloadFunctionDefnGrid();
}

    function reloadGrid() {
        $.ajax({
            url: rootUrl("/Controller/Populate"),
            type: "POST",
            contentType: "application/json; charset=utf-8",
            data: "",
            timeout: 150000,
            dataType: 'json',
            async: false,
            success: function (sdata) {
                $("#grid").igGrid('option', 'dataSource', sdata);
                $('#grid_scroll').css({ "overflow-x": 'visible' });
            }
        });
    }


<div id="divMenu" class="popr-box" data-box-id="Menu">
    <a href="#" style="text-decoration:none;" id="fdView"><div class="popr-item">View</div></a>
    <a href="#" style="text-decoration:none;" id="fdDelete"><div class="popr-item">Delete</div></a>
</div>

Any ideas on what might cause the issue?