I've got the following code for clearing the selections and resetting the WebDropDown server side:
foreach (Infragistics.Web.UI.ListControls.DropDownItem item in WebDropDown1.Items) { if (item.Selected) { item.Selected = false; } }
this.WebDropDown1.CurrentValue = "Please select...";
This works, although is very complex considering there should be an easy way to do this... i.e. WebDropDown1.SelectedIndex = -1 like a normal WinForm control. Even WebDropDown1.SelectedItems.Clear() would be better.
I'm now trying to do the same thing Client-Side. This is the code I have that doesn't work:
function Reset() { var dropDown = $find('<%=WebDropDown1.ClientID %>'); var selectedList = dropDown.get_selectedItems(); for (var i = 0; i< selectedList.length; i++) { selectedList[i].set_selected(false); } dropDown.set_currentValue("Please select...", false); }
How can this be done client-side?
Hi,
On the server you canjust call WebDropDown1.ClearSelection() - that should be working fine with the latest service release. This method was present before but was not part of the public API.
As for the client-side, it's probably working fine , I suppose the issue is that you are not visually seeing any difference in terms of selected vs. not selected item. That's because set_selected only updates the item's state, but not its CSS class. If you want the CSS and everything (visually) to update as well, you can use the select() function on the item:
selectedList[i].select() or selectedList[i].unselect()
That should do it. In case you have multiple checkbox selection, it will also automatically check / uncheck the item's checkbox.
Hope it helps, and thanks for your feedback,
Angel
ClearSelection() is not a method within the WebDropDown. Using unselect() client-side does not solve my issue either. I am not using CheckBoxes, all I want to do is to be able to return the WebDropDown to it's Initial State client-side. I.e. when the user first goes to the page it says "Please wait..". I then want to be able to reset it after a user has selected an item in the list. I.e. similar to the way you can call ComboBox.SelectedIndex = -1; on a standard MS Control.
Hi Will,
Which version are you using? If you use the latest service release, i am sure you will be able to use this method.
About client-side selection: Apart from selection there is also the concept of Activation. This is when you navigate with teh keyboard, or click an item with the mouse, it becomes active as well as selected. Active should be thought as "Focused". So the item is actually unselected, but since it has active style applied to it, visually appears as if it is "selected":
Try this code and i am sure everything will work fine in your scenario:
<script type="text/javascript">
function clearSelection() {
var dropDown = $find("WebDropDown1");
var item = dropDown.get_items().getItem(dropDown.get_selectedItemIndex());
if (item != null) {
item.unselect();
item.inactivate();
// optionally, clear input text
// dropDown.set_currentValue("",true);
}
return false;
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager runat="server"></asp:ScriptManager>
<ig:WebDropDown ID="WebDropDown1" runat="server" Width="200px">
<Items>
<ig:DropDownItem Text="Item 1"></ig:DropDownItem>
<ig:DropDownItem Text="Item 2"></ig:DropDownItem>
<ig:DropDownItem Text="Item 3"></ig:DropDownItem>
<ig:DropDownItem Text="Item 4"></ig:DropDownItem>
<ig:DropDownItem Text="Item 5"></ig:DropDownItem>
<ig:DropDownItem Text="Item 6"></ig:DropDownItem>
</Items>
</ig:WebDropDown>
<asp:Button runat="server" UseSubmitBehavior="false" OnClientClick="clearSelection(); return false;" Text="Clear selection from client" />
If you want to disable activation, you can cancel the ActivationChanging client-side event:
<ClientEvents ActivationChanging="cancelActivation" />
and the handler:
function cancelActivation(sender, args) {
args.set_cancel(true);
This will not apply any additional active style to the item.
Hope it helps,
I'm trying to trigger a similar JavaScript from code-behind without success. I have the JavaScript in my master page and I want to pass the control's ClientID so I can re-use the logic...and I need to trigger it based on server-side logic. The problem is $find always returns null; however, $get works but I'm not able to access the "items" using $get.
<asp:Button ID="Button1" runat="server" Text="CodeBehind" onclick="ButtonSubmit_ClickTest"/>
protected void ButtonSubmit_ClickTest(object sender, EventArgs e)
{
);
resetDropDown(sControlID) {
;
dropDown1 = $get(sControlID);
dropDown2 = $find(sControlID);
//var dropDown = ???;
// Clear seleted item
item = dropDown.get_items().getItem(dropDown.get_selectedItemIndex());
) {
// Set item 0 as selected
item = dropDown.get_items().getItem(0);
item.select();
item.activate();
When I call a JavaScript using OnClientClick then $find works. Note I'm not passing ClientID in this case but I've already validated the ClientID is passed properly from code-behind in the above non-working example.
<asp:Button ID="Button2" runat="server" Text="JavaScript" OnClientClick="clearSelection();"/>
debugger;
var dropDown = $find('<%=WebDropDownChecker.ClientID%>');