RadComboBoxItem hide() on client-side not persisting

5 posts, 1 answers
  1. Llewellyn
    Llewellyn avatar
    11 posts
    Member since:
    Jun 2010

    Posted 17 Jul 2012 Link to this post

    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
  2. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 17 Jul 2012 Link to this post

    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.
  3. Llewellyn
    Llewellyn avatar
    11 posts
    Member since:
    Jun 2010

    Posted 18 Jul 2012 Link to this post

    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
  4. Answer
    Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 18 Jul 2012 Link to this post

    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.
  5. Llewellyn
    Llewellyn avatar
    11 posts
    Member since:
    Jun 2010

    Posted 20 Jul 2012 Link to this post

    Hi Princy,

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

    Cheers,
     Llewellyn
Back to Top