Problem with Load On Demand Multi Select Combo box Implementation

2 posts, 0 answers
  1. Jerry
    Jerry avatar
    16 posts
    Member since:
    Aug 2012

    Posted 11 Jun 2013 Link to this post

    HTML:
      <telerik:RadComboBox EnableScreenBoundaryDetection="false" ID="cbxSearch"
                        runat="server" AllowCustomText="True" EmptyMessage="" EnableLoadOnDemand="True"
                        EnableVirtualScrolling="True" Height="200px" HighlightTemplatedItems="True" MarkFirstMatch="False"
                        OnClientItemsRequesting="OnClientItemsRequesting" ShowMoreResultsBox="True" ShowToggleImage="False"
                        >
                        <HeaderTemplate>
                            <table id="Table1"  runat="server">
                                <tr>
                                    <td > </td> 
                                    <td"> Name </td>
                                    <td > FName</td>
                                    <td > LName </td>
                                </tr>
                            </table>
                        </HeaderTemplate>
                        <ItemTemplate>
                            <table style="width: 100%; text-align: left"  onclick="StopPropagation(event)">
                                <tr>
                                    <td style="width: 15px">
                                      <asp:CheckBox runat="server" ID="chk"  onclick="onCheckBoxClick(this)" />
                                    </td> 
                                    <td style="width: 75px">
                                        <%#DataBinder.Eval(Container.DataItem, "name")%>
                                    </td>
                                    <td style="width: 75px">
                                        <%#DataBinder.Eval(Container.DataItem, "fname")%>
                                    </td>
                                    <td style="width: 75px">
                                        <%#DataBinder.Eval(Container.DataItem, "lname")%>
                                    </td>
                                </tr>
                            </table>
                      </ItemTemplate>
                </telerik:RadComboBox>

    Server Side Code:

       Protected Sub cbxSearch_ItemsRequested(ByVal sender As Object, ByVal e As RadComboBoxItemsRequestedEventArgs RadComboBoxItemsRequestedEventArgs) Handles cbxSearch
    .ItemsRequested

      
                Dim lstUsers =  DatabaseCall(e.Text,  e.NumberOfItems + 1, e.NumberOfItems + 100)

                If lstUsers.Count < 100Then
                      e.EndOfItems = True
                Else
                      e.EndOfItems = False
                End If
             
                Try
                    cbxSearch.Datasource= lstUsers
                    cbxSearch.DataBind()
                Catch
                    e.Message = "No matches"
                End Try

            End Sub

      
            Protected Sub cbxSearch_ItemDataBound(ByVal sender As Object, ByVal e As RadComboBoxItemEventArgs) Handles cbxSearch.ItemDataBound
                e.Item.Text = (DirectCast(e.Item.DataItem, user)).name
                e.Item.Value = (DirectCast(e.Item.DataItem,user)).Id.ToString()
            End Sub
       
    Js:
       function onCheckBoxClick(chk) {
        var combo = $find(cbxSearch);
        var selectedItems = $("hdField");
        var text = "";
        var selectedIds = "";
        var items = combo.get_items();
        for (var i = 0; i < items.get_count(); i++) {
            var item = items.getItem(i);
            var chk = $get(combo.get_id() + "_i" + i + "_chk");
            if (chk.checked) {
                text += item.get_text() + ",";
                selectedIds += item.get_value() + ",";
            }
        }
        text = text.replace(/,$/, "");
        userinfoIds = selectedIds.replace(/,$/, "");
        combo.set_text(text);
        selectedItems.value = selectedIds;
    }

    With the help of this tutorial http://demos.telerik.com/aspnet-ajax/combobox/examples/functionality/templates/defaultcs.aspx

    I was able to build multi column multi select combobox with load on demand. 
    But i am facing a problem when I scroll down in the combobox to get next 100 items from the database, im able to bind next 100 items to combobox but the client Ids of checkboxes are same as previous 100 .
        var chk = $get(combo.get_id() + "_i" + i + "_chk");

    So im not able to figure out which items are selected.


    Any help will be appreciated.

    Thanks




  2. Jerry
    Jerry avatar
    16 posts
    Member since:
    Aug 2012
Back to Top