Error: Could not resolve <mx:columns> to a component implementation

I am running into an issue with this error in my flash web application compile time

Error: Could not resolve <mx:columns> to a component implementation.

Here is what used to be there (and it would compile)

<?xml version="1.0" encoding="utf-8"?>
<mx:Box xmlns:mx="http://www.adobe.com/2006/mxml" verticalScrollPolicy="auto">
<mx:AdvancedDataGrid id="myDataGrid" 
            width="100%"
            showHeaders="false" 
            includeInLayout="{myDataGrid.visible}"
            defaultLeafIcon="{null}"
            horizontalGridLines="true"
            verticalGridLines="true"
            horizontalGridLineColor="#E4E4E4"
            verticalGridLineColor="#E4E4E4"
            rowCount="6"
            minHeight="94"
            variableRowHeight="true"
            selectable="false"
            >  

    <mx:columns>
        <mx:AdvancedDataGridColumn  dataField="Property" headerText="Property" backgroundColor="#E5EFF5" width="0.5" wordWrap="true"/>
        <mx:AdvancedDataGridColumn  dataField="Value" headerText="Value" backgroundColor="white" width="0.5" itemRenderer="MyCustomRenderer"/>
        <mx:AdvancedDataGridColumn  dataField="RowIdentifier" visible="false"/>
    </mx:columns> 
</mx:AdvancedDataGrid> 
</mx:Box>

Now I want to change it to the following

//In ActionScript
package widgets
{
import mx.controls.AdvancedDataGrid;

public class CustomAdvancedDataGrid extends AdvancedDataGrid
{
    public function CustomAdvancedDataGrid()
    {
    }

    override protected function measure():void
    {
        super.measure();
        if(this.dataProvider != null && this.dataProvider.length > 0)
        {
            this.measuredHeight = this.measureHeightOfItems(0, dataProvider.length);
        }
    }
}
}


// In Modified mxml to use the subclass
<?xml version="1.0" encoding="utf-8"?>
<mx:Box xmlns:mx="http://www.adobe.com/2006/mxml" 
    xmlns:customWidgets="widgets.*"
    verticalScrollPolicy="auto">
<customWidgets:CustomAdvancedDataGrid id="myDataGrid" 
            width="100%"
            showHeaders="false" 
            includeInLayout="{myDataGrid.visible}"
            defaultLeafIcon="{null}"
            horizontalGridLines="true"
            verticalGridLines="true"
            horizontalGridLineColor="#E4E4E4"
            verticalGridLineColor="#E4E4E4"
            rowCount="6"
            minHeight="94"
            variableRowHeight="true"
            selectable="false"
            >  

    <mx:columns>
        <mx:AdvancedDataGridColumn  dataField="Property" headerText="Property" backgroundColor="#E5EFF5" width="0.5" wordWrap="true"/>
        <mx:AdvancedDataGridColumn  dataField="Value" headerText="Value" backgroundColor="white" width="0.5" itemRenderer="MyCustomRenderer"/>
        <mx:AdvancedDataGridColumn  dataField="RowIdentifier" visible="false"/>
    </mx:columns> 
</customWidgets:CustomAdvancedDataGrid> 
</mx:Box>

I have added mx.swc to the Flex compiler path as suggested in another stackoverflow link but that did not help.

Any help is appreciated.

Since your subclass of AdvancedDataGrid is in a different namespace, the columns member needs to be in the same namespace:

<customWidgets:CustomAdvancedDataGrid ...>
    <customWidgets:columns>
        <mx:AdvancedDataGridColumn ...>
    </customWidgets:columns>
</customWidgets:CustomAdvanceDataGrid>