Show RadComboBox with load on demand option and with check boxes

[eugen100]

Hi,
my client wants to see a combobox where he could write patterns of items while list of all items containing the pattern is decreased.
At the same time he wants that the items will be shown with check boxes so at the end of operation he could check several of them.
I have learned all examples that you show in your demo projects but did not find exactly what I want. Particularly I tried to use CheckBoxes property but then I found in http://www.telerik.com/help/aspnet-ajax/combobox-usability-checkboxes.html that
"Load On Demand functionality is not supported".  Really when I tried this option with empty list of RadComboBoxItems the application stopped to react.
Also I tried to use template based on ideas from http://www.telerik.com/community/forums/aspnet-ajax/combobox/add-item-template-to-radcombobox-dynamically.aspx
But I use handler of ItemsRequested  event. I succeeded to show a combo with check boxes whose number of items is decreased when an user inserts some text. But when I let to combo to be closed and then tried to open it I get an error: The state information is invalid for this page and might be corrupted.
I add some code then I use.
So the question: is it possible to realize the above task?
  Thank you
Evgeny

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using Telerik.Web.UI;
using System.Data;


public partial class TestPages_TestComboCheckBoxes : System.Web.UI.Page
{

    protected void Page_Init(object sender, EventArgs e)
    {
        //this is name of combo
        rcbMitkanKav.ItemTemplate = new ItemTemplate();
    }
    protected void Page_Load(object sender, EventArgs e)
    {

        if (!IsPostBack)
            LoadData();
    }

    protected void rcbMitkanKav_ItemsRequested(object sender, Telerik.Web.UI.RadComboBoxItemsRequestedEventArgs e)
    {
        DataTable dtMitkanimKavim = new DataTable();
        const string MethodName = "SearchPopWindow.rcbMitkanKav_ItemsRequested";


        int UserErrorCode = 6;
        try
        {
            string sComboText = e.Text;
            //pattern to search
            string sSearchLetter = "";
            if (sComboText == "")
            {
                sSearchLetter = "";
            }
            if (sComboText != "")
            {
                sSearchLetter = sComboText;
            }

            try
            {
                if (sSearchLetter.Length < 3)
                    return;
                int queryId = 1;
                dtMitkanimKavim = GetSearchResultByWord(sSearchLetter, queryId);
                int itemsPerRequest = 30;
                int itemOffset = e.NumberOfItems;
                int endOffset = itemOffset + itemsPerRequest;
                if (endOffset > dtMitkanimKavim.Rows.Count)
                {
                    endOffset = dtMitkanimKavim.Rows.Count;
                }
                if (endOffset == dtMitkanimKavim.Rows.Count)
                {
                    e.EndOfItems = true;
                }
                else
                {
                    e.EndOfItems = false;
                }



                rcbMitkanKav.DataSource = dtMitkanimKavim;
                rcbMitkanKav.DataBind();




            }
            catch
            {
                e.Message = "אין רשומות";
            }
        }
        catch (Exception ex)
        {
            throw ex;
        }
    }



    private void LoadData()
    {
        try
        {
            ///here code to load data from database int a table and save it in Session

        }
        catch (Exception ex)
        {
            throw ex;
        }
    }

    /// <summary>
    ///
    /// </summary>
    /// <param name="sSearchWord">curren input</param>
    /// <param name="queryId"></param>
    /// <returns></returns>
    public DataTable GetSearchResultByWord(string sSearchWord, int queryId)
    {
        DataTable dt = new DataTable();
        //build new datable is contain two columns
        dt.Columns.Add("ComboValue");
        dt.Columns.Add("ComboText");


        DataRow newRow = null;
        string currentValue = string.Empty;
        ///array of rows from a table according to current input sSearchWord
        DataRow[] drSelected = null;
        ///replace "'" to sql select
        if (sSearchWord.Contains("'"))
            sSearchWord = sSearchWord.Replace("'", "''");
        try
        {
            drSelected = SessionManager.dtMitkanimKavim.Select("NameReferenceId LIKE '" + "%" + sSearchWord + "%" + "'") as DataRow[];
            //add array to new datable
            foreach (DataRow row in drSelected)
            {

                dt.Rows.Add(row);
            }
        }
        catch (Exception ex)
        {

            throw ex;
        }
        return dt;
    }






}
class ItemTemplate : ITemplate
{

    public void InstantiateIn(Control container)
    {

        CheckBox chk = new CheckBox();
        //chk.ID = "chk1";
        chk.Attributes.Add("onclick", "SetCheckedStateToServer()");


        Label lbl = new Label();



        Table table = new Table();
        TableRow mainRow = new TableRow();

        TableCell cell1 = new TableCell();
        cell1.Controls.Add(chk);
        cell1.DataBinding += new EventHandler(cell1_DataBinding);
        mainRow.Cells.Add(cell1);

        TableCell cell2 = new TableCell();
        cell2.Controls.Add(lbl);
        cell2.DataBinding += new EventHandler(cell2_DataBinding);
        mainRow.Cells.Add(cell2);

        table.Rows.Add(mainRow);

        container.Controls.Add(table);
    }

    private void cell1_DataBinding(object sender, EventArgs e)
    {

        TableCell target = (TableCell)sender;

        (target.Controls[0] as CheckBox).Checked = true;
    }

    private void cell2_DataBinding(object sender, EventArgs e)
    {
        TableCell target = (TableCell)sender;
        RadComboBoxItem item = (RadComboBoxItem)target.BindingContainer;

        (target.Controls[0] as Label).Text =
            ((DataRowView)(item.DataItem)).Row[1].ToString();
    }



}

[Dimitar Terziev]

Hi,

Since you have opened a support ticket regarding the same problem my suggestion is to continue the discussing there and after the issue is resolved we could share our findings here.

Kind regards,
Dimitar Terziev
the Telerik team

[Andreas Dahlén]

I have a similar problem. Have you solved it in the support case and can you share your solution?

[eugen100]

Yes,the problem is solved and I could share the solution next week.

[eugen100]

I give a full description of the solution. So. we have a RadComboBox rcbMitkanKavMultiSelfor example and
my client wants to see a combobox where he could write patterns of items while list of all items containing the pattern is decreased.
At the same time he wants that the items will be shown with check boxes so at the end of operation he could check several of them
1. The following properties should be defined for the combo:

                                                      AllowCustomText="True"
                                            MarkFirstMatch="False"
                                            ShowMoreResultsBox="True"
                                            EnableLoadOnDemand="True"
                                            EnableVirtualScrolling="True"
                                            EmptyMessage="your message"
                                            LoadingMessage="your message"
                                            AutoPostBack="false"
                                            onitemsrequested="rcbMitkanKav_ItemsRequested"

Also the combo contains the following template :

            <ItemTemplate>
   <div>
            <input type="checkbox" id="checkBox1"
               value="<%# Eval("ComboValue") %>" />
                <label id="label1"  >
               <%# Eval("ComboText") %></label>
      </div>
</ItemTemplate>

3. On server side:

protected void rcbMitkanKav_ItemsRequested(object sender, Telerik.Web.UI.RadComboBoxItemsRequestedEventArgs e)
    {
          int minPatternLength = 3;
            RadComboBox combo = sender as RadComboBox;
            OnItemRequestedHandler(combo,  minPatternLength, e);
    }
  private void OnItemRequestedHandler(RadComboBox rcb,  int minPatternLength, Telerik.Web.UI.RadComboBoxItemsRequestedEventArgs e)
    {
        DataTable dtBaseTable = null;
        string sComboText = e.Text;
        //pattern to search
        string sSearchLetter = "";
        if (sComboText == "")
        {
            sSearchLetter = "";
        }
        if (sComboText != "")
        {
            sSearchLetter = sComboText;
        }

         if (sSearchLetter.Length < minPatternLength)
                return;

            dtBaseTable = GetSearchResultByWord(sSearchLetter);
            int itemsPerRequest = 30;
            int itemOffset = e.NumberOfItems;
            int endOffset = itemOffset + itemsPerRequest;
            if (endOffset > dtBaseTable.Rows.Count)
            {
                endOffset = dtBaseTable.Rows.Count;
            }
            if (endOffset == dtBaseTable.Rows.Count)
            {
                e.EndOfItems = true;
            }
            else
            {
                e.EndOfItems = false;
            }
            rcb.Items.Clear();
             rcb.DataSource = dtBaseTable;
               rcb.DataBind();


    }

where in method GetSearchResultByWord we build a table with columns

dt.Columns.Add("ComboValue");
           dt.Columns.Add("ComboText");

and fill it according pattern

string

 

 

sSearchWord

 

So in client we get a combo with rows according to the pattern and with check boxes.
4. Processing of client choice
An user can check several check boxes and to push on a button "Do" to pass it choice to the server. How I realize this:
On user's click on the button the following function is called:

function btnGetComboState_ClientClick(comboName) {
    var combo;
    switch (comboName) {
        case "rcbMitkanKavMultiSel":
            combo = $find("<%= rcbMitkanKavMultiSel.ClientID %>");
            GetCheckedValuesFromCombo(combo);
            break;
        case "rcbConsumerNameMultiSel":
            combo = $find("<%= rcbConsumerNameMultiSel.ClientID %>");
            //GetCheckedValuesFromCombo(combo);
            GetCheckedValuesAndTextsFromCombo(combo);
            break;

    }

where

//Input: a combo whose items contain a check box
///Each checkbox could be checked and has a value
///this method find all checked checkboxes and for each such checkbox
/// adds is value to an array values
//Then this array is passed to server side where it is received
///as a string that contains all element of the array separated by comma
function GetCheckedValuesFromCombo(combo) {
    var items = combo.get_items();
    var values = new Array();
    var checked_counter = 0;
    for (var i = 0; i < items._array.length; i++) {

        var checkbox = items._array[i]._element.all[0].all[0];
        if (checkbox.checked) {
            values[checked_counter] = checkbox.value ;
            checked_counter++;
        }
    }

    var ajaxManager = $find("<%= RadAjaxManager1.ClientID %>");

    ajaxManager.ajaxRequest(values);
    //return values;
}

function GetCheckedValuesAndTextsFromCombo(combo) {
    var items = combo.get_items();
    var values = new Array();
    var checked_counter = 0;

    for (var i = 0; i < items._array.length; i++) {

        var checkbox = items._array[i]._element.all[0].all[0];
        if (checkbox.checked) {
            //replace all comma by # because text caould contain commas
            var oldPattern = ",";
            var newPattern = "#";
            var txt = ReplaceAll(items._array[i]._element.innerText, oldPattern, newPattern);
            values[checked_counter] = checkbox.value + "*" + txt;
            checked_counter++;
        }
    }

    var ajaxManager = $find("<%= RadAjaxManager1.ClientID %>");

    ajaxManager.ajaxRequest(values);
    //return values;
}

function ReplaceAll(input, oldPattern, newPattern) {

    var newstring = input.split(oldPattern).join(newPattern)
    return newstring;
}

5.On server side:

public void RadAjaxManager1_AjaxRequest(object sender, AjaxRequestEventArgs e)
    {
                ProcessMultiSelectSearch(e.Argument);
    }

private void ProcessMultiSelectSearch(string selectedItems)
    {
        string oldPattern = "#";
        string newPattern = ",";
        string[] argument = selectedItems.Split(',');
            ReplaceAll(ref argument, oldPattern, newPattern);
 foreach (string item in argument)
                    {
                        MitkanType = item.Split('$')[1].ToString();
                        MitkanId = item.Split('$')[0].ToString();
   //then process it
  }
}


private void ReplaceAll(ref string[] input, string oldPattern, string newPattern)
    {
        for (int i = 0; i < input.Length; i++)
        {
            input[i]=input[i].Replace(oldPattern, newPattern);
        }
    }