jQWidgets Forums

jQuery UI Widgets › Forums › Grid › dropdown menu behind grid

Tagged: 

This topic contains 2 replies, has 3 voices, and was last updated by  maighoneim 8 years, 10 months ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    dropdown menu behind grid Posts
  • July 3, 2012 at 9:43 pm dropdown menu behind grid #5624

    mattkay
    Participant

    Hi All: I have a dropdown button just above my grid. when i click on the button to expand it, the drop down appears behind the grid.

    i also have a dropdown menu above the grid and this drops down correctly in front of the grid. i am trying to figure out why the dropdown menu works differently from the dropdown button and also, how do i get the dropdown button to appear in front of the grid.

    i changed the z index for the dropdown menu which is what made that appear in front of the grid but this approach did not work with the dropdown button. thanks for the help….

    July 4, 2012 at 6:18 am dropdown menu behind grid #5636

    Peter Stoev
    Keymaster

    Hi mattkay,

    Here’s a sample for changing the z-index of the DropDownButton’s Popup.

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <title id='Description'>In this demo, the Grid is used in a combination with the jqxDropDownButton
            widget.</title>
        <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
        <script type="text/javascript" src="../../scripts/jquery-1.7.2.min.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxdropdownbutton.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxgrid.pager.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>   
        <script type="text/javascript" src="../../scripts/gettheme.js"></script>
        <script type="text/javascript" src="generatedata.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                var theme = getTheme();
                // prepare the data
                var data = generatedata(100);
                var source =
                {
                    localdata: data,
                    datatype: "array",
                    updaterow: function (rowid, rowdata) {
                        // synchronize with the server - send update command   
                    }
                };
                var dataAdapter = new $.jqx.dataAdapter(source);
                // initialize jqxGrid
                $("#jqxdropdownbutton").jqxDropDownButton({ width: 150, height: 25, theme: theme });
                $("#jqxgrid").jqxGrid(
                {
                    width: 550,
                    source: dataAdapter,
                    theme: theme,
                    pageable: true,
                    autoheight: true,
                    columns: [
                      { text: 'First Name', columntype: 'textbox', datafield: 'firstname', width: 90 },
                      { text: 'Last Name', datafield: 'lastname', columntype: 'textbox', width: 90 },
                      { text: 'Product', columntype: 'dropdownlist', datafield: 'productname', width: 180 },
                      { text: 'Quantity', datafield: 'quantity', width: 70, cellsalign: 'right' },
                      { text: 'Price', datafield: 'price', cellsalign: 'right', cellsformat: 'c2' }
                    ]
                });
                $("#jqxgrid").bind('rowselect', function (event) {
                    var args = event.args;
                    var row = $("#jqxgrid").jqxGrid('getrowdata', args.rowindex);
                    var dropDownContent = '<div style="position: relative; margin-left: 3px; margin-top: 5px;">' + row['firstname'] + ' ' + row['lastname'] + '</div>';
                    $("#jqxdropdownbutton").jqxDropDownButton('setContent', dropDownContent);
                });
                $("#jqxgrid").jqxGrid('selectrow', 0);
                $(".dropDownButton").css('z-index', 99999);
            });
        </script>
    </head>
    <body class='default'>
        <div id='jqxWidget'>
            <div id="jqxdropdownbutton">
                <div style="background: blue; width: 500px; height: 500px;"></div>
            </div>
                <div id="jqxgrid">
                </div>
        </div>
    </body>
    </html>

    Hope this helps you.

    Best Wishes,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com

    July 20, 2016 at 2:35 pm dropdown menu behind grid #85910

    maighoneim
    Participant

    Hi,
    I have the same issue, can you help please

  • Author
    Posts
Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.