search

vitmalina / w2ui

UI widgets for modern apps. Data table, forms, toolbars, sidebar, tabs, tooltips, popups. All under 120kb (gzipped).
http://w2ui.com
MIT License
2.66k stars 729 forks source link

bootstrap-multiselect inside toolbar.menu.html not overlaying in front of grid #1280

Open laalu opened 8 years ago

laalu commented 8 years ago

While including bootstrap-multiselect inside toolbar.menu.html, multi-select its not overlaying in front of grid .i have attach my html file in this mail please check and give me some fine reason why am not getting this.

How can i include bootstrap-multi-select inside toolbar.menu.html

this is my problem img1

What am expecting is this img2

    <link rel="stylesheet" type="text/css" href="http://w2ui.com/src/w2ui-1.4.min.css" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script type="text/javascript" src="http://w2ui.com/src/w2ui-1.4.min.js"></script>

    <link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css"
          rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.min.js"></script>
    <link href="http://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/css/bootstrap-multiselect.css"
          rel="stylesheet" type="text/css" />
    <script src="http://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/js/bootstrap-multiselect.js"
            type="text/javascript"></script>
<script type="text/javascript">
        $(function () {
            $('#lstFruits').multiselect({
                includeSelectAllOption: true
            });

        });
    </script>
<body>

  <div id="myGrid" style="height: 450px"></div>

 </body>
 <script>
$('#myGrid').w2grid({
    name: 'grid',
    header: 'List of Names',
    show: {
        toolbar: true,
        footer: true
    },
toolbar: {
        items: [
            { type: 'html', id: 'mul', html:'<select id="lstFruits" multiple="multiple"><option value="cheese">Cheese</option><option value="tomatoes">Tomatoes</option><option value="mozarella">Mozzarella</option><option value="mushrooms" >Mushrooms</option><option value="pepperoni" >Pepperoni</option><option value="onions">Onions</option></select>'}
        ],
        onClick: function (target, data) {
            console.log(target);
        }
    },
    columns: [
        { field: 'recid', caption: 'ID', size: '50px', sortable: true, attr: 'align=center' },
        { field: 'lname', caption: 'Last Name', size: '30%', sortable: true, resizable: true },
        { field: 'fname', caption: 'First Name', size: '30%', sortable: true, resizable: true },
        { field: 'email', caption: 'Email', size: '40%', resizable: true },
        { field: 'sdate', caption: 'Start Date', size: '120px', resizable: true },
    ],
    searches: [
        { field: 'lname', caption: 'Last Name', type: 'text' },
        { field: 'fname', caption: 'First Name', type: 'text' },
        { field: 'email', caption: 'Email', type: 'text' },
    ],
    sortData: [{ field: 'recid', direction: 'ASC' }],
    records: [
        { recid: 1, fname: 'John', lname: 'doe', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
        { recid: 2, fname: 'Stuart', lname: 'Motzart', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
        { recid: 3, fname: 'Jin', lname: 'Franson', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
        { recid: 4, fname: 'Susan', lname: 'Ottie', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
        { recid: 5, fname: 'Kelly', lname: 'Silver', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
        { recid: 6, fname: 'Francis', lname: 'Gatos', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
        { recid: 7, fname: 'Mark', lname: 'Welldo', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
        { recid: 8, fname: 'Thomas', lname: 'Bahh', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
        { recid: 9, fname: 'Sergei', lname: 'Rachmaninov', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
        { recid: 20, fname: 'Jill', lname: 'Doe', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
        { recid: 21, fname: 'Frank', lname: 'Motzart', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
        { recid: 22, fname: 'Peter', lname: 'Franson', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
        { recid: 23, fname: 'Andrew', lname: 'Ottie', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
        { recid: 24, fname: 'Manny', lname: 'Silver', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
        { recid: 25, fname: 'Ben', lname: 'Gatos', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
        { recid: 26, fname: 'Doer', lname: 'Welldo', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
        { recid: 27, fname: 'Shashi', lname: 'bahh', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
        { recid: 28, fname: 'Av', lname: 'Rachmaninov', email: 'jdoe@gmail.com', sdate: '4/3/2012' }
    ]
});
</script>
mpf82 commented 8 years ago

Here's 2 things you can try:

1) use the toolbar's refresh event to initialize your menu:

    toolbar: {
        onRefresh: function(event) {
            if(event.target === 'mul'){
                event.onComplete = function(ev){
                    $('#lstFruits').multiselect({
                        includeSelectAllOption: true
                    });
           ...

2) Give the bootstrap menu a higher z-index with CSS. You may have to inspect the element to see what class/id exactly has to be used as CSS selector.

laalu commented 8 years ago

@mpf82 as per you said i have done but still have same issue

mrg2001 commented 8 years ago

Have you considered using toolbar multi select feature. Here is a sample of the button object for toolbar

{  
   "id":"menucheck",
   "type":"menu-check",
   "text":"Menu: Check",
   "items":[  
      {  
         "id":"item1",
         "text":"First Item",
         "count":3,
         "icon":"fa-heart",
         "checked":false
      },
      {  
         "text":"--",
         "checked":false,
         "id":"--"
      },
      {  
         "id":"item2",
         "text":"Item 2",
         "icon":"fa-user",
         "count":12,
         "checked":true
      },
      {  
         "id":"item3",
         "text":"Item 3",
         "icon":"fa-star-empty",
         "hotkey":"⌘S",
         "checked":false
      },
      {  
         "text":"--",
         "checked":false,
         "id":"--"
      },
      {  
         "id":"item4",
         "text":"Item 4",
         "icon":"fa-link",
         "hotkey":"⌘W",
         "checked":true
      }
   ]
}