jQWidgets Forums

Tagged: angular grid, bootstrap grid, javascript grid, jquery grid, jqwidgets grid, jqxgrid

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

Viewing 6 posts - 1 through 6 (of 6 total)

Author

angular material menu bar is behind grid's header Posts

June 24, 2016 at 2:15 am angular material menu bar is behind grid's header #85397

shinhwap

Participant

I am using angular material menu bar to create my toolbar and having a jqxgrid in jqxdockinglayout.

The problem is when the menu popup, the menu is behind the grid’s header.

How can I solve this problem

Image

June 24, 2016 at 7:36 am angular material menu bar is behind grid's header #85406

Hristo

Participant

Hello shinhwap,

Please, provide us an example that demonstrate this issue.
(better way is on https://www.jseditor.io/ or https://fiddle.jshell.net/)

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

June 27, 2016 at 7:29 am angular material menu bar is behind grid's header #85429

shinhwap

Participant

Here is my code


html

<body>
<div ng-controller="AppCtrl" >
    <md-toolbar class="sidebar">
        <div >
            <md-toolbar-filler layout layout-align="left center">

            </md-toolbar-filler>
            <div>
                <md-menu-bar>
                    <md-menu>
                        <button ng-click="$mdOpenMenu()">
                            File
                        </button>
                        <md-menu-content>
                            <md-menu-item>
                                <md-button ng-click="ctrl.sampleAction('share', $event)">
                                    Share...
                                </md-button>
                            </md-menu-item>
                            <md-menu-divider></md-menu-divider>
                            <md-menu-item>
                                <md-menu>
                                    <md-button ng-click="$mdOpenMenu()">New</md-button>
                                    <md-menu-content>
                                        <md-menu-item><md-button ng-click="ctrl.sampleAction('New Document', $event)">Document</md-button></md-menu-item>
                                        <md-menu-item><md-button ng-click="ctrl.sampleAction('New Spreadsheet', $event)">Spreadsheet</md-button></md-menu-item>
                                        <md-menu-item><md-button ng-click="ctrl.sampleAction('New Presentation', $event)">Presentation</md-button></md-menu-item>
                                        <md-menu-item><md-button ng-click="ctrl.sampleAction('New Form', $event)">Form</md-button></md-menu-item>
                                        <md-menu-item><md-button ng-click="ctrl.sampleAction('New Drawing', $event)">Drawing</md-button></md-menu-item>
                                    </md-menu-content>
                                </md-menu>
                            </md-menu-item>
                            <md-menu-item>
                                <md-button type="file" on-read-file="showContent($fileContent)" ng-click="$mdMenu.hide()">
                                    Select a file
                                    <input type="file" nv-file-select uploader="$ctrl.uploader">
                                    <span class="md-alt-text"> {{ 'M-O' | keyboardShortcut }}</span>
                                </md-button>
                            </md-menu-item>
                            <md-menu-item>
                                <md-button disabled="disabled" ng-click="ctrl.sampleAction('Rename', $event)">
                                    Rename
                                </md-button>
                            </md-menu-item>
                            <md-menu-divider></md-menu-divider>
                            <md-menu-item>
                                <md-button ng-click="ctrl.sampleAction('Print', $event)">
                                    Print
                                    <span class="md-alt-text">{{ 'M-P' | keyboardShortcut }}</span>
                                </md-button>
                            </md-menu-item>
                        </md-menu-content>
                    </md-menu>
                    <md-menu>
                        <button ng-click="$mdOpenMenu()">
                            Edit
                        </button>
                        <md-menu-content>
                            <md-menu-item class="md-indent">

                                <md-button ng-click="ctrl.sampleAction('undo', $event)">
                                    Undo
                                    <span class="md-alt-text">{{ 'M-Z' | keyboardShortcut }}</span>
                                </md-button>
                            </md-menu-item>
                            <md-menu-item class="md-indent">

                                <md-button ng-click="ctrl.sampleAction('redo', $event)">
                                    Redo
                                    <span class="md-alt-text">{{ 'M-Y' | keyboardShortcut }}</span>
                                </md-button>
                            </md-menu-item>
                            <md-menu-divider></md-menu-divider>
                            <md-menu-item class="md-indent">

                                <md-button ng-click="ctrl.sampleAction('cut', $event)">
                                    Cut
                                    <span class="md-alt-text">{{ 'M-X' | keyboardShortcut }}</span>
                                </md-button>
                            </md-menu-item>
                            <md-menu-item class="md-indent">

                                <md-button ng-click="ctrl.sampleAction('copy', $event)">
                                    Copy
                                    <span class="md-alt-text">{{ 'M-C' | keyboardShortcut }}</span>
                                </md-button>
                            </md-menu-item>
                            <md-menu-item class="md-indent">

                                <md-button ng-click="ctrl.sampleAction('paste', $event)">
                                    Paste
                                    <span class="md-alt-text">{{ 'M-P' | keyboardShortcut }}</span>
                                </md-button>
                            </md-menu-item>
                            <md-menu-divider></md-menu-divider>
                            <md-menu-item class="md-indent">
                                <md-button ng-click="ctrl.sampleAction('Find and replace', $event)">
                                    Find and replace...
                                    <span class="md-alt-text">{{ 'M-S-H' | keyboardShortcut }}</span>
                                </md-button>
                            </md-menu-item>
                        </md-menu-content>
                    </md-menu>
                </md-menu-bar>
            </div>
        </div>
    </md-toolbar>
    <div id = "jqxWidget">
    <jqx-docking-layout jqx-settings="settings" id="jqxLayout" keyboardNavigation = "true" >
    <div data-container="SymbolExplorerPanel" >
        <div id="jqxTree" style="border: none;">

        </div>

        <div id='jqxMenu' style="visibility: hidden;" >
            <ul>
                <li>Properties</li>
                <li>Remove Item</li>
            </ul>
        </div>

    </div>

    <!--documentGroup-->
    <div data-container="CanPanel" >

        <div>
            <table class="table">

            <tr>
            <th>ID</th>
            <th>Data</th>
            </tr>

            <tr>
            <td><input class="form-control" id="id"     name="id"    maxlength="9"/></td>
            <td><input class="form-control" id="data1"  name="data1" maxlength="3"/></td>
            <td><input class="form-control" id="data2"  name="data2" maxlength="3"/></td>
            <td><input class="form-control" id="data3"  name="data3" maxlength="3"/></td>
            <td><input class="form-control" id="data4"  name="data4" maxlength="3"/></td>
            <td><input class="form-control" id="data5"  name="data5" maxlength="3"/></td>
            <td><input class="form-control" id="data6"  name="data6" maxlength="3"/></td>
            <td><input class="form-control" id="data7"  name="data7" maxlength="3"/></td>
            <td><input class="form-control" id="data8"  name="data8" maxlength="3"/></td>
                <td><button class="btn btn-primary" id="save" >ADD </button></td>
                <td><button class="btn btn-primary" id="delete" >Delete </button></td>
            </tr>

            </table>
                <div id="jqxgrid" ></div>
            </div>
    </div>

    <!--bottom tabbedGroup-->
    <div data-container="ReceivePanel">
            <div id="jqxgrid1"></div>
    </div>

</jqx-docking-layout>
        <div id="window">
            <div id="windowHeader">
                    <span>
                        Properties
                    </span>
            </div>
            <div id="splitter">
                <div style="overflow: hidden;">
                    <div style="border: none;" id="listbox">
                    </div>
                </div>
                <div style="overflow: hidden;" id="ContentPanel">
                </div>
            </div>
        </div>
</div>
</div>
</body>


js
angular.module('exampleApp')
    .controller('AppCtrl',['$scope', '$http','$interval', 'uiGridGroupingConstants','socket',  function($scope,$http,socket) {

        $scope.layout = [{
            type: 'layoutGroup',
            orientation: 'horizontal',
            items: [{
                    type: 'tabbedGroup',
                    width: 200,
                    items: [{
                        type: 'layoutPanel',
                        title: 'Symbol Explorer',
                        contentContainer: 'SymbolExplorerPanel'
                    }]
            }, {
                type: 'layoutGroup',
                orientation: 'vertical',
                width: 1000,
                items: [{
                    type: 'tabbedGroup',
                    height: 600,
                    minHeight: 200,
                    items: [{
                        type: 'layoutPanel',
                        title: 'CanServer',
                        contentContainer: 'CanPanel',
                        initContent: function(){
                            var source =
                            {
                                datatype: "array",
                                datafields: [
                                    { name: 'can_id', type: 'number' },
                                    { name: 'type', type: 'string' },
                                    { name: 'length', type: 'number' },
                                    { name: 'data', type: 'number' }
                                ],
                                pager: function (pagenum, pagesize, oldpagenum) {
                                    // callback called when a page or page size is changed.
                                }
                            };
                            var dataAdapter = new $.jqx.dataAdapter(source);
                            $("#jqxgrid").jqxGrid(
                                {
                                    width: '100%',
                                    source: dataAdapter,
                                    columnsresize: true,
                                    pageable: true,
                                    pagermode: 'default',
                                    sortable: true,
                                    //showfilterrow: true,
                                    filterable: true,
                                    groupable: true,
                                    selectionmode: 'checkbox',
                                    //theme: "shinyblack",
                                    columns: [
                                        { text: 'CAN_ID', datafield: 'can_id',  width: '20%' },
                                        { text: 'Type', datafield: 'type',  width: '25%' },
                                        { text: 'Length', datafield: 'length', width: '10%'},
                                        { text: 'Data', datafield: 'data',  width: '42%' }
                                    ]
                                });

                            $("#save").on('click', function () {
                                add();
                            });

                            $("#delete").on('click', function () {
                                var selectedrowindex = $("#jqxgrid").jqxGrid('getselectedrowindexes');
                                var rowIds = new Array();
                                for (var i = 0; i < selectedrowindex.length; i++) {
                                    var del_id = $('#jqxgrid').jqxGrid('getrowdata', selectedrowindex[i]).can_id;
                                    console.log(del_id);
                                    var currentId = $('#jqxgrid').jqxGrid('getrowid', selectedrowindex[i]);
                                    rowIds.push(currentId);
                                    del(del_id);
                                }
                                $('#jqxgrid').jqxGrid('deleterow', rowIds);
                                $('#jqxgrid').jqxGrid('clearselection');

                            });
                        }
                    }]
                }, {
                    type: 'tabbedGroup',
                    height: 400,
                    pinnedHeight: 30,
                    items: [{
                        type: 'layoutPanel',
                        title: 'Receive',
                        contentContainer: 'ReceivePanel',
                        initContent: function(){
                            var source =
                            {
                                datatype: "array",
                                datafields: [
                                    { name: 'can_id', type: 'number' },
                                    { name: 'type', type: 'string' },
                                    { name: 'length', type: 'number' },
                                    { name: 'data', type: 'number' }
                                ],
                                pager: function (pagenum, pagesize, oldpagenum) {
                                    // callback called when a page or page size is changed.
                                }
                            };
                            var dataAdapter = new $.jqx.dataAdapter(source);
                            $("#jqxgrid1").jqxGrid(
                                {
                                    width: '100%',
                                    source: dataAdapter,
                                    columnsresize: true,
                                    //pageable: true,
                                    //pagermode: 'default',
                                    sortable: true,
                                    filterable: true,
                                    groupable: true,
                                    selectionmode: 'checkbox',
                                    //theme: "shinyblack",
                                    columns: [
                                        { text: 'CAN_ID', datafield: 'can_id',  width: '20%' },
                                        { text: 'Type', datafield: 'type',  width: '25%' },
                                        { text: 'Length', datafield: 'length', width: '10%'},
                                        { text: 'Data', datafield: 'data',  width: '42%' }
                                    ]
                                });
                        }
                    }]
                }]
            }]
        }];

        $scope.settings = { width: 1200, height: 1000, layout: $scope.layout, theme: "ui-start"};


css

.sidebar {
  /*background-color: #000000;*/
  position: relative;
  top: -20px;
}

.jqx-docking-layout {
  position: relative;
  top: -20PX;
}

June 27, 2016 at 8:08 am angular material menu bar is behind grid's header #85434

Hristo

Participant

Hello shinhwap,

If you use 3rd party menu widget, then increase its z-index and its dropdowns z-index.

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

June 28, 2016 at 6:35 am angular material menu bar is behind grid's header #85462

shinhwap

Participant

Hi Hristo,

I had increased the z-index of md-menu, and it would not work if I didn’t set a value to jqx-docking-layout.

If I set a value to jqx-docking-layout, it will work but with another problem.

The float windows of jqx-docking-layout will not be able to dock back to layout because the z-index is upper than layout.

How can I solve this problem

work image

June 29, 2016 at 10:21 am angular material menu bar is behind grid's header #85488

Hristo

Participant

Hello shinhwap,

Do you have any error messages in the console?
Also please, check is this a correct setting of the z-index and on the right place.

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

Author

Posts

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.