Hey Pradeep, I've done this very thing using the date field as a cell renderer, so it is possible, but I did it using a subclass of the DataGrid instead of event listeners. Using event listeners instead is an interesting approach, and if you can get it to work, would be superior to using a subclass.
One thing to try: There is a boolean isCellEditor that the DataGrid looks for in a cell renderer to decide if it should create a TextInput cell editor or not. Try including a line like: var isCellEditor : Boolean = true; Using the subclassed datagrid approach, I've already posted some sample code that does this with a combo box instead of a date field. Check out the following message: http://groups.yahoo.com/group/flexcoders/message/14768. E-mail me off list if you want the code for the Date Field cell renderer. Jim On 5/17/05, Pradeep <[EMAIL PROTECTED]> wrote: > I am trying to use a Custom Date Cell Renderer which goes in edit mode > only when cell gains focus on it. Otherwise a label displays formatted > Date value. > > Following is the code for the DateRenderer :- > > import mx.core.UIComponent > import mx.core.UIObject > import mx.controls.DateField > import mx.controls.Label > import mx.controls.Alert > import mx.formatters.DateFormatter > > class common.control.DateRenderer extends UIComponent{ > var dateObj:DateField; > var label:Label; > var dateFormat: DateFormatter; > var listOwner : MovieClip; > var getDataLabel : Function; > var getCellIndex : Function; > var __value; > > public function DateRenderer(){ > dateFormat = new DateFormatter(); > dateFormat.formatString="MM-DD-YYYY"; > this.addEventListener("focusIn", this); > this.addEventListener("focusOut", this); > } > > function createChildren(Void) : Void{ > super.createChildren(); > createClassObject( Label, "label", 1, {owner:this}); > label.width=80; > } > > //Display date field for editing on focus. > function focusIn() : Void { > createClassObject( DateField, "dateObj", 2, {owner:this}); > dateObj.width=80; > dateObj.dateFormatter = this.formatDate; > dateObj.selectedDate = __value; > dateObj.addEventListener("change", this); > label.visible = false; > dateObj.visible = true; > } > > //Remove date field and make label visible again. > function focusOut() : Void { > dateObj.visible = false; > label.visible = true; > destroyObject("dateObj"); > } > > //Format function > function formatDate(itemDate){ > return dateFormat.format(itemDate); > } > > function setValue( str:String, item:Object, sel:Boolean ) : Void{ > if(item != undefined){ > label.text= formatDate( item[getDataLabel()]); > __value = item[getDataLabel()]; > label.visible = true; > } > } > > function getValue() : String { > return __value; > } > > function getPreferredWidth(Void) : Number{ > return 80; > } > > function getPreferredHeight(Void) : Number{ > return 30; > } > > function change() { > listOwner.editField(getCellIndex().itemIndex, > getDataLabel(), dateObj.selectedDate); > __value = dateObj.selectedDate; > > // Fire Cell edit event for the DataGrid on date change > listOwner.dispatchEvent({type:"cellEdit", > columnIndex:getCellIndex().columnIndex, > itemIndex:getCellIndex().itemIndex}); > } > > } > > Intially label displays the formatted date. But on clicking on the > cell default editor(textfield) is displayed. Can somebody please help > on what could be causing this problem. > > Can i create my own custom editor just like the default text editor? > > Thanks in advance, > Pradeep > > > Yahoo! Groups Links > > > > > Yahoo! Groups Links <*> To visit your group on the web, go to: http://groups.yahoo.com/group/flexcoders/ <*> To unsubscribe from this group, send an email to: [EMAIL PROTECTED] <*> Your use of Yahoo! Groups is subject to: http://docs.yahoo.com/info/terms/
