Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
15
iggrid reload disables element in grid
posted

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?