Simple DataGrid with Row Background Update

On the Adobe Flex forum, a question was asked about changing the background color for a row to a different color if the user selected it and hit the DELETE key. So, I updated the Simple Data Grid to include this feature. It doesn’t delete the row, but changes the background color to grey.

The first step is to capture the keyboard action. To do this, a listener has to be created and set to listen for a KeyBoard event. I set it for the stage, but doing so requires that the function is called when applicationComplete instead of earlier. An alternative would be to set it to FlexGlobals.topLevelApplication, either way works.

// Add keyboard listener
stage.addEventListener(KeyboardEvent.KEY_DOWN, keyHandler);

After you point the listener to your handler, you will need to make the handler look for the key or key press. In my example, I am only looking for the DELETE key, but you can look for any Keyboard key. And you can also check to see if things like the “shift”, “alt” or the “capsLock” is activated when the key is pressed. After the function determines that the key pressed is DELETE, then it updates the ArrayCollection object to set the “isDeleted” value to true. I modified my original data object to include the “isDeleted” boolean value, which I default to false.

private function keyHandler(event:KeyboardEvent):void {
	// Handles the keyboard even
	// If the keyboard event is DELETE
	if(event.keyCode == Keyboard.DELETE) {
		debugTxt.text += " \n Key was DELETE";
		debugTxt.text += " \n keyCode = " +  event.keyCode + "/" + event.charCode;
		// If an item on the grid has been selected and isn't the header row
		if(myDataGrid.selectedIndex >= 0) {
			debugTxt.text += " \n Grid Index =  " +  myDataGrid.selectedIndex;
			// Set the object to isDeleted
			var tmpObject:Object = new Object();
			tmpObject = myDataGrid.selectedItem;
			tmpObject["isDeleted"] = true;

			var itemFoundAt:int = myArrayCollection.getItemIndex(myDataGrid.selectedItem);
			if(itemFoundAt != - 1) {
				myArrayCollection.setItemAt(tmpObject, itemFoundAt);
			}

		} else {
			debugTxt.text += " \n Grid not selected ";
		}

	} else {
		debugTxt.text += " \n " + event.keyCode + "/" + event.charCode;
	}
}

After the data is updated, then a physical change needs to take place to the DataGrid to show this change. As in the earlier example, I used an itemRenderer, but I added it to the DataGrid and not to the individual columns. This renderer simply checks the data value for “isDeleted” and sets the alpha and color for the column accordingly. Instead of setting the backgroundColor of the label, the renderer creates a rectangle as the background and the color fill and alpha values are set. I set the alpha to 0 for the false option, because this will allow the alternating rows to continue with the color displayed.

override public function prepare(hasBeenRecycled:Boolean):void {
	if(data != null) {
		if(data["isDeleted"]) {
			bgColor.color = 0xcccccc;
			bgColor.alpha = 1;
		} else {
			bgColor.alpha = 0.0;
		}
		lblData.text = data[column.dataField];
	} else {
		return;
	}
}

What I haven’t done is the final step to delete the rows highlighted for deletion. This would simply be a function to go through the ArrayCollection and find the isDeleted == true objects and then remove them. I also added the debug text area to show the key listener results.

Select a row and then hit the DELETE key on your keyboard.

View Source