New post
Question
· Apr 26, 2016

How to close a dropdown list after selection, and also how to set the selected value on top of the list with ZEN MOJO Bootstrap

#ZEN #Caché

I would like to know how to close a dropdown list after selection, and also how to set the selected value to the list first to be displayed.

I can get the value by clicking the dropdown but not back to the initial state and also does not display the selected


Thanks

Discussion (7)0
Log in or sign up to continue
Alexandre Marques · Apr 26, 2016

I'm trying to select a value from the drop down and display the selected value when the dropdown close, as if the same behavior of a select / option in html. I tried to use the select / option HTML5 plugin but does not work in chrome only in firefox the onselect event.

{type:'$dropdown',value:'=[listaOpcao]',right:true,id:'dropdown', key:'listOpcao',children:[
                 {type:'$dropdownMenuItem',content:'=[uninome]', key:'nome', id:'nome',value:'=[uninome]'}
 ]}

0 0
Stefan Wittmann · Apr 27, 2016

You are on the right path. Zen Mojo 1.1.0 prevented the drop-down menu from closing because we did not bubble up the event. We addressed this issue in Zen Mojo 1.1.1.

Make sure to upgrade to the latest version of Zen Mojo. You have to return false in your onselect event handler to allow the event to bubble up which will automatically close the drop-down menu after the user selected an item. 

0 0
Alexandre Marques · Apr 27, 2016

Thanks for helping me.

I checked the version to Zen Mojo and is in 1.1.1.
w ## Class (% ZEN.Dojo.Utils) .GetZenMojo Version ()
1.1.1

I put the return false, but it did not work.
below the onselect method:

ClientMethod onselect(key, value, docViewId) [ Language = javascript ]
{  
    console.log('select '+key);    
     var view = zen(docViewId);
     var realKey = key.split(':')[0];
     
     switch(realKey) {

    case 'nome':
         
    var nome = view.getItemByKey(key).$getValue();

   return false;
         
     break;

}

0 0
Fabio Goncalves · Apr 27, 2016

Hi Alexandre,

I have tested the following and it worked as mentioned above.

Layout object:

 {type:'$containerFluid',children:[
     {type:'$dropdown',id:'dropdown',key:'drop1',buttonGroup:true,content:'Default ',children:[
         {type:'$dropdownMenuItem',content:'Action',value:'Action',key:'action'},
         {type:'$dropdownMenuItem',content:'Another action',value:'Another action',key:'another-action'},
         {type:'$dropdownMenuItem',content:'Something else here',value:'Something else here',key:'something-else-here'},
         {type:'$dropdownMenuItem',divider:true},
         {type:'$dropdownMenuItem',content:'A separated link',value:'A separated link'}
     ]},
]}

on your "onselect" javascript method you can add:

 case 'action': 
    var selText = $('#dropdownbutton').text();
    var value = mainView.getItemByKey(key).$getValue();

    $('#dropdownButton .content').html(value+' <span class="caret"></span>');
    $('#dropdownMenu').dropdown('toggle');;
    break;

Results:

Can you please try this?

Thanks.

Fábio.

1 0