Hi all,
is there a way to emualte by javascript the behavior of clicking Clear Button?
I tried to find out something, but I've only discovered how to rename this button, not something to call its method or something like that.
Thanks
Regards,
Flavio
Hi,
In order to clear selected item use $("#combo").igCombo("selectedIndex", -1);
Stanimir Todorov
This is not what I exactly meant.
I was already using $("#myComboId").igCombo("selectedIndex",-1), and you're right about cleaning text in the combo, but this action does not refill the list. I mean: if I select an item of the combo and then a do a selectedIndex=-1, text is cleaned. But if I re-click on the combo I can only see last selected item, an adding to this, no clean button anymore.
What I would like to know is just a way to emulate the clean button beahvior, because cleaning box with cleaning button brings combo to the original state.
Okay, I will check whether this is possible.
First, you need to unselect selectedItems:
$("#comboTargetDiv").igCombo("option", "selectedItems", [{index:-1}]);
And then remove active index:
$("#comboTargetDiv").igCombo("activeIndex", -1);
Do you need to open item list?
Yes, I need to open the item list, but not in automatica way: the user has to select it.
Problem is the same:
$("#comboTargetDiv").igCombo("option", "selectedItems", [{index:-1}]);$("#comboTargetDiv").igCombo("activeIndex", -1);
commands do the same old thing: combo text cleared, but if I then select the combo I can only see the last selected item in the list.I also tried with $("#comboTargetDiv").igCombo("selectedIndex", -1);, but the result is the same...
Thansk
I see grey selection on item in the list. Is this the problem?
If this is the problem set $("#comboTargetDiv").igCombo("option", "selectedItems", []);
No. Let me explain with soem images.
Following is the original status.
Then..
I hope with this code I will help you:
In JavaScript
//Combo Initialization $(".combo").igCombo({ width: "200px", textKey: "Name", valueKey: "ProductID", dataSource: adventureWorks, enableClearButton: false, dropDownOpening: function (evt, ui) { ui.owner.activeIndex(-1); ui.owner.selectedIndex(-1); } });
In HTML:
<div class="combo"></div> <div class="combo"></div> <div class="combo"></div>
Hello,
I was hoping the .selector would be some kind of "magic trick" that would address all the combo's on the screen (like maybe a css class that all combo's share and that the binding of the delegate would work on all instances). Seeing the ui as parameter in the functions made me believe so...
Too bad it can't work like that, since we have a LOT of combo's in our application and it will be a hastle setting including that script on all pages for every combo.
Maybe i'll need to do a foreach-type instruction that scans the dom for all igCombo elements...
I'll test the above code again in a clean project, as even with the "dropDownVisible", true (which i tried), i still had the same weird flashing behavior.
Maybe something else is interfering with this code...
Hi Michel,
function InfragisticsComboFix() {
$(document).delegate(".selector", "igcombodropdownopened", function(evt, ui) {ui.owner("option", "filteringType", "none");ui.owner("option", "filteringType", "local");});
}
I suppose the code doesn't work, because the DOM hasn't an element with the class .selector. We add the class .selector just to show to an user how to use it. In the first code snippet, you are set CORRECTLY the selector! Params evt and ui aren't used in the code, so you shouldn't really pass them to the function. Here is an example what I mean:
$(document).delegate("#Companies", "igcombodropdownopened", function () {$("#Companies").igCombo("option", "filteringType", "none");$("#Companies").igCombo("option", "filteringType", "local");});
Flavio example is great and I hope it helped you.
If you have any further questions, do not hesitate to ask.
Stanimir
tell me if I understood well.
First time the user select the drop down arrow all the item in the list will be displayed. The user selects the item he wants. Then, in a second time, the user re-presses drop down arrow, and what you would like to have is that the old selected item is going to be deleted, but at the same time the full list should be shown?
Is this right? If so, I think this code is what you're looking for:
$(document).delegate("#combo_codice_dest", "igcombodropdownopened", function (evt, ui) { if ($("#combo_codice_dest").igCombo("selectedIndex") != -1) { $("#combo_codice_dest").igCombo("option", "filteringType", "none"); $("#combo_codice_dest").igCombo("option", "filteringType", "local"); $("#combo_codice_dest").igCombo("dropDownVisible", true); } });
I don't know if this is the best way, probably not... Maybe Stanimir could say us this.
What does the code do? In this way you intercept the drop down event. If an item was already selected (if condition), then you will reset the combo without lose local filtering, and with the last instruction you will be able to re-show the full list. In the other case (no already selected item), nothing has to be done.
Probably you will have to do some adjustments.
Let us know if this solved your issue.
This gives me the weird behavior:
$(document).delegate("#Companies", "igcombodropdownopened", function (evt, ui) { $("#Companies").igCombo("option", "filteringType", "none"); $("#Companies").igCombo("option", "filteringType", "local"); });
evt & ui are not defined when running the above
This results in the event never being fired:
$(document).delegate(".selector", "igcombodropdownopened", function(evt, ui) { ui.owner("option", "filteringType", "none"); ui.owner("option", "filteringType", "local"); });
PS: I have no clue about what Stanimir posted (with function(null, ui)). Where would i need to add that?