DataGrid: custom ItemRenderer changes Header renderer
If I assign custom ItemRenderer to a DataGrid, this also affects headers, i.e. headers start looking as the fields in a grid. Not only that, but it seems that render is much worse and it really looks bad. Is this how it's supposed to be, is there a workaround to keep the headers as they should be and just change the actual renderers in the grid?
Post a bit of your code.
Sincerely,
Michael
Sent from my iPhone
El 16/07/2009, a las 23:24, mraak <[email protected]> escribió:
>
If I assign custom ItemRenderer to a DataGrid, this also affects
headers, i.e. headers start looking as the fields in a grid. Not
only that, but it seems that render is much worse and it really
looks bad. Is this how it's supposed to be, is there a workaround to
keep the headers as they should be and just change the actual
renderers in the grid?
>
Similar Messages
-
Flex datagrid custom itemRenderer - making column NOT EDITABLE
Hi all,
I am new to flex and having been trying to build custom editors and renderers for datagrid. I ran into this problem trying to fix another one (http://forums.adobe.com/post!reply.jspa?message=3569216)
The problem is :
I have a custom editor and a renderer for a text column. The whole grid is editable (i.e; editable=true). But clicking on the cell does not show me the editor. However, if I change the renderer to mx.controls.label, clicking on it takes me to my custom editor.
Can anyone please tell what I am doing wrong?? I am pasting the relevant code for more details.
DATAGRID : Replacing itemRenderer = "renderers.TextRenderer" with itemRenderer = "mx.controls.Label" makes the column editable
<mx:DataGrid id="dg" editable="true" rowHeight="100" width="861" x="10" y="10" height="498" dataProvider="{this.slideArray}">
<mx:columns>
<mx:DataGridColumn headerText="Text" width="100"
resizable="true" sortable="false"
itemRenderer = "renderers.TextRenderer"
itemEditor="editors.TextEditor"
dataField="text" editorDataField="myData"/>
</mx:columns>
</mx:DataGrid>
TEXT EDITOR
<?xml version="1.0" encoding="utf-8"?>
<s:MXDataGridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
focusEnabled="true"
initialize="initEditor()">
<mx:TextInput id="edit" width="{this.width}" height="{this.height}"/>
<fx:Script>
<![CDATA[
import domain.Slide; // contains just one property :::: public var text : String
override public function set data(value:Object):void{
super.data = value;
this.edit.text = (value as Slide).text;
public var myData : String; // editor data field
import mx.binding.utils.BindingUtils;
private function initEditor():void{
BindingUtils.bindProperty(this,"myData", this.edit, "text");
]]>
</fx:Script>
</s:MXDataGridItemRenderer>
TEXT RENDERER
<?xml version="1.0" encoding="utf-8"?>
<s:MXDataGridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
focusEnabled="true">
<s:Label id="txt" horizontalCenter="0" verticalCenter="0"/>
<fx:Script>
<![CDATA[
import domain.Slide;
override public function set data(value:Object):void{
super.data = text;
this.txt.text = (value as Slide).text;
]]>
</fx:Script>
</s:MXDataGridItemRenderer>
Tricks I have tried and failed :
1. added the following code to the renderer
override public function get data():Object{
return super.data;
2. remove/change focusEnabled
3. wrote the same renderer in Actionscript - making it extend MXDataGridItemRenderer. I had to add the label component txt using addElement. Clicking on this does show th editor but it doesnt show the label txt at all... i.e; I dont get any text displayed.
I am using Flex 4.0 sdk.It worked!!!!!!! Thank you!! What you mentioned was indeed the problem!
Here is the custom item renderer's set data function
Before
Now
override public function set data(value : Object):void{
super.data = text;
this.txt.text = (value as Slide).text ; //txt is the Label control
override public function set data(value : Object):void{
super.data = value;
this.txt.text = (value as Slide).text ; //txt is the Label control
oh man, this is such a stupid mistake. I think I was confused with having three text properties - one inherited from MXDataGridItemRenderer, one in my txt Label control and one on my slide.
I had no idea that sending the value up to the super class was so important. None of the docs I read seemed to give much importance to this statement.
thanks so much and sorry for taking up so much of your time. I guess it is uncessary to post any more code. -
Hello,
my Datagrid consists of a variable number of columns that are
handled by the same Itemrenderer. Now I have the problem that I
can't find out which column I belong to when I am in the override
set data function.
Any hints how i can back track to what column the "current"
Itemrenderer belongs or is processing at that moment?
Thanks and GzG
NerunI had the exact requirement. Multiple columns using the same
item renderer and needing to know what was clicked. Essentially I
solved it in three steps.
1. Override the datagid to add your own custom events;
package com.psc.eis.view
import mx.controls.DataGrid;
import mx.events.ListEvent;
[Event( name = "MyViewCurrentEvent", type =
"mx.events.ListEvent" ) ]
[Event( name = "MyEditCurrentEvent", type =
"mx.events.ListEvent" ) ]
[Event( name = "MyDeleteCurrentEvent", type =
"mx.events.ListEvent" ) ]
[Event( name = "MySearchEvent", type = "mx.events.ListEvent"
public class MyDataGrid extends DataGrid
public function MyDataGrid() { super()}
public static var
MY_VIEW_CURRENT_EVENT:String="MyViewCurrentEvent";
public static var
MY_EDIT_CURRENT_EVENT:String="MyEditCurrentEvent";
public static var
MY_DELETE_CURRENT_EVENT:String="MyDeleteCurrentEvent";
public static var MY_SEARCH_EVENT : String =
"MySearchEvent";
2. In your item renderer create a click handler that
dispatches the appropriate event
<?xml version="1.0" encoding="utf-8"?>
<mx:HBox xmlns:mx="
http://www.adobe.com/2006/mxml"
horizontalAlign="center">
<mx:Script>
<![CDATA[
private function clickHandler() : void
import mx.events.ListEvent;
var event:ListEvent = new ListEvent(
MyDataGrid.MY_EDIT_CURRENT_EVENT );
event.itemRenderer = this;
owner.dispatchEvent(event);
]]>
</mx:Script>
<mx:Image id="imageDelete" source="images/bluepencil.gif"
width="20" click="clickHandler()"/>
</mx:HBox>
3. In your mxml for the datagrid setup the event handler
<psc:MyDataGrid id="dataGridProjects" dataProvider="{. .
MyViewCurrentEvent="viewCurrentHandler(event)"
MyEditCurrentEvent="editCurrentHandler(event)"
MyDeleteCurrentEvent="deleteCurrentHandler(event)"
>
That's it. -
How to change header font style in Spark DataGrid?
I'm looking since last week for a way how to change the font style of the header in a Spark DataGrid. It drive me nuts that I can't find a way to do this. Have anyone one an idea how to achieve it? Any help is appreciated.
Thanks,
- ArturHi,
Some styles won't work because some text styles got hardcoded into the DefaultGridHeaderRenderer's Label. You'll run into this issue not just with the DataGrid headers but also things like the Panel's title and other places where we have text. One way to get around this issue is to create your own custom headerRenderer based on the default one and then redefine the headerRenderer skin part in the skin.
First, create a subclass of the DefaultGridHeaderRenderer and tweak the "labelDisplay" to your liking (or even just take out all the styles and style it on your own as you had earlier using your custom header renderer's name). Example below (I named it "CustomHeaderRenderer"):
<?xml version="1.0" encoding="utf-8"?>
<skins:DefaultGridHeaderRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:skins="spark.skins.spark.*"
xmlns:comps="comps.*">
<fx:Declarations>
<!-- Remove fontweight="bold" and other styles as you wish
Must be a component and not a factory. -->
<s:Label id="labelDisplay"
verticalCenter="1" left="0" right="0" top="0" bottom="0"
textAlign="start"
verticalAlign="middle"
maxDisplayedLines="1"
showTruncationTip="true" />
</fx:Declarations>
</skins:DefaultGridHeaderRenderer>
Next, create a simple DataGrid skin by creating a subclass of the spark.skins.spark.DataGridSkin in MXML and defining a new headerRenderer component in the fx:Declarations section. Example below (I named it "CustomDataGridSkin"):
<?xml version="1.0" encoding="utf-8"?>
<skins:DataGridSkin xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:skins="spark.skins.spark.*"
xmlns:comps="comps.*">
<fx:Declarations>
<!-- Must be a factory with the right id for the skin part -->
<fx:Component id="headerRenderer">
<comps:CustomHeaderRenderer />
</fx:Component>
</fx:Declarations>
</skins:DataGridSkin>
Last, assign your new skin as the skinClass of your DataGrid (either in MXML or as a style):
<s:DataGrid skinClass="comps.CustomDataGridSkin">
I know it's not pretty, but it's the result of trading off between having completely custom skinning vs. having knobs to tweak every style. Hope this helps.
-Kevin -
How To Update Custom ItemRenderer (Image) on DataGrid Edit
I have an DataGrid with 2 columns, column 1 called "Name" and column 2 called "Actions".
The "Name" column contains editable text and the "Actions" column uses a (inline) custom ItemRenderer which displays 2 icon images ( for Edit and Delete). All works fine. Clicking Edit or Delete calls the corrosponding outerDocument method.
The feature I am trying to add is as follows: when someone double-clicks on the text in the Name column to edit it, I would like the edit icon in the Actions column to ( grow/shrink, change color - or some such indication/reminder to click it ). Not seeing how to do this with the inline ItemRenderer, I created a custom item renderer class and, in that class, use mx:Resize to perform the "grow/shrink". I created a method called "pulse()" and, from within that renderer, all works well. ( for testing, I wired the icons click event to the pulse() method ). However, now I am not sure how to call that ItemRenderers "pulse()" method to perform the effect from the main DataGrid (when the user double-clicks on Name field to edit).
The tried using the DataGrid's "itemEditBegin", which fires correctly, but from that point I am not sure how to access the selected rows edit icon in the "Action" column. ( to call its pulse() ) method.
So any suggestions how I can achieve my end result? Being able to manipulate the edit icon in the "Actions" column, when the user double-clicks (edits) that row's "Name" column?
If I'm going about it all wrong, feel free to offer alternative solutions.
Any help would be appreciated.
Thanks,
~eHi,
Check the BAPI_MATERIAL_SAVEDATA ,in the BAPI is there a table parameter EXTENSIONIN ?
which you can use to pass the values for user defined fields to the BAPI..
Regards
Kiran Sure -
DataGrid tooltip doesn't work for customized itemRenderer
I have a DataGrid with one column is a customized renderer,
when I try to use the dataTripFunc, it is not showing tooltips,
same function works for the other non-customized column, here is
the code:
<mx:DataGrid id="myDataGrid" dataProvider="{dataContent}"
width="100%" height="100%">
<mx:columns>
<mx:DataGridColumn dataField="name" headerText=""/>
<mx:DataGridColumn dataField="DateTime"
headerText="DateTime" showDataTips="true"
dataTipFunction="cellDataTipFunc"/>
<mx:DataGridColumn dataField="ImgBar" headerText="ImgBar"
itemRenderer="ImgBarCell" minWidth="40" showDataTips="true"
dataTipFunction="cellDataTipFunc"/>
</mx:columns>
</mx:DataGrid>
public function cellDataTipFunc(item:Object):String {
return "hello world";
Where the itemRenderer -- "ImgBarCell" is a customized HBox
component with a label and image on it.
The tooltip -- "helloworld" shows up for column "DateTime",
but not for customized ImgBar.
Does this one have anything to do with event generation for
customized itemRenderer? Or a bug in flex2?Hi
The TREX server (service) must started and be contactable by RFC - this can be checked by carrying out the actions listed above. (Refer OSS Note - 866547 Error when accessing TREX server for more details )
<b>Please have a look at the following SAP OSS Note, which will help -></b>
Note 851106 - Search in catalog from SRM leads to "Service not reachable"
<u>Other related OSS Notes</u>
Note 973594 Cross Catalog Search - Configuration
Note 894717 Items from Cross Catalogs Result does not appears in step 2
Note 803731 Cross-category search returns no result
Note 847137 OCI, cross-catalog search: detail display
Note 996885 Cross Catalog Search - Timeout while accessing MDM Catalog
1023487 cross-catalog-serach in portal opens up a duplicate window
1020025 Item detail display in Cross Catalog Search
1027352 Item detail display in Cross Catalog Search
Note 866547 - Error when accessing TREX server
Note 988427 - Update to TREX 6.1 Rev 27
Note 994623 - Hierarchy Buffer and BIA
Note 1030056 - Improvement in the Search within Results feature of CSE
Note 798988 CCM/CSE: Sorting sometimes returns no results
Note 778688 TREX_INDEX_MANAGER unit test update_view(): incorrect search
Note 808754 Display sequence of the characteristics is not changeable
Note 794325 - Error in OCI transfer in the BAdI /CCM/OCI_SCALEPRI
Note 745235 Search ability changes to cross-catalog characteristics
Note 724097 - Search of the comp. in case of structured characteristics
Note 743643 Search ability change in cross-catalog characteristics
Note 847551 Displaying date, time, and timestamp in the CSE
Note 750756 Program for the deletion/clean up of TREX indexes
Do update me as well.
Regards
- Atul -
Help with datagrid custom item renderer
Hi ,
I have a datagrid in which I have a column with a checkbox and a custom Checkbox header renderer and an item renderer.
When I try to disable the grid the checkbox column does not get disabled?
Is there any way I can disable the entire grid along with the checkbox column?
Thanks.Override updateDisplayList on the renderer and set the .enabled to match
owner.enabled. -
Change of custom fields in header data
Hi Experts,
How to change of custom fields in header data in frontend SRM for Process PO transaction ?
Help is appreciable.
Thank You.
Regards,SunuThank you for your replies.
There is one custom field in header data called 'SDN Number' of our PO for example and i would like to change this from 'SDN Number' to 'Login Name' as the logic for taking the value for this field should remain the same. Only the display text should change.
So, whenever i login into frontned SRM and process the transaction 'Process PO' i should be able to see 'Login Name' instead of 'SDN Number' in header data of the PO.
Hope i reaced my query in clear way.
Highly thanful for your replies.
Regards, Sunu -
A DataGrid with a Custom ItemRenderer
Hi all,
I have a DataGrid whose DataProvider is bound to a simple Array. I have a custom ItemRenderer that includes a button that can remove the item itself (I don't want two separate columns with a remove button in one of them). However, I don't understand the behaviour - clicking the button rearranges the data in the DataGrid and sometimes duplicate the entries! See the example attached. Any idea what's happening?
Martin.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="onCreationComplete();" xmlns:local="*">
<mx:Script>
<![CDATA[
[Bindable]
public var _data : Array;
protected function onCreationComplete() : void {
_data = new Array();
_data.push(1, 2, 3, 4, 5);
]]>
</mx:Script>
<mx:VBox>
<mx:DataGrid dataProvider="{_data}">
<mx:columns>
<mx:DataGridColumn>
<mx:itemRenderer>
<mx:Component>
<mx:HBox implements="mx.controls.listClasses.IDropInListItemRenderer" creationComplete="dataLabel.text = String(data);">
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import mx.controls.DataGrid;
import mx.controls.listClasses.BaseListData;
protected var _listData : BaseListData;
public function get listData() : BaseListData {
return _listData;
public function set listData(d : BaseListData) : void {
_listData = d;
protected function onClick(e : Event) : void {
var dp : ArrayCollection = (owner as DataGrid).dataProvider as ArrayCollection;
dp.removeItemAt(listData.rowIndex);
]]>
</mx:Script>
<mx:Label id="dataLabel" width="100%" />
<mx:Button click="onClick(event);"/>
</mx:HBox>
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
</mx:columns>
</mx:DataGrid>
</mx:VBox>
</mx:Application>creationComplete is rarely used in renderers. See the itemrenderer posts on my blog
Alex Harui
Flex SDK Developer
Adobe Systems Inc.
Blog: http://blogs.adobe.com/aharui -
Items in Tree control move around when data is submitted using custom ItemRenderer
I'm working on a Tree control with an XMLListCollection as
its dataProvider.
The dataProvider has information looking like this :
quote:
<?xml version='1.0' encoding='utf-8'?>
<INFO>
<FIELD label="STR_USER_NAME"
type="text"
value=""
>
</FIELD>
<FIELD label="STR_USER_EMAIL"
type="text"
value=""
>
</FIELD>
<FIELD label="STR_OPTIONAL"
type="branch"
value="0"
>
<FIELD label="STR_USER_ADDRESS"
type="text"
value=""
>
</FIELD>
<FIELD label="STR_USER_POSTAL_CODE"
type="text"
value=""
>
</FIELD>
</FIELD>
</INFO>
So in the Tree control I'd like the information to show up
with a label and
an
editable textbox for each item :
[Label] [textbox]
To do this I made a tree like this :
quote:
<mx:Tree id="userTree"
editable="true"
rendererIsEditor="true"
editorDataField="curVal"
itemRenderer="{new ClassFactory(ItemRendererUser)}"
itemEditEnd="e_ProcessData(event);"
dataDescriptor="{new DataDescriptorUsers()}"
showRoot="false"
verticalScrollPolicy="{ScrollPolicy.AUTO}"
/>
where the e_ProcessData() function looks like this (I used
http://livedocs.adobe.com/flex/201/html/wwhelp/wwhimpl/js/html/wwhelp.htm?href=c
elleditor_073_16.html#202105 as a guide) :
quote:
public function e_ProcessData(event:ListEvent):void
event.preventDefault();
userTree.editedItemRenderer.data.@value =
ItemRendererUsers(event.currentTarget.itemEditorInstance).curVal;
userTree.destroyItemEditor();
userTree.dataProvider.notifyItemUpdate(userTree.editedItemRenderer);
} // END OF e_ProcessData()
I attached the rest of the files because they're a little
bit longer.
When I run the program, the data shows up fine when it is
initialized the
very
first time, and I made a test button that just dumps the
contents of the
dataProvider in a trace statement to verify that the data has
been set
properly.
The problem I've run into is whenever the textfield is
edited, the item
that
I've selected jumps around the list.
For example, if I edit the item "STR_USER_NAME" after I
finish the edit, it
will move from the very first position in the Tree to the
bottom of the
Tree.
I traced the contents of the dataProvider and the
dataProvider structure
stays
the same, with the "STR_USER_NAME" at the top, but if I look
at the flex app
in
the web browser, its position is at the bottom of the Tree.
This happens for every other item I try to edit... I read in
the
documentation
that the ItemRenderers are recycled, so it means I should be
checking to
make
sure the initial states are covered, but I'm not sure how
this affects my
application.
Can anyone help me out with this ? Its very confusing - I've
tried making
an
ItemRenderer using pure actionscript, mxml and the
combination you see in
this
example and I always end up with the same behaviour - So I
must be missing
something critical...
// ItemRendererUsers.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="
http://www.adobe.com/2006/mxml"
verticalScrollPolicy="{ScrollPolicy.OFF}"
horizontalScrollPolicy="{ScrollPolicy.OFF}"
creationComplete="initItemRendererUsers();"
>
From my FAQ:
Q: I've created a custom itemRenderer component to use in a
List
based component (Datagrid, TileList, HorizontalList, etc.).
When my List
first displays, everything looks fine, but when I scroll it
or change the
dataProvider, some of the itemRenderers show values or
formatting that
aren't right. How do I fix this?
A: List-based components don't draw a renderer for every item
in the
dataProvider. Instead, they create enough to display what is
on screen now,
plus one or two more waiting in the wings. This means they
recycle the
renderers rather than creating new ones when you change
dataProvider or
scroll up and down. When you use a creationComplete event to
set up the
itemRenderer, that event doesn't happen again when the
renderer is used for
a different set of data. The solution to this is to override
the set data
protected function that most components have.
For more information, check out the following resources:
http://www.adobe.com/devnet/flex/articles/itemrenderers_pt1.html?devcon=f1
http://blogs.adobe.com/aharui/2007/03/thinking_about_item_renderers_1.html
Please note, I post this FAQ weekly, and you can find a
permanent copy of it
here
http://www.magnoliamultimedia.com/flex_examples/Amys_Flex_FAQ.pdf"peterh8234" <[email protected]> wrote in
message
news:gaqttd$kft$[email protected]..
> Yes - the set and get functions are listed down below.
But the quirky
> behaviour
> is the same regardless of whether I override the set and
get functions or
> not.
>
> I noticed there was another variable called listData -
should I be using
> that
> one or the data variable to read and write to the
dataProvider ?
>
> // _data
> [Bindable] public var _data:Object;
> [Bindable("dataChange")]
> //
> override public function get data():Object
> {
> trace('[ItemRendererDefault.GET data()] called for {' +
> _data.attribute("label") + '}.');
> return _data;
> } // END OF get data()
>
> //
> override public function set data(value:Object):void
> {
> _data.@value = inputText.text;
> trace('[ItemRendererDefault.SET data()] called for {' +
> _data.attribute("label") + '}.');
>
> invalidateProperties();
> } // END OF set data()
Your set data needs to set a flag that gets picked up in
commitProperties()
and does your thing that you were doing before in
creationComplete. You
should see examples of this in the links I posted. Instead of
this:
_data.@value = inputText.text;
you should look at implementing IDropInListItemRenderer,
which will allow
you to dynamically determine which field to look at, instead
of hardcoding
it. You also might wind up overwriting the stored value with
a null value
when the List passes the stored value in. I'd encourage you
to really go
through those links I posted and make sure you understand
what they're
saying. The itemRenderer life cycle is one of the hardest
things to
understand, but once you understand it, it makes many things
in Flex much
easier. It's worth investing the time. -
ComboBox with custom ItemRenderer
This is my combobox where I am trying to have a custom renderer:
<?xml version="1.0" encoding="utf-8"?>
<mx:ComboBox xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/halo">
<fx:Script>
<![CDATA[
import mx.events.FlexEvent;
import mx.collections.ArrayCollection;
import mx.controls.CheckBox;
public var datas:XML;
[Bindable]
var ItemRenderer:ClassFactory;
override public function set data(value:Object):void
dataProvider = datas["sku" + value.sku];
ItemRenderer = new ClassFactory(comboBoxCheckBoxItemRenderer);
itemRenderer = ItemRenderer;
public function saveCheckState(evt:Event):void
var dataProviderItem:Object = dataProvider.getItemAt(dataProvider.getItemIndex(selectedItem));
dataProviderItem.selected = CheckBox(evt.currentTarget).selected;
dataProvider.setItemAt(dataProviderItem, dataProvider.getItemIndex(selectedItem));
]]>
</fx:Script>
</mx:ComboBox>
This combobox is used as a custom itemrenderer in datagrid.
Here is code for comboBoxCheckBoxItemRenderer:
package modulecode
import mx.containers.HBox;
import mx.controls.CheckBox;
import mx.controls.Label;
import mx.controls.Spacer;
public class comboBoxCheckBoxItemRenderer extends HBox
private var action:Label;
private var spacer:Spacer;
private var checkBox:CheckBox;
public function comboBoxCheckBoxItemRenderer()
super();
override protected function createChildren():void {
// Call the createChildren() method of the superclass.
super.createChildren();
action = new Label();
// Add the child component to the custom component.
addChild(action);
spacer = new Spacer();
spacer.percentWidth = 100;
// Add the child component to the custom component.
addChild(spacer);
checkBox = new CheckBox();
// Add the child component to the custom component.
addChild(checkBox);
override public function set data(value:Object):void
action.text = value.action;
checkBox.selected = value.selected;
What's happening is that nothing is happening untill I drop combobox down in the grids. As the result checkboxes are not selected properly.
Any help?How would I set up a custom itemrenderer to use data binding but properly have selected property in the following code:
<<mx:itemRenderer>
<fx:Component>
<mx:HBox width="100%">
<mx:Label text="{XML(data).action}"/>
<mx:Spacer width="100%"/>
<mx:CheckBox id="check" selected="{XML(data).selected}"
change="outerDocument.saveCheckState(event);"/>
</mx:HBox>
</fx:Component>
</mx:itemRenderer> -
Header renderer click handler not working
Hi All
Below is code of my header renderer which copied code from default headerrenderer and created new one, I added textinput with down arrow and close button,
But when i click on close button, I am making filter box invisible, If i put a break point inside griditemrenderer1_mouseOutHandler() function then filter box becomes invisible, but while running in debug mode without break point filter box shows visible only,
Please let me know where i am doing wrong.
<?xml version="1.0" encoding="utf-8"?>
<s:GridItemRenderer minWidth="21" minHeight="21"
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
mouseOver="griditemrenderer1_mouseOverHandler(event)"
creationComplete="griditemrenderer1_creationCompleteHandler(event)">
<fx:Declarations>
<s:Label id="labelDisplay"
verticalCenter="1"
textAlign="start"
fontWeight="bold"
verticalAlign="middle"
maxDisplayedLines="1"
showTruncationTip="true" />
</fx:Declarations>
<fx:Script>
<![CDATA[
import com.db.view.components.FilterPopup;
import mx.managers.PopUpManager;
import mx.controls.Menu;
import mx.events.FlexEvent;
import spark.components.gridClasses.IGridVisualElement;
import mx.core.IVisualElement;
import spark.components.DataGrid;
import spark.components.GridColumnHeaderGroup;
import spark.components.gridClasses.GridColumn;
import spark.primitives.supportClasses.GraphicElement;
// chrome color constants and variables
private static const DEFAULT_COLOR_VALUE:uint = 0xCC;
private static const DEFAULT_COLOR:uint = 0xCCCCCC;
private static const DEFAULT_SYMBOL_COLOR:uint = 0x000000;
private static var colorTransform:ColorTransform = new ColorTransform();
* @private
private function dispatchChangeEvent(type:String):void
if (hasEventListener(type))
dispatchEvent(new Event(type));
// maxDisplayedLines
private var _maxDisplayedLines:int = 1;
[Bindable("maxDisplayedLinesChanged")]
[Inspectable(minValue="-1")]
* The value of this property is used to initialize the
* <code>maxDisplayedLines</code> property of this renderer's
* <code>labelDisplay</code> element.
* @copy spark.components.supportClasses.TextBase#maxDisplayedLines
* @default 1
* @langversion 3.0
* @playerversion Flash 10
* @playerversion AIR 1.5
* @productversion Flex 4.5
public function get maxDisplayedLines():int
return _maxDisplayedLines;
* @private
public function set maxDisplayedLines(value:int):void
if (value == _maxDisplayedLines)
return;
_maxDisplayedLines = value;
if (labelDisplay)
labelDisplay.maxDisplayedLines = value;
invalidateSize();
invalidateDisplayList();
dispatchChangeEvent("maxDisplayedLinesChanged");
* @private
* Create and add the sortIndicator to the sortIndicatorGroup and the
* labelDisplay into the labelDisplayGroup.
override public function prepare(hasBeenRecycled:Boolean):void
super.prepare(hasBeenRecycled);
if (labelDisplay && labelDisplayGroup && (labelDisplay.parent != labelDisplayGroup))
labelDisplayGroup.removeAllElements();
labelDisplayGroup.addElement(labelDisplay);
private var chromeColorChanged:Boolean = false;
private var colorized:Boolean = false;
[Bindable]
private var _filterVisibility:Boolean = false;
* @private
* Apply chromeColor style.
override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
// Apply chrome color
if (chromeColorChanged)
var chromeColor:uint = getStyle("chromeColor");
if (chromeColor != DEFAULT_COLOR || colorized)
colorTransform.redOffset = ((chromeColor & (0xFF << 16)) >> 16) - DEFAULT_COLOR_VALUE;
colorTransform.greenOffset = ((chromeColor & (0xFF << 8)) >> 8) - DEFAULT_COLOR_VALUE;
colorTransform.blueOffset = (chromeColor & 0xFF) - DEFAULT_COLOR_VALUE;
colorTransform.alphaMultiplier = alpha;
transform.colorTransform = colorTransform;
var exclusions:Array = [labelDisplay];
// Apply inverse colorizing to exclusions
if (exclusions && exclusions.length > 0)
colorTransform.redOffset = -colorTransform.redOffset;
colorTransform.greenOffset = -colorTransform.greenOffset;
colorTransform.blueOffset = -colorTransform.blueOffset;
for (var i:int = 0; i < exclusions.length; i++)
var exclusionObject:Object = exclusions[i];
if (exclusionObject &&
(exclusionObject is DisplayObject ||
exclusionObject is GraphicElement))
colorTransform.alphaMultiplier = exclusionObject.alpha;
exclusionObject.transform.colorTransform = colorTransform;
colorized = true;
chromeColorChanged = false;
super.updateDisplayList(unscaledWidth, unscaledHeight);
* @private
override public function styleChanged(styleProp:String):void
var allStyles:Boolean = !styleProp || styleProp == "styleName";
super.styleChanged(styleProp);
if (allStyles || styleProp == "chromeColor")
chromeColorChanged = true;
invalidateDisplayList();
protected function griditemrenderer1_mouseOverHandler(event:MouseEvent):void
_filterVisibility = true;
protected function griditemrenderer1_mouseOutHandler():void
_filterVisibility = false;
protected function griditemrenderer1_creationCompleteHandler(event:FlexEvent):void
trace(label);
protected function textinput1_clickHandler(event:MouseEvent):void
var filterpopUp:FilterPopup = new FilterPopup();
filterpopUp.filterColumn = label;
PopUpManager.addPopUp(filterpopUp,this,false);
filterpopUp.addEventListener("test",testHandler);
filterpopUp.x = event.stageX - 50;
filterpopUp.y = event.stageY + 10;
protected function testHandler(event:Event):void
owner.dispatchEvent(new Event("test"));
]]>
</fx:Script>
<s:VGroup left="7" right="7" top="5" bottom="5" gap="2" verticalAlign="bottom">
<s:HGroup id="tiFilter" width="100%" gap="3" verticalAlign="middle" visible="{_filterVisibility}">
<s:TextInput width="{labelDisplay.width + 20}" height="16" skinClass="com.db.view.skins.FilterTextInputSkin"
text="{label}" click="textinput1_clickHandler(event)"/>
<s:HGroup id="closeBtn" width="15" height="15" click="griditemrenderer1_mouseOutHandler()"
buttonMode="true" useHandCursor="true" mouseChildren="false" keyDown="griditemrenderer1_mouseOutHandler()">
<s:Image source="@Embed('/assets/images/icon_close.gif')"/>
</s:HGroup>
</s:HGroup>
<s:Group id="labelDisplayGroup" width="100%"/>
<s:Group id="sortIndicatorGroup" includeInLayout="false" />
</s:VGroup>
</s:GridItemRenderer>Hi Sudhir,
Thanks for posting your issue, Kindly find the code snnipet below to Add a new item in Custom list
public override void ItemAdded(SPItemEventProperties properties)
base.ItemAdded(properties);
if (properties.List.Title
== "Test")
Get Properties
string ABC=
properties.ListItem["Column"].ToString();
string DEF=
properties.ListItem["Column"].ToString();
DateTime XYZ=
(DateTime)properties.ListItem["Start Column"];
DateTime WSD=
(DateTime)properties.ListItem["End Column"];
Create sub site
SPWeb web
= properties.Site.AllWebs.Add(name.Replace(" ", string.Empty),
name,
description, 0, SPWebTemplate.WebTemplateSTS, false, false);
web.Update();
Also, browse the below mentioned URL to implementation your custom list step by step. and how you can debug your custom code.
http://www.c-sharpcorner.com/UploadFile/40e97e/create-site-automatically-when-a-list-item-is-added/
http://msdn.microsoft.com/en-us/library/ee231550.aspx
I hope this is helpful to you, mark it as Helpful.
If this works, Please mark it as Answered.
Regards,
Dharmendra Singh (MCPD-EA | MCTS)
Blog : http://sharepoint-community.net/profile/DharmendraSingh -
Can't focus on custom itemRenderer?
I have made a custom itemRenderer doubling as an itemEditor
following the guidelines in the documentation.
However, even though I have set the rendererIsEditor="true",
when tabbing amongst other editable fields, the controls inside the
itemRenderer do not receive focus. I can't help but think this is
an oversight/bug but is there any way to jury-rig the itemRenderer
to focus properly? At the moment my component is simply a CheckBox
inside an HBox.
Anyway, here is my code so you can see for yourself (I have
included a CheckBox as itemRenderer so you can see the *desired*
effect.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application
xmlns:mx="
http://www.adobe.com/2006/mxml"
layout="vertical">
<mx:Script>
<![CDATA[
import mx.controls.dataGridClasses.DataGridListData;
import mx.controls.Alert;
[Bindable]
public var dp:Array = [{num:2, bool:true}, {num:3,
bool:false}];
]]>
</mx:Script>
<mx:DataGrid id="test" editable="true"
dataProvider="{dp}">
<mx:columns>
<mx:DataGridColumn dataField="num" headerText="num" />
<mx:DataGridColumn dataField="bool"
headerText="Sent"
itemRenderer="mx.controls.CheckBox"
rendererIsEditor="true" editorDataField="selected" />
<mx:DataGridColumn dataField="num" headerText="num"
editable="true" />
<mx:DataGridColumn dataField="bool" headerText="Sent"
rendererIsEditor="true" editorDataField="blorch">
<mx:itemRenderer>
<mx:Component>
<mx:HBox horizontalAlign="center">
<mx:Boolean id="blorch" />
<mx:CheckBox id="check" selected="{data.bool}"
change="blorch=check.selected" />
</mx:HBox>
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
<mx:DataGridColumn dataField="num" headerText="num"
editable="true" />
</mx:columns>
</mx:DataGrid>
</mx:Application>nevermind... I found the answer a few pages later in the
docs...
you have to implement the IFocusManagerComponent interface
and then override drawFocus as below to set the focus on the
checkBox... hope it works for multiple controls...
<mx:HBox horizontalAlign="center"
backgroundColor="#9933EE"
implements="mx.managers.IFocusManagerComponent">
<mx:Script>
<![CDATA[
override public function drawFocus(focused:Boolean):void {
check.setFocus();
]]>
</mx:Script>
<mx:Boolean id="blorch" />
<mx:CheckBox id="check" selected="{data.bool}"
change="blorch=check.selected"
updateComplete="blorch=check.selected" />
</mx:HBox> -
Forcing custom itemRenderer to updateDisplayList?
Hi, I'm new to flex, and was having some trouble.
In my project, I have a DataGrid, and a
BarChart->BarSeries. The DataGrid and the BarSeries share the
same DataProvider. I've made a custom itemRenderer, so that I can
click on Bars in the BarSeries and have them be highlighted in
black. This is done by having the itemRenderer listen for a CLICK
event, changing a variable that stores what color I want, then
calling invalidateDisplayList() to have updateDisplayList update
the display.
Since DataGrid and BarSeries share the same DataProvider,
elements in the DataGrid match up with elements in the BarSeries.
Therefore, I would like to be able to have a user click on an item
in the DataGrid, and have the associated bar in the BarSeries chart
become highlighted. However, I can't find a way to get the
itemRenderer to call updateDisplayList from outside of the
itemRenderer itself. I thought that calling invalidateDisplayList()
using the BarChart's id or the BarSeries id would force the
itemRenderer for the BarSeries to call updateDisplayList() and
update itself, but by using the debug feature, I have found that it
does not do this. Does anyone have any advice for how I would be
able to click on a DataGrid item and have it highlight the
corresponding item in the BarChart?
Thanks!Hi, I'm new to flex, and was having some trouble.
In my project, I have a DataGrid, and a
BarChart->BarSeries. The DataGrid and the BarSeries share the
same DataProvider. I've made a custom itemRenderer, so that I can
click on Bars in the BarSeries and have them be highlighted in
black. This is done by having the itemRenderer listen for a CLICK
event, changing a variable that stores what color I want, then
calling invalidateDisplayList() to have updateDisplayList update
the display.
Since DataGrid and BarSeries share the same DataProvider,
elements in the DataGrid match up with elements in the BarSeries.
Therefore, I would like to be able to have a user click on an item
in the DataGrid, and have the associated bar in the BarSeries chart
become highlighted. However, I can't find a way to get the
itemRenderer to call updateDisplayList from outside of the
itemRenderer itself. I thought that calling invalidateDisplayList()
using the BarChart's id or the BarSeries id would force the
itemRenderer for the BarSeries to call updateDisplayList() and
update itself, but by using the debug feature, I have found that it
does not do this. Does anyone have any advice for how I would be
able to click on a DataGrid item and have it highlight the
corresponding item in the BarChart?
Thanks! -
Header Renderer is getting Refreshed again & again...
Hi ,
I have a Advanced datagrid and I am using Header Renderer in a component for the same.. eg.
<mx:AdvancedDataGrid
id="adg" headerStyleName="boldHeader"dataProvider="
{dataProvider}"
height="
100%"
headerRenderer="
{headerRenderer}"horizontalScrollPolicy="
on"
verticalScrollPolicy="
on"
>
<mx:Component id="headerRenderer">
<mx:VBox horizontalScrollPolicy="off" verticalScrollPolicy="off" implements="
mx.controls.listClasses.IDropInListItemRenderer"
>
</mx:component>
I have few components in my header renderer , & on basis of header text I am setting the visibility of components.
My components are Combo boxes & Text Box...
When i select any I tem from combobox Its not able to retain the label to selectedItem for more that 30 secs....
but i want it to be retain till I change the selection....
Same is the case with text box It keeps the value for 2-3 seconds & clears the entered value
What could be the possible solution?
TIASeems your Header Reindeer got re-initialized after you set the values or may be the dataprovider updated, check your code.
if you have a simplified version post it here to look into the problem.
Maybe you are looking for
-
Can't get Themes to work for movie using iMovie on ipad
I finsished a trailer using iMovie on my iPad successfully and LOVED it! Sooo fun! Now I'm trying to make a movie for a friend's wedding, but I can't get it to work with the themes. When I select my theme and start a new project using a few pictures
-
Why would my iPhone not connect to my macbook air?
Why would my iphone not connect to my MacBook Air?
-
Hi, I have a program where I read integer value from the database & create a JTextField on the GUI side. Number of characters user should enters in the JTextField should be equal to the value I have got from the database & only JTextField with column
-
How can I reinstall Photoshop CC 2014? Help!
How can I reinstall Photoshop CC 2014? I uninstalled through Control Panel > Programs & Features after finding a post that said uninstall/reinstall would fix the problem that choosing a DNG file and selecting Edit In Photoshop CC 2014 does not work.
-
Process Steps to schedule the job in background
What are the process Steps to schedule the job in background? Sai.