Sticky Multiselect without holding Ctrl key

[David]

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?

[Konstantin Dikov]

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

 

 

[David]

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.

[Konstantin Dikov]

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

 

 

[David]

Thank you Konstantin, that was exactly what I needed!