Hi
We have implemented a Multi column, Multi selection Rad Combobox with Radgrid as itemtemplate, we able to create multiple selection effect by clicking on grid rows area (not using check box column for selection) and able to persist selection on filtering and sorting, the issue we face is selection text doesn’t appear on combobox header on first time selection without using checkbox (clicking on row), however its working fine on 2nd, 3rd click.
ASPX code:
<telerik:RadComboBox ID="cmbUser" runat="server" Width="180px" Height="200px" DropDownWidth="180px"
EmptyMessage="Please select..." OnClientDropDownClosing="OnEmployeeDropdownClosing" AutoPostBack="true">
<ItemTemplate>
<div style="max-height: 200px; overflow: auto;">
<telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server" LoadingPanelID="RadAjaxLoadingPanel1" >
<asp:Button ID="btnHidden" ClientIDMode="Static" runat="server" Style="display: none;" CausesValidation="false" />
<telerik:RadGrid ID="rGrdUsers4DDL" runat="server" AllowSorting="True" AutoGenerateColumns="False"
AllowMultiRowSelection="true" AllowFilteringByColumn="true"
CellSpacing="0" GridLines="None" OnNeedDataSource="rGrdUsers4DDL_NeedDataSource"
Width="180px" ClientSettings-EnableRowHoverStyle="True">
<ClientSettings>
<Selecting AllowRowSelect="true" EnableDragToSelectRows="true" UseClientSelectColumnOnly="false" ></Selecting>
</ClientSettings>
<GroupingSettings CaseSensitive="false" />
<MasterTableView DataKeyNames="UserID,FullDesc,EmployeeID,Firstname" ClientDataKeyNames="UserID,FullDesc,EmployeeID,Firstname">
<CommandItemSettings ExportToPdfText="Export
to PDF"></CommandItemSettings>
<RowIndicatorColumn Visible="True" FilterControlAltText="Filter RowIndicator column">
<HeaderStyle Width="20px"></HeaderStyle>
</RowIndicatorColumn>
<ExpandCollapseColumn Visible="True" FilterControlAltText="Filter ExpandColumn column">
<HeaderStyle Width="20px"></HeaderStyle>
</ExpandCollapseColumn>
<Columns>
<telerik:GridClientSelectColumn UniqueName="SelectColumn" ></telerik:GridClientSelectColumn>
<telerik:GridBoundColumn DataField="UserID" Visible="false" FilterControlAltText="Filter
column column"
HeaderText="User ID" UniqueName="column">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="EmployeeID" FilterControlAltText="Filter column1 column" CurrentFilterFunction="Contains" FilterDelay="3000" ShowFilterIcon="false"
HeaderText="Employee Code" UniqueName="column1" AutoPostBackOnFilter="false">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="Firstname" FilterControlAltText="Filter column2 column" CurrentFilterFunction="Contains" FilterDelay="3000" AutoPostBackOnFilter="false" ShowFilterIcon="false"
HeaderText="Firstname" UniqueName="column2">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="Lastname" FilterControlAltText="Filter column3 column" CurrentFilterFunction="Contains" FilterDelay="3000" AutoPostBackOnFilter="false" ShowFilterIcon="false"
HeaderText="Lastname" UniqueName="column3">
</telerik:GridBoundColumn>
</Columns>
<EditFormSettings>
<EditColumn FilterControlAltText="Filter
EditCommandColumn column">
</EditColumn>
</EditFormSettings>
</MasterTableView>
<ClientSettings>
<ClientEvents OnGridCreated="OnddlEmployeeGridCreated" OnRowCreated="OnddlEmployeeRowCreated"
OnRowDeselected="OnddlEmployeeRowDeSelected" OnRowSelected="OnddlEmployeeRowSelected"
OnRowClick="OnddlEmployeeRowClick"></ClientEvents>
</ClientSettings>
<FilterMenu EnableImageSprites="False">
</FilterMenu>
</telerik:RadGrid>
</telerik:RadAjaxPanel>
<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" IsSticky="true" />
</div>
</ItemTemplate>
<Items>
<telerik:RadComboBoxItem runat="server" Text=""></telerik:RadComboBoxItem>
</Items>
</telerik:RadComboBox>
Java script functions:
var clickedItemIndex;
var selected;
var chkbxClicked;
var PersistSelctionArray = {};
function OnddlEmployeeGridCreated(sender, eventArgs) {
//alert('grid
created');
//To
create array selected length of dataitems
selected = new Array(sender.get_masterTableView().get_dataItems().length);
//To
set the select all checkbox with respect to the selected dataitems
var masterTable = sender.get_masterTableView();
var selectColumn = masterTable.getColumnByUniqueName("SelectColumn");
var headerCheckBox = $(selectColumn.get_element()).find("[type=checkbox]")[0];
if (headerCheckBox) {
headerCheckBox.checked =
masterTable.get_selectedItems().length ==
masterTable.get_dataItems().length;
}
}
function ClearSelection() {
PersistSelctionArray = {};
}
function OnddlEmployeeRowClick(sender, args) {
//alert('Row
clicked');
var master = sender.get_masterTableView();
var index = args.get_itemIndexHierarchical();
selected[index] =
master.get_dataItems()[index].get_selected()
clickedItemIndex = index;
//alert(selected[index]);
//master.get_dataItems()[index].set_selected(!master.get_dataItems()[index].get_selected());
}
function OnddlEmployeeRowSelected(sender, args) {
//alert('Row
Selected');
var e = args.get_domEvent();
//IE
- srcElement, Others - target
var targetElement = e.srcElement || e.target;
if (typeof (targetElement) != "undefined") {
//is the clicked element an input checkbox? <input
type="checkbox"...>
if (targetElement.tagName.toLowerCase() != "input" &&
(!targetElement.type ||
targetElement.type.toLowerCase() != "checkbox"))// &&
currentClickEvent)
{
chkbxClicked = false;
}
else {
chkbxClicked = true;
}
}
else {
//args.set_cancel(true);
}
//alert('chkbxClicked='
+ chkbxClicked);
var index = args.get_itemIndexHierarchical();
var UserID = args.getDataKeyValue("UserID");
if (!chkbxClicked) {
//alert("row clicked=" + selected[index]);
if (clickedItemIndex == index
&& selected[index]) {
//args.set_cancel(true);
args.get_gridDataItem().set_selected(false);
}
else {
//To keep record of selection state
if (!PersistSelctionArray[UserID]) {
//alert('saved index=' + index);
PersistSelctionArray[UserID]
= true;
}
}
}
else {
//To keep record of selection state
if (!PersistSelctionArray[UserID]) {
//alert('saved index=' + index);
PersistSelctionArray[UserID] = true;
}
}
//To
set the selected text
var grid = $find(sender.ClientID);
var MasterTable = grid.get_masterTableView();
var selectedRows = MasterTable.get_selectedItems();
//alert(selectedRows.length);
var headerValues = '';
for (var i = 0; i < selectedRows.length; i++) {
var row = selectedRows[i];
var cell =
MasterTable.getCellByColumnUniqueName(row, "column1")
if (headerValues != '')
headerValues =
headerValues + ',';
headerValues = headerValues
+ cell.textContent;
}
var combo = $find(sender.ClientID.replace('_i0_rGrdUsers4DDL', ''));
//alert('header
values='+headerValues);
combo.set_text(headerValues);
//combo.commitChanges();
//$('#btnHidden').click();
//alert(combo.get_text());
}
function OnddlEmployeeRowDeSelected(sender, args) {
//alert('Row
DeSelected');
var e = args.get_domEvent();
//IE
- srcElement, Others - target
var targetElement = e.srcElement || e.target;
if (typeof (targetElement) != "undefined") {
//is the clicked element an input checkbox? <input
type="checkbox"...>
if (targetElement.tagName.toLowerCase() != "input" &&
(!targetElement.type ||
targetElement.type.toLowerCase() != "checkbox"))// &&
currentClickEvent)
{
chkbxClicked = false;
}
else {
chkbxClicked = true;
}
}
else {
//args.set_cancel(true);
}
//alert('chkbxClicked='
+ chkbxClicked);
var index = args.get_itemIndexHierarchical();
var UserID = args.getDataKeyValue("UserID");
if (!chkbxClicked) {
if (clickedItemIndex != index)
{
//args.set_cancel(true);
//alert('clickedItemIndex=' + clickedItemIndex + ' index='
+ index)
args.get_gridDataItem().set_selected(true);
}
else {
//To keep record of selection state
if (PersistSelctionArray[UserID]) {
//alert('Removed index=' + index);
PersistSelctionArray[UserID] = false;
}
}
}
else {
//To keep record of selection state
if (PersistSelctionArray[UserID]) {
//alert('Removed
index=' + index);
PersistSelctionArray[UserID] = false;
}
}
//To
set the selected text
var grid = $find(sender.ClientID);
var MasterTable = grid.get_masterTableView();
var selectedRows = MasterTable.get_selectedItems();
var headerValues = '';
for (var i = 0; i < selectedRows.length; i++) {
var row = selectedRows[i];
var cell =
MasterTable.getCellByColumnUniqueName(row, "column1")
if (headerValues != '')
headerValues =
headerValues + ',';
headerValues = headerValues
+ cell.textContent;
}
var combo = $find(sender.ClientID.replace('_i0_rGrdUsers4DDL', ''));
combo.set_text(headerValues);
}
function OnddlEmployeeRowCreated(sender, args) {
//var
index = args.get_itemIndexHierarchical();
var UserID = args.getDataKeyValue("UserID");
if (PersistSelctionArray[UserID]) {
args.get_gridDataItem().set_selected(true);
}
}
function OnEmployeeDropdownClosing(sender, args) {
var e = args.get_domEvent();
//IE
- srcElement, Others - target
var targetElement = e.srcElement || e.target;
if (typeof (targetElement) != "undefined") {
if (targetElement.tagName.toLowerCase() == "td")// &&
currentClickEvent)
{
if (clickedItemIndex>-1) {
args.set_cancel(true);
}
}
}
else {
//args.set_cancel(true);
}
clickedItemIndex = -1;
}