Radcombo Multi Select and Load On Demand

16 posts, 1 answers
  1. avarndel
    avarndel avatar
    107 posts
    Member since:
    May 2007

    Posted 08 Aug 2008 Link to this post

    I am using the multi select in a Radcombobox from the code library.  Because the list is really long (800 +) enteries, I would also like to implement the Load on Demand.  How can I accomplish this?

    Thanks,
    Av

  2. Veselin Vasilev
    Admin
    Veselin Vasilev avatar
    2992 posts

    Posted 11 Aug 2008 Link to this post

    Hello avarndel,

    Please find attached a sample project demonstrating how to achieve this.
    Download it and give it a try.

    I hope this helps.

    Regards,
    Veskoni
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. avarndel
    avarndel avatar
    107 posts
    Member since:
    May 2007

    Posted 11 Aug 2008 Link to this post

    If I change the Onclick of the checkbox, then I can't run the multi-select code.  Because the mulit-select is slowing down my page, I only want the user to see 5-10 names at a time.  Notice I'm using a Stored Procedure to populate the dropdown.


    Here is my code:

    <script type="text/javascript">

    var supressDropDownClosing = false;

    function OnClientDropDownClosing(sender, eventArgs)

    {

    eventArgs.set_cancel(supressDropDownClosing);

    }

    function OnClientSelectedIndexChanging(sender, eventArgs)

    {

    eventArgs.set_cancel(supressDropDownClosing);

    }

    function OnClientDropDownOpening(sender, eventArgs)

    {

    supressDropDownClosing =

    true;

    }

    function OnClientBlur(sender)

    {

    supressDropDownClosing =

    false;

    sender.toggleDropDown();

    }

    function getItemCheckBox(item)

    {

    //Get the 'div' representing the current RadComboBox Item.

    var itemDiv = item.get_element();

    //Get the collection of all 'input' elements in the 'div' (which are contained in the Item).

    var inputs = itemDiv.getElementsByTagName("input");

    for (var inputIndex = 0; inputIndex < inputs.length; inputIndex++)

    {

    var input = inputs[inputIndex];

    //Check the type of the current 'input' element.

    if (input.type == "checkbox")

    {

    return input;

    }

    }

    return null;

    }

    //---------------------------Admin Assistant

    function checkboxClick()

    {

    collectSelectedItems();

    }

    function collectSelectedItems()

    {

    var combo = $find("<%= ddlAdminAssistant.ClientID %>");

    var items = combo.get_items();

    var selectedItemsTexts = "";

    var selectedItemsValues = "";

    var itemsCount = items.get_count();

    for (var itemIndex = 0; itemIndex < itemsCount; itemIndex++)

    {

    var item = items.getItem(itemIndex);

    var checkbox = getItemCheckBox(item);

    //Check whether the Item's CheckBox) is checked.

    if (checkbox.checked)

    {

    selectedItemsTexts += item.get_text() +

    ", ";

    selectedItemsValues += item.get_value() +

    ", ";

    }

    }

    selectedItemsTexts = selectedItemsTexts.substring(0, selectedItemsTexts.length - 2);

    selectedItemsValues = selectedItemsValues.substring(0, selectedItemsValues.length - 2);

    //Set the text of the RadComboBox with the texts of the selected Items, separated by ','.

    combo.set_text(selectedItemsTexts);

    //Set the comboValue hidden field value with values of the selected Items, separated by ','.

    document.getElementById(

    "<%= comboValue.ClientID %>").value = selectedItemsValues;

    //Clear the selection that RadComboBox has made internally.

    if (selectedItemsValues == "")

    {

    combo.clearSelection();

    }

    }


    <

    div>

    <input id="comboValue" runat="server" type="hidden" value="" /><telerik:RadComboBox ID="ddlAdminAssistant"

    runat="server" AllowCustomText="True" DataSourceID="sdsAssistants" DataTextField="UserName" DataValueField="UserID"

    Height="100px" HighlightTemplatedItems="True" OnClientBlur="OnClientBlur" OnClientDropDownClosing="OnClientDropDownClosing"

    OnClientDropDownOpening="OnClientDropDownOpening" OnClientSelectedIndexChanging="OnClientSelectedIndexChanging"

    EnableLoadOnDemand="True" ShowMoreResultsBox="True" OnItemsRequested="ddlAdminAssistant_ItemsRequested" EnableVirtualScrolling="true">

    <CollapseAnimation Duration="200" Type="OutQuint" />

    <ItemTemplate>

    <asp:CheckBox ID="CheckBox" runat="server" onclick="checkboxClick();" Text='<%# DataBinder.Eval(Container, "Text") %>' /></ItemTemplate>

    </telerik:RadComboBox>

    </div>

  5. avarndel
    avarndel avatar
    107 posts
    Member since:
    May 2007

    Posted 13 Aug 2008 Link to this post

    Can't I use the datasource/Sp that is already attached to the ComboBox? I'm not sure how to implement it when the datasource is a stored Procedure. 

    thx

  6. Answer
    Veselin Vasilev
    Admin
    Veselin Vasilev avatar
    2992 posts

    Posted 14 Aug 2008 Link to this post

    Hi avarndel,

    I guess when you click on a checkbox the dropdown is closing. To prevent this and leave the dropdown opened you need to add the following code to the checkboxClick method:

    function checkboxClick(e) 
        e.cancelBubble = true
        if (e.stopPropagation) 
        { 
            e.stopPropagation(); 
        } 
     
      collectSelectedItems(); 

    Make sure you send the event variable to the method as well:

    <asp:CheckBox ID="CheckBox" runat="server" onclick="checkboxClick(event);" ... 

    I have modified my project so now it uses SqlDataSource and a Stored Procedure for selecting the items.
    Please download it and give it a try.
    Note that it requires SQL Express Server to attach the database. There is a stored procedure called "Mail_GetName"  which selects the Name column from the Mail table.

    Sincerely yours,
    Veskoni
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  7. avarndel
    avarndel avatar
    107 posts
    Member since:
    May 2007

    Posted 19 Aug 2008 Link to this post

    Thanks that worked Perfect!

    How do I set which checkbox to have checked?

    Annette
  8. Veselin Vasilev
    Admin
    Veselin Vasilev avatar
    2992 posts

    Posted 22 Aug 2008 Link to this post

    Hi avarndel,

    I am afraid I could not understand your question.

    You can get the checked items in the following way:

            Label1.Text = "Currently checked items: <br />";  
     
            foreach (RadComboBoxItem item in RadComboBox1.Items)  
            {  
                CheckBox chk = item.FindControl("CheckBox1"as CheckBox;  
                if (chk.Checked)  
                {  
                    Label1.Text += item.Text + "<br />";  
                }  
            } 

    I hope that this is what you asked for.

    Greetings,
    Veskoni
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  9. eitan
    eitan avatar
    5 posts
    Member since:
    Apr 2008

    Posted 14 Sep 2009 Link to this post

    Hi there!
    it seems that when working with the Radcombobox in "LoadOnDemand'" and "multi select " checkbox template, the items in the combo in all postback clears.

    example:

     protected void RadComboBox1_SelectedIndexChanged(object o, RadComboBoxSelectedIndexChangedEventArgs e)
        {
            foreach (RadComboBoxItem item in this.RadComboBox1.Items)
            {
                CheckBox checkBox = (CheckBox)item.FindControl("CheckBox");

                if (checkBox.Checked)
                {
                    checkedItems.Add(item.Text);
                }
            }
            

        }

    the .RadComboBox1.Items is 0.

    any idea??

    Thanks

    Eitan.

  10. avarndel
    avarndel avatar
    107 posts
    Member since:
    May 2007

    Posted 14 Sep 2009 Link to this post

    Confirm that you have EnableViewState="True" on the page directive.
  11. eitan
    eitan avatar
    5 posts
    Member since:
    Apr 2008

    Posted 15 Sep 2009 Link to this post

    Hi
    Is there a way to bypass this issue without enabling the viewstate?
    My app requires that the page is without viewstate.

    Thanks

    Eitan.
  12. Vesko
    Vesko avatar
    122 posts
    Member since:
    Mar 2009

    Posted 17 Sep 2009 Link to this post

    The items are not accessible on the server when EnableLoadOnDemand is True. That is why the RadComboBox1.Items is null.

    http://www.telerik.com/help/aspnet-ajax/load-on-demand-access-items-server-side.html
  13. Esther Nirmala
    Esther Nirmala avatar
    19 posts
    Member since:
    Apr 2010

    Posted 27 Apr 2010 Link to this post

    Hi,

        AM creating the rad combo with check box dynamically from code behind.. If i click the combo item its displaying the item text.. I dont want that as i set the the empty text "Select One" to retain even if i click the item or check the check box.. if i check the check box it doesnot change the empty message.. if i click the item (which is label here) its displaying the  item as selected.. even if i simply use check box also its happening if i click outside the checkbox that is on text.. how to solve this.. soln..?

    thanks
    nimmi
  14. Yash
    Yash avatar
    27 posts
    Member since:
    Sep 2010

    Posted 19 May 2011 Link to this post

    Can anyone tell me how to implement the same functionality when using a WebService to implement loadonDemand??
  15. Kate
    Admin
    Kate avatar
    1898 posts

    Posted 24 May 2011 Link to this post

    Hi Yash,

    Did you take a look at our online demo that explains fully how to implement Web Service load on demand? Please take a look at it and let me know if this complies with your scenario or if I am missing something. 

    Greetings,
    Kate
    the Telerik team

    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

  16. Yash
    Yash avatar
    27 posts
    Member since:
    Sep 2010

    Posted 24 May 2011 Link to this post

    Yes I implemented the load On Demand functionality. But how is multiselect enabled in there??

    regards
    Yash
  17. Kalina
    Admin
    Kalina avatar
    918 posts

    Posted 26 May 2011 Link to this post

    Hi Yash,

    As I understand – you want to implement RadComboBox with LoadOnDemand via Web Service and implement a multi select scenario. Usually this scenario can be created using the control ItemTemplate – as is demonstrated here.

    I am afraid that the server-side Templates are not supported when you use a Web Service to populate RadComboBox with data.
    However you can use both LoadOnDemand and Templates at the same time - please take a look at this example.

    Greetings,
    Kalina
    the Telerik team

    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

Back to Top
UI for ASP.NET Ajax is Ready for VS 2017