Need a control that will load on demand on click and allow multi select

[Richard]

Hi 

I have the following requirements and I am trying to get some telerik control to work but it seems I cannot achieve all the requirements.

I need a multi-select control. I do not want to load the data on page load for performance reasons. When the user clicks on the dropdown that is when I want to load all items and show it to the user. It does not require client filtering but if it works then its a bonus.

The user then selects the multiple options and a button is pressed. In the postback I need to pick up the options that were selected. 

I have tried the RadCombobox but if you use LOD then checkboxes are not supported. I tried using itemtemplate with a checkbox in it but I was not able to pick up the selected checkboxes after postback and the selections are not perserved after postback either. I have seen an example of this but the js function it uses needs the clientid of the radcombobox. I do not have this available at the right time in the page lifecycle. It is too complicated to get this because I am rendering these controls programmatically and dynamically.

I have tried to make this to work with radautocompletebox however I have a box where I have to type before I see the options. This is not acceptable for my requirements. When the user clicks on the autocomplete control I need to show them all options available. Then once they select and press the button I need them persisted and need to be able to pick them up in the post back.

Please advise if these controls can be made to meet my requirments or if you have another control that can achieve this? To summarise:

It must Load on Demand when the control is clicked

It must allow multi select

I must be able to pick up the selections in server side postback.

[Richard]

Can someone help please?

[Peter Milchev]

Hello Richard, 

This can be achieved by using the OnDataSourceSelect event along with the approach suggested in AutoCompleteBox to remain with open dropdown to allow multiselection.

<script>
    function OnClientLoad(sender, args) {
        $telerik.$(sender.get_inputElement()).on("focus", function (e) {
            sender._requestItems("ShowAllRecords", true)
        })

        //https://www.telerik.com/support/kb/aspnet-ajax/autocompletebox/details/autocompletebox-to-remain-with-open-dropdown-to-allow-multiselection
        // http://api.jquery.com/off/
        $telerik.$(sender._dropDown.get_itemsContainer()).off("click").on("click", function (e) {
            sender._dropDown._onDropDownClick(e);

            // reposition the Dropdown if the input is resized
            setTimeout(function () {
                sender._dropDown._dropDown.reflow();
            }, 50);

            // the default code that closed the Dropdown when an item is clicked
            //that.close();
        })
    }
</script>

<telerik:RadAutoCompleteBox HighlightFirstMatch="false" OnDataSourceSelect="RadAutoCompleteBox1_DataSourceSelect"
    ID="RadAutoCompleteBox1" OnClientLoad="OnClientLoad" runat="server">
</telerik:RadAutoCompleteBox>

protected void Page_Init(object sender, EventArgs e)
{
    if (IsCallback)
    {
        RadAutoCompleteBox1.DataSource = "";
        RadAutoCompleteBox1.DataTextField = "Name";
        RadAutoCompleteBox1.DataValueField = "ID";
    }
}

private DataTable GetDataSource()
{
    DataTable dataTable = new DataTable();

    dataTable.Columns.Add(new DataColumn("ID", typeof(int)));
    dataTable.Columns.Add(new DataColumn("Name", typeof(string)));
    dataTable.Columns.Add(new DataColumn("CustomField", typeof(string)));

    dataTable.PrimaryKey = new DataColumn[1] { dataTable.Columns["ID"] };

    for (int i = 0; i <= 10; i++)
    {
        dataTable.Rows.Add(i, "Name #" + i, "Custom Field #" + i);
    }

    return dataTable;
}

protected void RadAutoCompleteBox1_DataSourceSelect(object sender, Telerik.Web.UI.AutoCompleteBoxDataSourceSelectEventArgs e)
{
    var autocompleteBox = sender as RadAutoCompleteBox;
    DataTable ds = GetDataSource();
    if (e.FilterString == "ShowAllRecords")
    {
        autocompleteBox.DataSource = ds;// filtered.CopyToDataTable();
    }
    else
    {
        DataTable filtered = ds.AsEnumerable().Where(x => x["Name"].ToString().ToLower().Contains(e.FilterString.ToLower())).CopyToDataTable();
        autocompleteBox.DataSource = filtered;// filtered.CopyToDataTable();
    }
}

Regards,
Peter Milchev
Progress Telerik

[Peter Milchev]

Just a quick follow-up. 

We have created a KB article where we further improved the show all records functionality so that it does not trigger a request for all items when you click on an item in the dropdown - Show all records when focusing the input element of AutoCompleteBox.

Regards,
Peter Milchev
Progress Telerik

[Richard]

Thank you for this solution.

I can get it to work mostly however I wanted to check two things please.

First of all as I was debugging the code I notice that the datasourceselect method keeps on getting hit repeatedly when I click on the dropdown (to get the items). Its just non-stop. Not sure why this is the case.

Secondly, ideally I want the user to click on the dropdown to request the options. After that if they click I dont want to keep repeating the process of getting items again and again by making a server side postback. I would still like the autocomplete part to work i.e. if I type it filters the relevant options (without making a server side postback).

So just to summarise this when I first load the page I want no options to be loaded. Once the user focuses on the radautocomplete control I want a server side request made to get all options. After that I dont want this to happen. If the user then clicks on the input and types something then I want that to result in filtering the already loaded options. Is this possible?

[Peter Milchev]

Hello Richard,

I would like to clarify that the AutoCompleteBox does a Callback instead of Postback, which is much lighter. You can also use the IsCallback property to retrieve the data only when requested. 

Another option I can suggest you consider is Client Filtering: 

• Client Filtering documentation;
• Client Filtering demo;

When using a WebService or OData binding, the request for the data is fired after the page is loaded. For the WebService binding, the OnClientLoad should be as follows: 

<script>
    function OnClientLoad(sender, args) {
        var dropDown = sender._dropDown;
        // fire a request for all records when focusing the input
        $telerik.$(sender.get_inputElement()).on("focus", function (e) {
            var showAllRecords = true;
            console.log("focused");

            if (!sender.__isAddingEntry) {
                dropDown.filterItems("", true);
                dropDown.open(sender._getDropDownPositionInfo())
            }
            sender.__isAddingEntry = false;
        });

        // prevent request fired when clicking an item of the dropdown
        sender.__isAddingEntry = false;
        $telerik.$(sender.get_dropDownElement()).find(".racList").on("mousedown", function () {
            sender.__isAddingEntry = true;
        });
    }
</script>

Regards,
Peter Milchev
Progress Telerik