rowselect event grid details row

[hfParticipant]

Hi,

I have a grid (jqxgrid) with details row containing another grid (jqxgridhours). When I click a row in the grid (jqxgridhours) from the detailrow, the rowselect event of the main grid (jqxgrid) is fired.

    // EVENTS
    $("#jqxgrid").on('rowselect', function (event) {
        rowindex = event.args.rowindex;
        rowdata = $("#jqxgrid").jqxGrid('getrowdata', rowindex)

        alert(rowdata.status);
    });

    // ROW DETAILS
    var initrowdetails = function (index, parentElement, gridElement, datarecord) {
        
        var tabsdiv = null;
        tabsdiv = $($(parentElement).children()[0]);

        if (tabsdiv != null) {
            regels = tabsdiv.find('.regels');
            log = tabsdiv.find('.log');

            var mainSplitter = $('<div id="mainSplitter" class="jqx-hideborder"></div>');
            mainSplitter.appendTo($(regels));
                        
            var splitterLeft = $("<div id='splitterLeft' style='height:100%'></div>");
            var splitterRight = $("<div id='splitterRight'></div>");

            mainSplitter.append(splitterLeft);
            mainSplitter.append(splitterRight);

            $('#mainSplitter').jqxSplitter({ theme: theme, width: '100%', height: '100%', panels: [{ size: 370, min: 370, collapsible: true, collapsed: true }, { collapsible: false }] });

            var divEdit = $("<div id='divEdit' class='jqx-hideborder' style='height:100%; overflow: auto;' ><div>");
            var jqxgriduren = $("<div id='jqxgriduren' class='jqx-hideborder'></div>");

            splitterLeft.append(divEdit);
            
            var divEdittable = "<table><tr><td></td></tr></table>"

            $("#divEdit").jqxPanel({ theme: theme, width: '100%', height: '100%', autoUpdate: true, disabled: true });
            $('#divEdit').jqxPanel('append', divEdittable);

            splitterRight.append(jqxgriduren);

            $(tabsdiv).jqxTabs({ theme: theme, width: '95%', height: '95%', position: 'top' });
            
            $("#jqxgriduren").on('rowselect', function (event) {
                rowindex = event.args.rowindex;
                rowdata = $("#jqxgriduren").jqxGrid('getrowdata', rowindex)
            });

        };
    }

    // GRID
    $("#jqxgrid").jqxGrid({
        theme: theme,
        localization: localizationobj,
        columnsresize: true,
        width: '100%',
        height: '100%',
        source: adapter,
        rowdetails: true,
        rowdetailstemplate: { rowdetails: "<div style='margin: 10px;'><ul style='margin-left: 30px;'><li>" +
                "<div>" +
                    "<img style='float: left;' width='16' height='16' src='img/16x16/Clock.png' />" +
                    "<div style='float: left; margin-left: 6px; text-align: center;'>" +
                        "Regels" +
                    "</div>" +
                "</div>" + "</li><li>Log</li></ul><div class='regels'></div><div class='log'></div></div>", rowdetailsheight: 650
        },
        initrowdetails: initrowdetails,
        rowsheight: 35,
        altrows: true,
        showfilterrow: true,
        filterable: true,
        sortable: true,
        groupable: true,
        columnsreorder: true,
        groupsexpandedbydefault: false,
        selectionmode: 'singlerow',
        scrollmode: 'deferred',
        deferreddatafields: ['datum', 'uren', 'status'],
        ready: function () {
            // goedkeuren en afkeuren uitschakelen na laden grid
            $('#jqxcontentmenu').jqxMenu('disable', '47', true);
            $('#jqxcontentmenu').jqxMenu('disable', '48', true);
        },
        columns: [
            { text: 'user', datafield: 'userid', hidden: true, width: 100 },
            { text: 'Werknemer', datafield: 'naam', filtertype: 'checkedlist', hidden: false, width: 100 },
            { text: 'Datum', datafield: 'datum', cellsformat: 'dddd d MMMM yyyy', filtertype: 'date' },
            { text: 'Uren', datafield: 'totaal', cellsformat: 'F2', filtertype: 'number', cellsalign: 'right', groupable: false, width: 75 },
            { text: 'Status', datafield: 'status', filtertype: 'checkedlist', width: 100 }
        ]
    });
}

[NadezhdaParticipant]

Hello hf,

Please, add IF check within your “rowselect” event handler. The event.target.id should be equal to your main Grid’s ID.
The event is raised when you select a row in the nested grid due to the JavaScript event bubbling concept.

Best Regards,
Nadezhda

jQWidgets team
http://www.jqwidgets.com/

[hfParticipant]

Nadezhda,

Thanks, that’s the solution!

[Author]

Posts