Prevent cell deselection

[Joe]

Hi all, 

I'm using the Data Grid in cell selection mode. I want to disable a cell from deselecting if it is already selected and I click on it. Is this possible? I just want it to stay selected whenever it is clicked. 

Thanks,

Joe

[Sujith Kumar Rajkumar]

Hi Joe, 

 

Greetings from Syncfusion support. 

 

You can achieve your requirement of preventing the selected cells from getting deselected by cancelling the cell de-selection in the cellDeselecting event as demonstrated in the below code snippet, 

 

// Grid’s cellDeselecting event function 

cellDeselecting(args) { 

        // Cancels the cell de-selection 

        args.cancel = true; 

} 

 

We have prepared a sample based on this for your reference. You can download it from the below link, 

 

Sample: https://www.syncfusion.com/downloads/support/forum/153662/ze/GridPreventDeselection840078848  

 

API link: https://ej2.syncfusion.com/vue/documentation/api/grid/#celldeselecting 

 

Please get back to us if you require any further assistance. 

 

Regards, 

Sujith R 

[Joe]

Hi, 

Thanks for the response.

I tried the method you provided initially - however that doesn’t solve my problem. Doing that will prevent all cells from deselecting. I only want to prevent the cell from deselecting if it is already selected and I click it. Essentially right now the cell behaves like a toggle and deselects if I click it again, but I want to avoid having a cell deselected. 

I’m basically trying to get the data grid cells to behave like the spreadsheet. 

Hopfully that makese sense.

[Sujith Kumar Rajkumar]

Hi Joe, 

 

From your query we could see that you would like to have excel like behavior for de-selection of cells. You can achieve this by binding click event to the Grid to store the target element and cancel the cell de-selection only if the stored target element and the de-selecting cell are the same. This is demonstrated in the below code snippet, 

 

methods: { 

        // Grid’s load event function 

        onLoad() { 

            this.$refs.gridObj.ej2Instances.element.addEventListener('click', this.mouseClick.bind(this)); 

        }, 

        mouseClick(e) { 

            // Target element is stored 

            this.targetEle = e.target; 

        }, 

        cellDeselecting(args) { 

            // Cell de-selection is cancelled only if target element and de-selecting cell element are the same 

            if (this.targetEle == args.cells[0]) { 

                args.cancel = true; 

            } 

        } 

} 

 

Modified sample for your reference, 

 

Sample: https://www.syncfusion.com/downloads/support/forum/153662/ze/GridUpdatedSample1944730212  

 

Let us know if you have any concerns. 

 

Regards, 

Sujith R