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
<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