This is a migrated thread and some comments may be shown as answers.
Show RadComboBox with load on demand option and with check boxes
4 Answers 105 Views
This is a migrated thread and some comments may be shown as answers.
eugen100
Top achievements
Rank 1
eugen100 asked on 19 Jul 2012, 01:24 PM
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();
    }
  
  
  
}

4 Answers, 1 is accepted

Sort by
0
Dimitar Terziev
Telerik team
answered on 24 Jul 2012, 12:05 PM
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
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
0
Andreas Dahlén
Top achievements
Rank 1
answered on 12 Oct 2012, 09:22 AM
I have a similar problem. Have you solved it in the support case and can you share your solution?
0
eugen100
Top achievements
Rank 1
answered on 12 Oct 2012, 09:36 AM
Yes,the problem is solved and I could share the solution next week.
0
eugen100
Top achievements
Rank 1
answered on 22 Oct 2012, 05:44 AM
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);
        }
    }

Asked by
eugen100
Top achievements
Rank 1
Answers by
Dimitar Terziev
Telerik team
Andreas Dahlén
Top achievements
Rank 1
eugen100
Top achievements
Rank 1
Share this question
or