RadComboBoxItem hide() on client-side not persisting

[Llewellyn]

Hi There,

I'm busy implementing filtering of RadComboBox items from the client-side by calling the .hide() method of the combobox-item.
This results in the items I specify to be hidden from view for the user.

The problem I find is that once I click the Combo that was filtered and I click anywhere else on the html page, the items that I had set to be hidden become visible again.

Right now I think:

1. RadCombo is executing an event once the RadCombo is focused on (selected) and then looses focus. This event makes all the items visible again.
2. or I am not using the .hide() method correctly and require instructions for proper use,

Here is an extract of the relevant parts of the ASPX control and JS client-side method:

<telerik:RadComboBox ID="rcboProject" runat="server" AppendDataBoundItems="True"
  DataTextField="Name" DataValueField="ClientNameProjectID" DataSourceID="objProject" MarkFirstMatch="true" AllowCustomText="true" Filter="Contains"
  NoWrap="true">
  <Items>
    <telerik:RadComboBoxItem runat="server" Text="Non Project" Value="-1" />
  </Items>
</telerik:RadComboBox>

// this function is called from client side event such as a button click or perhaps even by the
// OnClientSelectedIndexChanged event of another combo box(obviously it would need event params in that case).
function FilterProjects() {

    // GetProjectCombo(index)
    var projectCombo = GetProjectCombo();

    // Get project combo items.
    var projectItems = projectCombo.get_items();

    projectCombo.trackChanges();
    // loop through, hide * projects except the top 10
    for (i = 0; i < projectItems._array.length; i++)
    {
       if (i < 10)
          continue;
        // Get Item, load its data.
        var item = projectItems.getItem(i);
        var itemValue = item.get_value();

        if (true) // simplified for Telerik support.
        {
            item.hide(); // works temporarily until clicking on html body then it reverts back to original state.
            //item.removeAt(i); // works and persists.
            //item.disable(); // works and persists.
        }
    }
    projectCombo.commitChanges();
}
function GetProjectCombo(index) {
    return $find("<%= rcboProject.ClientID %>");
}

Additional Information:
Telerik Controls Version: 2010.1.415.40


Your help would be greatly appreciated.

Best,
 Llewellyn

[Princy]

Hi,

Try the following code to achieve your scenario.

ASPX:

<telerik:RadComboBox ID="rcboProject" runat="server" AppendDataBoundItems="True" OnClientDropDownOpening="FilterProjects" DataTextField="FirstName" DataValueField="EmployeeID" DataSourceID="SqlDataSource1" MarkFirstMatch="true" AllowCustomText="true" Filter="Contains" NoWrap="true">
 <Items>
   <telerik:RadComboBoxItem runat="server" Text="Non Project" Value="-1" />
 </Items>
</telerik:RadComboBox>
<asp:Button ID="Button1" runat="server" OnClientClick="return OnClientClick()" />
<asp:HiddenField ID="HiddenField1" runat="server" Value="0" />

Javascript:

<script type="text/javascript">
 function FilterProjects()
 {
  var hidden = document.getElementById("HiddenField1");
  if (hidden.value == 0)
  {
   return;
  }
  var projectCombo = GetProjectCombo();
  // Get project combo items.
  var projectItems = projectCombo.get_items();
  projectCombo.trackChanges();
  // loop through, hide * projects except the top 10
  for (i = 0; i < projectItems._array.length; i++)
  {
   var item = projectItems.getItem(i);
   if (i > 10)
   {
    item.hide();
   }
  }
  projectCombo.commitChanges();
 }
 function GetProjectCombo(index)
 {
  return $find("<%= rcboProject.ClientID %>");
 }
 function OnClientClick()
 {
  var hidden = document.getElementById("HiddenField1");
  hidden.value = 1;
 }
</script>

Hope this helps.

Thanks,
Princy.

[Llewellyn]

Hi Princy, No that did not solve the issue. Thanks for trying though.
 
I see I need to explain this even more thoroughly.
Please find attached a working stand alone ASPX example that demonstrates the issue step by step.

Download TestRadComboItemHide.zip and extract TestRadComboItemHide.aspx.
Place this ASPX into a website/webapp project and run ensuring you have telerik installed on your computer.

Thanks,
 Llewellyn

[Princy]

Hi Llewellyn,

I added the same code to your page and it works as expected in my end.I added a hidden field to save the state (Whether button is clicked or not) and called your script on the OnClientDropDownOpening Event of Radcombobox. It filter the combobox items even after clicking anywhere else in the page.

ASPX:

<telerik:RadComboBox ID="rcboProject" runat="server" AppendDataBoundItems="True" MarkFirstMatch="true" AllowCustomText="true" Filter="Contains" NoWrap="true" OnClientDropDownOpening="FilterProjects">
  <Items>
    <telerik:RadComboBoxItem runat="server" Text="The top item" Value="-1" />
  </Items>
</telerik:RadComboBox>
<!-- Hidden Field to check the state (whether the button is clicked or not.) -->
<asp:HiddenField ID="HiddenField1" runat="server" Value="0" />
<!-- button for testing the filtering of radcombobox items by hiding all except the first item.  -->
<input type="button" onclick="OnClientClick();" Value="Filter RadCombo" />

Javascript:

<script type="text/javascript">
 function FilterProjects()
 {
  var hidden = document.getElementById("HiddenField1");
  if (hidden.value == 0)
  {
     return;
  }
  var projectCombo = GetProjectCombo();
  // Get project combo items.
  var projectItems = projectCombo.get_items();
  projectCombo.trackChanges();

  // Loop through, hide * projects except the first drop down item.
  for (i = 0; i < projectItems._array.length; i++)
  {
      var item = projectItems.getItem(i);

       if (i > 0)
       {
        item.hide();
       }
  }
  projectCombo.commitChanges();
}

 function GetProjectCombo(index)
 {
  return $find("rcboProject");
 }
 function OnClientClick()
 {
  var hidden = document.getElementById("HiddenField1");
  hidden.value = 1;
 }
</script>

Thanks,
Princy.

[Llewellyn]

Hi Princy,

Thanks, your solution provides a work around to the problem I was experiencing

Cheers,
 Llewellyn