Prevent cell deselection

Question

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 · Answer

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 · Answer

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 · Answer

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