Radcombo Multi Select and Load On Demand

[avarndel]

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

[Veselin Vasilev]

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.

[avarndel]

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>

[avarndel]

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

[Veselin Vasilev]

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.

[avarndel]

Thanks that worked Perfect!

How do I set which checkbox to have checked?

Annette

[Veselin Vasilev]

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.

[eitan]

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.

[avarndel]

Confirm that you have EnableViewState="True" on the page directive.

[eitan]

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

Thanks

Eitan.

[Vesko]

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

[Esther Nirmala]

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

[Yash]

Can anyone tell me how to implement the same functionality when using a WebService to implement loadonDemand??

[Kate]

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

[Yash]

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

regards
Yash

[Kalina]

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