This is a migrated thread and some comments may be shown as answers.

Sticky Multiselect without holding Ctrl key

4 Answers 60 Views
Grid
This is a migrated thread and some comments may be shown as answers.
David
Top achievements
Rank 1
David asked on 18 Sep 2014, 06:30 PM
I am using the RadGrid to present information which must be multiselected before a button is pressed for processing.  I am able to replicate the functionality I am looking for from the RadGrid by holding the Ctrl button down and selecting/deselecting only the cells I want.  But I need to be able to configure the grid to handle this without my holding the Ctrl button down on the client-side.

I tried overriding the OnCellSelecting event under ClientEvents and using the following code:

<script type="text/javascript">
    function cellSelecting(sender, args) {
 
        var selects = sender._selectedCellsIndexes;
        var selectedColumn = args.get_column();
        var dataItem = args.get_gridDataItem();
        var cellName = dataItem.get_itemIndexHierarchical() + "&" + selectedColumn.get_uniqueName();
        var output = String.format(cellName);
        var index = -1;
        for (var i = selects.length - 1; i >= 0; i--) {
            if (selects[i] === cellName) {
                index = i;
            }
        }
        console.log(dataItem);
        if (index == -1)
        {
            selects.push(cellName);
        }
        else
        {
            selects.splice(index, 1);
            dataItem._selected = false;     
        }
        selectedColumn.set_selected(dataItem.get_itemIndexHierarchical());
        //sender.set_selected(selects);
        selectedColumn.set_selected(selects);
        console.log(sender);
        console.log(selects);
       // args.set_cancel(true);
        //alert(output)
    }
</script>

The problem is when args.set_cancel(true) I can modify the selection array, but it doesn't complete the selection process and display the selections on the grid.  And when I have args.set_cancel(false) it overrides my efforts and replaces the selection with a single cell selection.  How can I make this work?

4 Answers, 1 is accepted

Sort by
0
Konstantin Dikov
Telerik team
answered on 23 Sep 2014, 09:53 AM
Hi David,

For achieving such behavior you could handle the client-side OnRowClick and OnRowDeselecting event of the grid and perform some custom logic for preventing the deselection of previously selected items (when the Ctrl key is not pressed). 

For your convenience, following is the JavaScript logic behind those two event, which will get the desired behavior:
<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
    <script type="text/javascript">
        var targetSelectItem;
 
        function rowClick(sender, args) {
            targetSelectItem = args.get_gridDataItem();
            if (targetSelectItem.get_selected()) {
                setTimeout(function () {
                    targetSelectItem.set_selected(false);
                })
            }
        }
 
        function rowDeselecting(sender, args) {
            if (args.get_gridDataItem().get_itemIndexHierarchical() != targetSelectItem.get_itemIndexHierarchical()) {
 
                args.set_cancel(true);
            }
        }
    </script>
</telerik:RadCodeBlock>
 
<telerik:RadGrid runat="server" ID="RadGrid1" OnNeedDataSource="RadGrid1_NeedDataSource" AllowMultiRowSelection="true">
    <ClientSettings>
        <Selecting AllowRowSelect="true" />
        <ClientEvents OnRowDeselecting="rowDeselecting" OnRowClick="rowClick" />
    </ClientSettings>
</telerik:RadGrid>

Hope this helps.


Regards,
Konstantin Dikov
Telerik
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
David
Top achievements
Rank 1
answered on 26 Sep 2014, 07:14 PM
I cannot use this particular code because it deals with row selection.  I am working with individual cell selection, which is possible with RadGrid since I can do it with Ctrl + Clicking.  Can you provide a function that I can use to set the select status of an individual cell?  I think I can work it out from there if I can only find a client-side function that lets me toggle the individual selection status of a cell.
0
Accepted
Konstantin Dikov
Telerik team
answered on 30 Sep 2014, 08:40 AM
Hello David,

It was really a mistake on my end for overlooking the selection and the fact that you were handling OnCellSelecting event of the grid.

For your convenience, following is the modified logic for allowing multi-cell selection without holding the Ctrl key:
<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
    <script type="text/javascript">
        var preventDeselect = true;
 
        function cellDeselecting(sender, args) {
            if (preventDeselect) {
                args.set_cancel(true);
            } else {
                preventDeselect = true;
            }
        }
 
        function cellSelecting(sender, args) {
            var targetCell = args.get_gridDataItem().get_cell(args.get_column().get_uniqueName());
            if (targetCell.className.indexOf("rgSelectedCell") >= 0) {
                preventDeselect = false;
                sender._cellSelection.deselect(targetCell);
                args.set_cancel(true);
            }
        }
    </script>
</telerik:RadCodeBlock>
 
<telerik:RadGrid runat="server" ID="RadGrid1" OnNeedDataSource="RadGrid1_NeedDataSource">
    <ClientSettings>
        <Selecting CellSelectionMode="MultiCell" />
        <ClientEvents OnCellDeselecting="cellDeselecting" OnCellSelecting="cellSelecting" />
    </ClientSettings>
</telerik:RadGrid>

Please let me know if everything works as expected.


Regards,
Konstantin Dikov
Telerik
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
David
Top achievements
Rank 1
answered on 30 Sep 2014, 05:17 PM
Thank you Konstantin, that was exactly what I needed!
Tags
Grid
Asked by
David
Top achievements
Rank 1
Answers by
Konstantin Dikov
Telerik team
David
Top achievements
Rank 1
Share this question
or