WebDropDown - Cannot clear selected item Client-Side

595

William Telford posted over 15 years ago

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?

959

Offline Dana Crosby posted over 13 years ago in reply to Alexander Todorov

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)
{

ScriptManager.RegisterStartupScript(this, this.GetType(), "ResetDropDown", "resetDropDown('" + WebDropDownChecker.ClientID + "');", true

);

function
resetDropDown(sControlID) {

debugger
;

var
dropDown1 = $get(sControlID);

var
dropDown2 = $find(sControlID);

//var dropDown = ???;

// Clear seleted item

var
item = dropDown.get_items().getItem(dropDown.get_selectedItemIndex());

if (item != null
) {
item.unselect();

item.inactivate();

}

// Set item 0 as selected

var
item = dropDown.get_items().getItem(0);

if (item != null
) {
item.select();

item.activate();

}

return false
;

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();"/>

function clearSelection() {

debugger;

var dropDown = $find('<%=WebDropDownChecker.ClientID%>');

// Clear seleted item

var item = dropDown.get_items().getItem(dropDown.get_selectedItemIndex());

if (item != null) {
item.unselect();

item.inactivate();

}

return false;
}
Cancel
Reply

Cancel
24671

Alexander Todorov posted over 15 years ago in reply to William Telford

Hi Will,

Yep, appears that this code was merged to Release a day after July's hotfix went out. I.e. it will be in the August one, which will be out in 1-2 weeks.

Thanks,

Angel
Cancel
Reply

Cancel
595

Offline William Telford posted over 15 years ago

Thanks, that worked on the ClientSide. That method definately is not on the WebDropDown. I am using release 2067.
Cancel
Reply

Cancel
24671

Alexander Todorov posted over 15 years ago in reply to William Telford

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,

Angel
Cancel
Reply

Cancel
595

Offline William Telford posted over 15 years ago in reply to Alexander Todorov

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.
Cancel
Reply

Cancel