Dropdown button does not close on selecting any item from list.

[Apeksha SinghParticipant]

Hi,

I want to close the dropdownbutton list after user select any item.

Also I can’t re-select any item from the list.

Please guide me regarding these issues as soon as possible.

 

Thanks & Regrads,

Apeksha

[MariyaParticipant]

Hi Apeksha,

Please provide us with an example.

Best Wishes,
Mariya

jQWidgets Team
http://www.jqwidgets.com

[Apeksha SinghParticipant]

Hi Mariya,

This is a simple code for jqxdropdownbutton that I am using :-

// Create a approvedropDownButton
$("#approve_dropdown").jqxDropDownButton({ width: 120, height: 25, theme: 'ui-redmond' });
$('#approvejqxTree').bind('select', function (event) {
	var args = event.args;
	var item = $('#approvejqxTree').jqxTree('getItem', args.element);
	var dropDownContent = '<div style="position: relative; margin-left: 3px; margin-top: 5px;">' + item.label + '</div>';
	$("#approve_dropdown").jqxDropDownButton('setContent', dropDownContent);
});
$("#approvejqxTree").jqxTree({ width: 200,height: 85,  theme: 'ui-start'});

And the HTML part is :-

<div id="approve_dropdown" style="float:right;width:14%;margin-right:3%;">
   <div id='approvejqxTree'>
      <ul>
	   <li item-selected='true'>Approve</li>
	   <li>Approve & add another</li>
      </ul>
  </div>
</div>

Whenever I click on the button the dropdown gets open ,but after selecting any item from it I want the dropdown should close by itself.
Also if one item is selected I open the dropdown and I found it selected ,if I click on it again not able to fire any event again.

Please guide me as soon as possible.

Thanks & Regards,
Apeksha

[MariyaParticipant]

Hi Apeksha Singh,

The jqxDropDownButton is not closing by itself when you click its content so in order to close it you should use the ‘close’ method. It depends on you how to use the method. You can call it when the jqxDropDownButton is clicked (as shown in our Demo) or when the content is clicked.
When you select the selected item for the second time it is normal not to be able to fire the same event because is has already been fired and nothing would change.

Best Wishes,
Mariya

jQWidgets Team
http://www.jqwidgets.com

[Apeksha SinghParticipant]

Hi Mariya,

But my requirement is to fire the same event again as I have two options “Approve” and “Approve & add another”. For second one I want to fire the same event any number of time ,then what should I do.

And also please provide me the code that close the dropdown when the content is clicked.

Thanks & Regards,
Apeksha

[MariyaParticipant]

Hi Apeksha Singh,

You may get the clicked Item’s Text by using the following code:

$("#jqxTree .jqx-item").mousedown(function (event) {
                var text = $(event.target).text();
            });

Best Wishes,
Mariya

jQWidgets Team
http://www.jqwidgets.com

[arkgroupParticipant]

I have similar problem. I want close dropdown when the content is clicked. I have this code, but close method does not close drop down:

    
$("#jqxgrid_details").on('rowselect', function (event) {
 var args = event.args;
 var row = $("#jqxgrid_details").jqxGrid('getrowdata', args.rowindex);
 var dropDownContent = '<div style="position: relative; margin-left: 3px; margin-top: 5px;">' + row['Name'] + ' ' + row['Login_Id'] + '</div>';
 $("#jqxdropdownbutton_details").jqxDropDownButton('setContent', dropDownContent);
 
 $("#jqxdropdownbutton_details").jqxDropDownButton('close');

 });

[Peter StoevKeymaster]

Hi arkgroup,

I suggest you to check your code for syntax or other errors. When “close” is called, the DropDownButton will be closed in any case. However, if you have syntax errors somewhere, the “close” may never be called in your code. See: http://jsfiddle.net/akav3buh/, where “close” is called dynamically when an item is clicked. The sample uses jQWidgets 4.0.0.

Best Regards,
Peter Stoev

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

[Author]

Posts