Multi selection of combo box items

1 posts, 0 answers
  1. Zain
    Zain avatar
    3 posts
    Member since:
    Jun 2018

    Posted 29 Aug 2018 Link to this post

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

     

     

Back to Top