In this sample, I’m using an Advanced DataGrid as an item renderer within another Advanced DataGrid. This type of configuration is very useful to give a master-detail view. This configuration can be customized more depending on any specific requirements.
Application Source, Renderer source
Thanks to Sreeni for coming up with this.
Rendezvous with Technology 
Be careful with the AdvancedDatagrid, if you want to edit the cell it’s a little buggy…
http://bugs.adobe.com/jira/browse/FB-11568
Can you make this so that it’s a recursive? I wanted to have a more inner advancedDataGrid within 🙂
You can use rendererProviders in the renderer – DetailGrid.mxml and give another AdvancedDataGrid as the renderer.
I’ll give it a try when I get time.
HI SAMEER
Very nice example.i Need help but there is only level 2 item rendere but i want it for multiple how is it possibel grid in grid.Please respond as early as possible.Urgent please
thanking yOu
Reddy
Did you try defining rendererProviders to give AdvancedDataGrid as a renderer in the DetailGrid?
Can’t wait to see that!
Sameer,
I am trying to change the horizontal lines in the grid for certain rows. When I override ADG::drawHorizontalLine, it does not seem to be getting called. Also, I have not seen any examples that show how to use a horizontalSeparatorSkin. Any ideas? Thanks.
Jay
Hi Jay,
I’ve posted a sample here
Source –
mxml file
Horizontal separator skin
You have to set horizontalGridLines=”true” in your AdvancedDataGrid to enable displaying of horizontal lines/skin.
Sameer,
Thank you for this example, it helps to understand how this works. I need to go further then all rows or no rows. I need to be able to check the “data” in the dataProvider for that particular row in the ADG, and if it meets a certain criteria, them apply the horizontal line. Basically, I need to be able to get to the data somehow for the row in either the styleFunction, drawHorizontalLine override or my horizontalSeparatorSkin ProgrammaticSkin class in order to implement the logic on how to draw the horizontal line. Thanks for any further assistance you can offer.
Sameer,
It looks like I found a way. I overrided drawHorizontalLine such as:
override protected function drawHorizontalLine(
s:Sprite, rowIndex:int, color:uint, y:Number):void {
if(indexToItemRenderer(rowIndex) != null) {
var obj:Object = indexToItemRenderer(rowIndex).data;
if(obj.hasOwnProperty(“addHeavyLine”)) {
var g:Graphics = s.graphics;
g.lineStyle(2, 0x808386);
g.moveTo(0, y);
g.lineTo(width, y);
}
}
}
Thanks again for you help with this matter.
Great Jay, but don’t forget to showcase what you created 🙂
sameer,
i am trying to implement something very similiar to what you have done.
but my underlying data is a datatable in .NET which is being serialized into xml. anyways my final output is something like this
but however I structure my xml it looks the advanceddatagrid adds its own folder/leaf nodes with this xml along with the renderer grid.
can you tell me how the xml structure should be to achieve the same results you have. or how to convert my above xml to the array structure you have.
sorry in my revious post the i had the tags for my xml and it was not published, so here is my xml.
root
parent id=”1″ name =”x”
child id=”11″ name =”x1c”
child id=”12″ name =”x2c”
parent id=”2″ name =”y”
child id=”21″ name =”y1c”
child id=”22″ name =”y2c”
root
sameer
i am trying to implement something exactly like what you have here, but my underlying data is a .NET datatable which is serialized into an xml. anyways my result xml looks like this.
root
parent id=”1″ name =”x”
child id=”11″ name =”x1c”
child id=”12″ name =”x2c”parent id=”2″ name =”y”
child id=”21″ name =”y1c”
child id=”22″ name =”y2c”
root
but however i format this xml, the advanceddatagrid seems to be adding its own folder/leaf nodes apart from the renderer grid.
can you please tell me the correct way to structure my xml to achieve the results you have,
or may be how to convert the xml I have to the array structure you have.
thanks
I think your xml ouput didn’t make it through. Can you post it again?
Hi Sameer,
It’s a great example.
I was just wondering that how can i achieve this with xml as data-provider. Could you tell me something about that ( i mean what kind of xml structure do i need to use )
I tried to create xml equivalent to ur Array. But, it’s not rendering the way it should be.
Thanks !
Refer to comment #49 below. A sample is attached there.
root
parent id=1
child=11
child=12
parent id=2
child=21
child=22
root
Got your xml output.
If I understand correctly you want to display the children in another grid?
Then you can make a node which will contain the children and set the childrenField property of the HierarchicalData to the name of that node.
For example, you may want to try this –
root
parent id =1
children
child = 11
child = 12
/children
/parent
/root
Does this solve your issue?
I will try it out and let you know the xml way in a few days.
For now, the datatable natively works well for my scenario.
I added a “children” column in my .NET webservice before I return the datatable to flex.
and in flex I assign a array to this children column and push my child rows (which is another datatable) into this array.
Is it possible to move the x Possition of 2nd column based on the 1st column tree expands further….
I am tring to embed cutom TExt control in Advanced grid which provide multiline property for word wrap…and i wanted to embed Custom TExt control in Advanced datagrid 1st column….can anyone help on this….Appricited your help///
You can set the width of the first column, the second column will automatically move. You can check out this post to get some ideas –
https://techrays.wordpress.com/2007/08/06/auto-resizable-advanceddatagrid
I have a question which is somewhat similar to what Prakash was asking. Quite simply, if I convert the “masterData” Array in your example with the exact equivalent XMLList, the rows of the embedded “child datagrid” all display with individual column headers, rather than having one column header “row” followed by all the rows of the child datagrid. Question: is there any way to fix this behavior without converting the XMLList to an Array, which I would rather not do?
Thanks.
Can you mail me a sample which shows this issue here prosameer@gmail.com
Hi,
How can i access the a particular item renderer from a grid? Say i need to access 5th item renderer in a particular row. How can i do it?
When i use indexToItemRenderer(rowIndex) i get the first itemrenderer but not the required one.
Need it very urgently.
Thanks in advance
You can use –
var renderers:Array = adg.mx_internal::rendererArray;
You’ll get an array of array containing all the information about the renderers.
Note: The use of mx_internal is not recommended.
Hi Sameer,
Thanks for the quick reply.
My requirement is to show/hide an image on itemRollOver of AdvancedDataGrid. The image is placed in the itemRenderer within component tag. I am always able to access only the first itemRenderer of the row.
Here is my code.
If its not recommended to use mx_internal then how can i do it?
Thanks in advance.
Use of mx_internal is not recommended because it can change anytime.
Well, you can create a custom item renderer and bake the logic of showing/hiding the image in it on the rollover event.
Hi Sameer,
How to retrieve the control within the custom item renderer? I tried it long back but couldn’t suceed. Can you please help me out by sending the code snippet?
Thanks alot for the responses
By control, you mean the grid control, right?
You can implement IDropInListItemRenderer and use the listData property. listData.owner will give you the grid.
Hi Sameer,
Sorry for not being clear. I mean the image control. You said to create a custom item renderer and have the logic of showing/hiding the image right?
I am able to create a custom item renderer with an image control within it and i have assigned this item renderer to the AdvancedDataGridColumn. Now how to show/hide the image control on item roll over by checking some condition? and i also have a click event written on the image control. On click i need to delete the row in the database.
How to expose the click event on image control and access the image control in the application?
Please do help me in doing so.
As of now i am able to achieve all these by using adg.mx_internal.
Add rollOver/rollOut event listener to the itemRenderer and show/hide the image control in the respective listener.
You can use events for exposing the click. Why do you want to access the image control in the Application?
You can send me a mail here prosameer@gmail.com
Hi Sameer,
Thanks for the reply. I have sent you a detail mail.
Please respond as soon as possible.
Thanks alot
Hi Sameer,
Thank you for the example.
I have started learning flex just about a week ago. So I dont know the inner workings of actionscript or flex. I am interpreting flex based on my knowledge in java, javascript. I am very impressed with flex and am preparing a POC for my next project in flex.
I have a requirement that needs to display xml data in a treegrid. So I would need depth 3 advanceddatagrid.
I used the example and built my own grid which looks almost like what I wanted, but the data displayed is not easily readable.
There are a few more problems with the Grid. Kindly look into it suggest me what can be done. Following is the link for the same.
http://www.adobe.com/cfusion/webforums/forum/messageview.cfm?catid=585&threadid=1387619
Kindly take a look at a tree grid to display data in 3 levels
I donot know how to host swf files, so I have uploaded the project to zshare.
http://www.zshare.net/download/1745900829fe5d7c/
If you see the swf, it doesn’t look good and the data displayed is not readable.
I am stuck with a few problems here:
1. The advanceddatagrids at depths 2 and 3 have 6 rows by default. So even if there is only one row to print the grids are showing 6 rows. How to change this?
2. I am not sure what should be the value of columnIndex for the renderers AccountGrid and SiteGrid. Could you suggest what I have to do so that the data is shown as an easy to understand tree structure.
3. “Citibank Mortgage Chicago” is printing in two columns(). I guess its because the main grid is rendering the tag of and even the AccountGrid is rendering the tag of tag. Is there a way to prevent “Citibank Mortgage Chicago” from printing in the ‘Group Name’ column without changing the tag from to
4. How to hide the leaf icon getting displayed in the first column?
Please guide me as to what should be the approach to resolve the above problems.
Small correction: Point 3 is not clear as i put some tags.
3. “Citibank Mortgage Chicago” is printing in two columns(). I guess its because the main grid is rendering the <name> tag of <Account> tag and even the AccountGrid is rendering the <name> tag of <Account> tag. Is there a way to prevent “Citibank Mortgage Chicago” from printing in the ‘Group Name’ column without changing the tag from <name> to <gname>
1. You have to set the rowCount property in the set data() method of the AccountGrid grid –
this.validateNow(); // this is not needed if flat data is set
this.rowCount = dataProvider.length + 1;
But here initially, the rowCount will be 2 and after opening a node it’ll increase. So, make sure you set the rowCount again while opening/closing a node.
2. Do you need SiteGrid. Can’t you show all the information in one row in AccountGrid.
3. Try using groupLabelFunction.
4. Set defaultLeafIcon=”{null}” in the main grid.
Hi Sameer,
My question is related to the display of the inner datagrid. To resemble a tree like structure I need to move the inner datagrid to the left. It would be a bonus if I can draw some line from the parent node to the child grid.
Please suggest a solution.
Set columnIndex=0 in the RendererProvider to start the inner grid from column 0.
For drawing lines connecting the parent and children, you need to write custom item renderers.
Thanks Sameer!
If I give columnIndex=0 the innergrid is displayed without any indentation. So I want to move the inner grid to the right by a cm and then draw connecting lines from parent to child so that the user can easily understand the parent-child relationship.
Can you please point me to any example which I can use, to draw the lines from the parent to child.
Thanks in advance
Aditya
Hi Sameer,
Thankyou for your prompt reply.
As I’m a newbie to Flex it took me sometime to make the changes.
I have modified my project according to your suggestions.
But I was unable to follow a few points.
Whenever I expand the innergrid I need to change the size of the outergrid row also, So that scrollbar doesn’t appear in the innergrid. I am unable to figure out how to change the size of the outer grid whenever I expand or collapse the inner grid.
And regarding Sitegrid. Each Account has multiple sites, so I have to display multiple sites in the childgrid of each Account. I have modified it accordingly.
Also to draw the lines from parent grid to inner grid what itemrenderer should be coded and how?
Hi Sameer,
I have uploaded the project here:
http://www.zshare.net/download/176157835830d174/
Kindly spare your liesure time and give your inputs.
Thanks Much!
Hi Sameer,
I’m trying to figure out how to use this with my grouped array collection. I cannot get the top level row to display data (where you had orderID, customerID, etc..) but I am able to get all of my grouped data below. I’m thinking because it is under the groupingCollection.source[i].FIELDNAME and this isn’t recognized by the datafield property in ADG. Any experience with this, or ideas?
Hi and thank you for this fine example!
How would you use data from a remote object array produced from AMFPHP or the like to populate this example?
I was think that I need to somehow link the array results from two tables into one arraycollection, but the child field requirement is throwing me for a loop… (I am fairly new at programming in Adobe Flex)
To Aditya : I can’t recollect any example drawing such lines from parent to the children. Probably, you can write it and share it to everyone.
To Praneeth : You can try this – listen to the expand/collapse events in the inner grid and change the size of the outer grid. You can access the outer grid using listdata.owner property. See IDropInListItemRenderer. You can also try setting wordwrap and variableRowHeightt = true in the grids.
To Kyle : Try using GroupingField.groupingFunction and see what you are getting.
To Terry : You have to create a structure similar to the one shown in the sample by combining the array results.
Hi Praneeth, Sammer
I am trying to achieve exactly what Praneeth is trying to achieve. But unable to figure out how to achieve this using listdata.owner property and where does IDropInListItemRenderer comes into picture.
Please help.
So, if you implement IDropInListItemRenderer, you’ll get access to listData which is BaseListData containing properties like – owner, rowIndex, columnIndex, etc.
This is to get the owner grid and modify its height/width.
By the way, AdvancedDataGrid already implements IDropInListItemRenderer.
I tried the same but unable to achieve the desired result. Will it be possible for you to attach a sample application/code snippet to handle this?
I desperately need it.
Can you send me the sample code and the exact issue you are facing
I’m not promising a result because of the tight schedule here but I’ll try to figure out a solution.
My email id is prosameer@gmail.com
Robert –
I get exactly the same behaviour when I tried this using XML data; each child node gives an adg of its own with just the column headings.
The child nodes contain the desired data, but the data just doesn’t feed to the second level adg.
Have you (or others) had any luck on this? It’s driving me batty.
Cheers
GT
mx:HTTPService id=”xmlServs” url=”reportData.xml” resultFormat=”array” result=”handleResult1(event)”/>
———————————————
I too have same thingfor display just the change is the fields name and i wishes to call them from external xml file. If anyone can give me the idea how to write accurate xml for Advanced DataGrid.
Note re my comment of Sept 7th – The failure of the data to show was my fault. I had not added
variableRowHeight=”true”
in the first adg of my project.
Now to sort out how to get ALL XML child nodes to display within ONE second-level adg…
Cheers
GT
I’m seeing the exact behavior explained by robert and GT.
Each child is created in a separate grid under the main grid. Anybody has any solution for this problem?
Please help!!
I’ve posted a sample here
Source here
Thanks for the sample, but my data is little bit different. For example, I don’t have the , but is directly under .
Do I need to have another level?
My XMLData looks like:
childrenField is set to Products.
Any suggestions?
The XML is lost in the above post…
Here it is:
Above post I meant, I don’t have ProductsNode , instead I have Products directly under Order.
–Order OrderId=”0000″ CustomerId=”ABCD” EmployeeId=”5″ OrderDate=”1-Feb-2007″
—–Products
————Product ProductId=”11″ ProductName=”Product 0″ UnitPrice=”14″ Quantity=”12″ Discount=”0″ Price=”168″
————Product ProductId=”42″ ProductName=”Product 1″ UnitPrice=”14″ Quantity=”12″ Discount=”0″ Price=”168″
—–Products
–Order>
Thanks for the help.
hi,
I need to use a datagrid in another datagrid . which can be done thru
advanced data grid. but on the click of 2 level grid column i need to move to another page of a view stack.can u say how to do that..?
Hi,
Guys anyone one has got an of automating Advanced Data Grid using funfx.
Tried working on avd data grid but my luck dint work.
Thnx for the help.
Hi,
I am using AdvancedDataGrid in another AdvancedDataGrid. When I click on the child ADG an event is fired to the parent too. I want to prevent the event that is being fired to the parent ADG. Is there any way to do this.
Thank you.
Regards
Shilpa
Hi Rahul,
In your child DataGrid, call a method from Parent Document. In that Parent Document method change the ViewStackby using id.slectedIndex= indexNumber.
The event will get fired on the parent also as the child grid is an itemRenderer in the parent grid.
Hi Sameer,
First of all I would appreciate you for posting such a good sample. This is one of the best blogs I have seen.
I need some more information from you. The filter function in this sample is not working when I am trying to get data from an XML file. Can you please let me know how we can filter the column when we are getting data from an XML file.
Thanks in advance.
Regards
Shilpa
Hi Shilpa,
Are you talking about the Filtering sample that I’ve posted here
In this post check out the comment (no. 20) by Sean. He has posted a sample of how you can filter the xml data.
Let me know if you are looking for something else.
HI Sameer,
Need your help man,
I need to display ADG embedded/rendered into another ADG and go on till 5 levels.
Example:
1st ADG will show up 2nd ADG on click of any row in 1st ADG.
2nd ADG will show 3rd ADG on click of any row in 2nd ADG. and so till 5 levels.
All ADG’s will have different column counts and names.
I could get it done till 2nd level ADG as in your example. but could not go further.
Kindly help,. Appreciate your time
I don’t have a sample with me right now but you can start by structuring the data in the way shown in the sample (be sure to take care of the different levels you have). And in the inner grid, create a rendererProvider just like it is created in the outer grid.
Let me know if you get stuck somewhere.
HI Sameer, I tried doing so.
Tried by making the second mxml an application, but could not proceed to 3rd by using , I could just get the headers in 3rd ADG with no data in it, but while trying to assign the Dataprovider to 3rdADG it never got associated, so just getting the headers, but no data.
Could you please make some time for 3rd ADG..
Appreicate your help man.
Thanks
Can you send me your sample Application with only the relevant code. Mail me at prosameer@gmail.com
Thanks a lot sameer..
Its working…
Hi
Can i have different renderer on all column as like as on one column as ADG as item renderer & another column have chart?
Yes, you can set the itemRenderer property on AdvancedDataGridColumn or use the rendererProvider property on the AdvancedDataGrid.
Hi, i need to display data in a ADG like Sindhoor, can any of you send me a sample how to do it?
my email is nchumbo@gmail.com.
TIA
Hi Sameer, I seem have the same problem as Sindhoor.
I tried to make a second mxml application but I could only get the headers in the 3rd ADG and no data in them, just like Sindhoor said.
Could you please make some time for a 3rd ADG and send it to me or post it here?
I’d be very thankful.
Best regards,
Ivan
I’ve posted the sample here
my datagrid generates a chart.i want to plot another chart based on the child nodes of my datagrid,which should come on clicking a bar.
eg.
chart1:
columnchart dataProvider=”{dg.dataProvider}” itemClick=”DrillDown(event)”
chart2:
columnchart dataProvider=”{AC}”
AC should contain the data of the child nodes of a group(that is represented as a bar in chart1)
hope i stated my problem clearly,please suggest your solution.
Thanks in advance
Does this sample help you.
thanks a lot sameer..i tried the same and its working for me..
Hi
In my ADG vertical scroll bar not working properly.
ADG contain another ADG as renderer.
In the application, less space for ADG, so I need to have vertical scroll bar.
But when I scroll the parent ADG with nested ADG open it’s not working properly (means not able to scroll from the point the renderer display start).
I need help to solve this issue & I can able to scroll with renderer.
Thanks in advance
Hi Sameer,
Iam retreiving data from the DB using Java Hibernate and BlazeDs and using it as an Array Collection, which is set as the source to the Grouping Collection. It has around 5000 rows of data. These are grouped into around 34 groups with 150 rows each.
The async refresh works fine for the Grouping Collection. However, the adg.expandAll() takes almost a minute to expand the groups. Is there any solution to improve the performance?
Hi Sameer,
How could we get data for the renderer dynamically. I mean to say that get data onClick event on of the rows in the ADG.
Thanks,
Shankar.
To get the data of the row on which you clicked, you can use adg.selectedItem property in the click event handler.
Hi Samer,
I am trying to use the Item renderer with OlapDataGrid in ActionScript by using “RendererProvider” , but it do not recognize it for some reason,
here is my code to do that , can you please check and let me know if I missing anything .
override protected function commitProperties():void
{
…
try{
var item:OLAPDataGridItemRendererProvider;
item = new OLAPDataGridItemRendererProvider;
item.uniqueName=”[SalesData].[Product]”;
item.type=OLAP_HIERARCHY;
item.renderer= new ClassFactory(CustomDataGridItemRendererWithIFactory);
this.itemRendererProviders.push(item);
Alert.show(‘Renderer has been set 2’);
}catch(E:Error){
Alert.show(“ERR:”+E.toString()); }
}
}
Instead of using – this.itemRendererProviders.push(item);
Get the itemRendererProviders array, push the item and re-assign it again.
Something like –
var arr:Array = itemRendererProviders;
arr.push(item);
itemRendererProviders = arr;
hi sameer
i have a datagrid such that upon clicking any row in the grid, the row expands and has a edit and delete button embedded in the row. i tried implementing it with your example. with the advanced datagrid, the row expands only when i click on the traingle. i need to make that a rowclick event and also i dont want the traingles to be displayed. i am new to flex. can you guide me how to do that?
thanks
In the sample, the row is not expanding. New rows are getting added.
You can hide the icons by setting the folderIcon and leafIcon to null.
Also, you can extend from AdvancedDataGridGroupItemRenderer and perform the same action on item click as we perform on the triangle click.
Thank you very much Sameer. I think then an advanced datagrid would not suit my needs (row expanding to show delete and edit buttons on click). I guess I’ll have to research a little more on datagrid then. Thank you very much.
You need to create custom item renderer to achieve this functionality which should work the same in DataGrid and AdvancedDataGrid.
Thanks
I solve my problem
I get good knowledge from here
Hi Sameer,
Is it possible to have itemRenderer to column of AdvancedDataGrid, labelFunction to column of AdavcnedDataGrid and rendererProvider to same AdavancedDataGrid together in the Application? Can code works for such in such case?
You can have itemRenderer per column. See the itemRenderer property in AdvancedDataGridColumn.
It will work if you have all these properties set.
Though, rendererProvider will take precedence over itemRenderer.
Hi sameer/Sreeni,
do you guys have time to help work on a project that will utilize similar functionality that is presented here?
I have a Flex project that requires extensive and intuinitive use of an advancedDatagrid, but I do not have time to do it myself…
Hi sameer/Sreeni,
Do you do per project work? or hourly? Please send me your rate and contact info by email. I have already team working for me on the backend side (java) in India and I need the flex/ action script on ASAP…
Hi Wil,
We’ll try to help if you have any specific query or something is not working for you.
Hi,
Sorry im a newbie to Flex technology(just getting started).
I wonder if it is possible to embed the popUpMenuButton in the AdvanceDataGrid. If it, hope to see a sample and the code. 🙂
If you want to use PopUpMenuButton as an itemRenderer in the grid, use the itemRenderer property or use rendererProviders.
how much do you charge per for a project….
thanks
wil
I meant that we are not available for projects but we can help with any specific issues you face while implementing.
Hi,
Is it possible to get this to work so that the data is not hard coded?
I am using a httpservice to get some XML data and send the result to an array collection (private var masterData:ArrayCollection; masterData=event.result.root.record).
My XML data can be formatted as elements or atributes eg.
-root
-record OrderId=”1112″ CustomerId=”11″ EmployeeId=”18″…
-children
-child ProductId=”10″ ProductName=”test2″…end
-child ProductId=”11″ ProductName=”test3″…end
-end children
-end record
-end root
My datagrid provider looks like this
The problem is that the folder icon appears but not the arrow to open up the children. Once I can get this to work I am hoping to replace the renderer with a form to update the records data.
Thanks,
Alex.
You can work with any sort of data having the structure that is required for nesting to work.
Otherwise, you can try converting the data to the required structure and then using it.
Hai Sameer,
Sorry for my interruption. Can you please explain this. I want to display image in OLAPDatagrid. The image should be changed based on the value in that column.
Thanks
Jai
Hi Sameer,
I had implemented it with itemrenderer in OLAPDatagrid. But When i apply cornerRadius to OLAPDatagrid it is not affected topLeft,TopRight,BottomLeft. Rounded corner is showing but there is a layer over that border. Any Suggestions please.
Thanks
Jai
I built a AdvancedDataGrid. It worked. But the wordWrap property does not work. Can you someone help me on this? Thanks.
Are you setting variableRowHeight=true along with wordWrap=true?
Hi Sameer,
I need Advanced DataGrid as an item render within an advanced datagrid but instead of Array i want to do through XML.
So how to structure xml similar result of Array.
Regards
krish
Have a look at this sample
Hi Sameer
Thanks for providing solution, advansed datagrid with xml insted of Array.
One problem that how to keep expanded node expanded and collapse node collapse in Advanced datagrid when clicking on browser Referesh button. Or can say when switch to other menu section and coming back to this section in i want to see expanded node expanded and collapse node collapse.
Regards
Krish
Hi Sameer
Can u tell me, how to keep expanded node expanded and collapse node collapse in Advanced datagrid when clicking on browser Referesh button. Or can say when switch to other menu section and coming back to this section in i want to see expanded node expanded and collapse node collapse.
Regards
Krish
You can look at this sample.
You need to store the open nodes in a shared object and then retrieve them after grouping and assign them to the grid.
Hi Sameer,
Appreciate the information that you post on your blogs. I have a question regarding Item Editors. I am displaying Hierarchical data in an advanced data grid. I am also letting the users edit a column in the form of a Combo Box. I am running into issues with the summary row also displaying the combo box. I need to restrict the combo box to be displayed to the child rows and not the parent rows. Just wondering if that is possible?
You can use rendererProviders and specify item renderers only for the child rows (for a particular depth).
Hi Sameer,
Thanks for the quick response. Just curious if you can point me to an example that demonstrates the solution you suggested.
Something like –
<mx:rendererProviders>
<mx:AdvancedDataGridRendererProvider depth="2" columnIndex="1" renderer="mx.controls.ComboBox" columnSpan="1" />
</mx:rendererProviders>
Sweet..works like a charm. Thanks so much Sameer!
awesome post Samir… I’m just having a little difficulty in that every row in the child table is being displayed with its own column headers rather than one column header with all the child rows under it.
The structure of my top level data is an arraycollection of objects with the child list being an array of objects. the dataprovider code is as follows …
… any input will be appreciated. thanks!
I think your dataProvider code didn’t make through wordpress. You can try posting it again.
Also, if you want different column headers you can use the headerText property or just try using labelFunction.
And, if still you have any issue let me know.
nevermind I believe I have figured out that the children list has to be an array of arrays, which has fixed my issue… if you have a better solution for this please provide one.. thanks..
basically my adg has a dataProvider tag with a HierarchicalData tag within it. the “source” is the parent list and the “childrenField” is the child list… thanks for the quick reply..
So, your issue is resolved or still you are facing some issue?
its resolved, thanks..!
hello the example is really nice ,i come across some other problem
when i tried to print ADG with PrintAdvancedDatagrid it not display always last node i am don’t know what’s is going wrong?????
you guy have any idea
The last node might be present on the next page. Check by using printADG.validNextPage and then use printADG.nextPage() to go to the next page.
Hi Sameer,
Appreciate your efforts.
I’ve got a difficulty while dealing with the ADG. Actually, I’ve created a component out of ADG and added its first column as a Checkbox through itemRender. This means, first column is not a part of ADG’s dataProvider. Now, I want to access this first column i.e., Checkbox and replace it with an image for a particular row. It works fine until scroll-bar comes in my ADG. As soon as scroll-bar appears, the images start displaying in an absurd way. Do you have any idea how it could be rectified?
Or, do you have any idea how can I access a particular row of a ADG and then apply changes or styles to it ?
I tried using listItems property of ADG but it doesn’t work when scroll-bar appears in my ADG.
Hope I could make my point clear.
Thanks in advance.
Dushyant
I didn’t quite get what you are trying to achieve.
Do you have a sample?
Also, for styles, refer to styleFunction.
Will you please give me your e-mail id, I will post you requirement to make it understandable for you.
My email id is prosameer@gmail.com
Please send a simple sample.
Just wrote you a detailed mail.
I would truly appreciate your comments on it.
Hi sameer,
Your post has solved my one serious problem.Thanks for that.
Now , i am looking for
” How to access local variable of a custom item renderer from outside(mxml or as)”
because i want to initialize few variables of internal GRID(item renderer).
Please let me know.
Hi sameer,
Why we dont need to implement iDropInListItemRenderer or any other interfaces used for item renderer in your DetailGrid component?
i am creating a DataGrid component to use as item renderer. but the parent custom datagrid is same class that used for itemRenderer, Can i use the same DataGrid component as renderer without implementing any interface?
Please let me know?
Thanks
Sachin
So, DetailGrid extends from AdvancedDataGrid which has AdvancedListBase in its super class hierarchy and AdvancedListBase implements all these interfaces.
Hi Sameer,
I have done few changes in DetailGrid item renderer.
inspirated from Peter Ent’s post http://www.adobe.com/devnet/flex/articles/itemrenderers_pt5_print.html.
But,It is not populating the GRID as renderer instead it is showing a white row that is overlapping verticle lines of master grid.
Please let me know what i am doing wrong.
Thanks
Sachin d. tripathi
Code of detailGrid.mxml:
i am sending the code in seperate file, because i am not able to copy-paste
Thanks
Sachin
i am facing a problem.
i am calling web service to create columns in DetailGrid in my code. For each row, there is different set of data in the DetailGrid renderer.but it is cashing the previous data. i means when i open a row.it shows data of previous DetailGrid renderer.
can u plz tell me why it is not creating a seperate instance of
DetailGrid for each row.
what i am doing wrong?
So, the renderers are re-cycled. The method set data() is called, whenever the renderer’s data changes.
Are you doing the things like assigning columns, etc.. in the set data() method?
i am sending the code of my renderer is ur gmail id.please review it..Actually i want to set some values of renderer from mxml file. On the basis of these values renderer would call web service to create columns.. i am facing problem in opening row.
Hi sameer,
I have completed it. but it takes 5-8 seconds to collapse the row. i am calling webservice for a row for only one time.
Is it matter of size? How can i minimize the collapsed time?
Please let me know?
Is any event raised after node open or closed?
itemOpen and itemClose.
dude, thanks for the code.
btw, your little “popup” windows over your in-page links are annoying as hell. They keep coming as I mouse around the page, and all they do is interfere with what I’m trying to read. perfect example of throwing toys on a site just to be cool. get rid of them.
Hi,
I have a extended Advanced data grid. and I am trying to filter the data using the filter function. The filter function works fine and the data getting filtered. But the issue is the rows remain the same in filtered grid and the filtered rows are showing up in the same index in which it was showing previously. I want to remove all empty rows and show the filtered rows at the top rows of the grid. Can any one help me out of this.
Thanks in Advance
Chethan
Can you post a simple sample of what you are trying to do?
Hi Sameer,
Thank you for the replay. i got the solution for my problem. Actually I had 2 pane grids. One as parent and one as Child. When i select any value from the parent grid child will show up the filtered rows for the selected row of the parent. There was a problem with reloading the child’s data provider. I got the idea and I have solved. thanks
Chethan
Hi All,
I am using a custom panegrid which extends Advanced datagrid(ADG). OnClick of the cell i am opening one Rich text editor for inserting/updating the existing/new cell value. Once i press save after entering the data in rich text editor the value saves in the backend and it shows up in the row in the frontend. But the issue here is there are some cases where the cell value is not showing (Its the saving in the backend correctly but nothing shows in the frontend in the ADG).
The value simply vanishes in some screens.So it will be greatly appreciated if someone can give some ideas on What shall i do to prevent it, as i am totally helpless working on it since last couple of days 😦
If you understand my problem please keep me update , i can show you the code.
Thnx in advance
Currently i m gettng this error in my application where i used your concept of DoubleGrid. This error in repoted as a bug in Flex.
TypeError: Error #1009: Cannot access a property or method of a null object reference.
at mx.controls.advancedDataGridClasses::AdvancedDataGridColumn/itemToLabelWithoutFormatting()
at mx.controls.advancedDataGridClasses::AdvancedDataGridColumn/itemToLabel()
at mx.controls.advancedDataGridClasses::AdvancedDataGridBase/makeListData()
at mx.controls::AdvancedDataGrid/makeListData()
at mx.controls.advancedDataGridClasses::AdvancedDataGridBase/setupRenderer()
at mx.controls::AdvancedDataGrid/setupRenderer()
at mx.controls::AdvancedDataGrid/expandItem()
Actually i am adding 2 blank columns in the grid so the error occures. When i do not add both column.error will not arosed.
plz help me
Sachin Dev Tripathi
Can you post a simple sample of what you are doing?
i will try to manage a sample actually it is enterprize application of my company. so i can’t sent a sample.i will try to create a sample for it.
Thanks
Sachin
I HAVE MAILED AN ANOTHER PROBLEM RELATED WITH SAME COMPONENT. PLEASE HAVE A LOOK ON THIS.
I HAVE SOLVED THE PREVIOUS PROBLEM(ABOVE) THAT I POST IN THE BLOG BUT NOT THE PROBLEM OF “STACK OVERFLOW” FOR WHICH I HAD MAILED YOU. THIS RUNTIME ERROR COMES IN DATAGRIDLISTDATA CLASS.
THX
SACHIN
SACHIN== DevSachin. plz dont confuse 🙂
There is a problem:
label function is executing for all the opened inner grids every time.for ex: if you have expanded first row already and then you expand second row .so, label function will excutes for both the grids n number of time.
So if i have a condition on label function for a specific inner grid so it goes fail!!
what should i do?
Do you want to apply labelFunction to the group nodes only?
For that you can use groupLabelFunction.
And inside the inner grid, you can use labelFunction which will apply only to the inner grid.
No, i am not using labelfunction for grouping or outer grid. Instead, i am only using it for inner grid. but if i open an inner grid for a row and then opens another inner grid for another row then label function calls for both the grid. main thing is labelFunction is calling for N number of times and N is more than rows in a grid.
You can test it in your own example because i have used same example for testing.
Hi Sachin,
When you open any row, the grid is invalidated because there are some changes like the rows tweening and the scroll bar may appear/disappear, etc.. That’s why, the labelFunction is executed again.
Hi Sameer, I have found one bug in the sample..If innerGrid have more rows than outerGrid then some data will be clipped of innerGrid and it can not scrolls to its last row.
for testing:You can increase children of last row to 10 and make 8 rows in outerGrid.
Thanks
Sachin
ADG has too many bugs,…i dont know what to say..ADG as an itemrenderer for another ADG verticall scroll bar dont perform well..does any one able to solve it..Pls advice me.
Can you please be more specific about the issue you are encountering? Also, it’ll be great if you can log the bug here – http://bugs.adobe.com/flex
Hi, I am working with AdvancedDataGrid control.
I have to hide the disclosure icon’s of particular item only in the
grid based on certain conditions. and i have to open the node when i click on the folder icon.
can any one help me to solve this problem.
Create a new item renderer based on/similar to AdvancedDataGridGroupItemRenderer and write logic to handle these cases inside it.
Hello Sameer,
I also have a question about hiding the disclosure icon of a particular row. Not sure exactly how to do this.
Thanks for any help.
Hi Omar,
You can create a new item renderer extending from AdvancedDataGridGroupItemRenderer and control the visibility of the disclosure icon depending on the data there.
not sure how to do this really, any way you can give me a littler more guidance? Thanks!
Have a look at AdvancedDataGridGroupItemRenderer.commitProperties() and see how the disclosureIcon is created and added to the renderer. You can add your data-based conditions here and control the creation/visibility of the icon.
I Think as a shortcut, You can write a iconFunction for grid and according to condition you can return desired Icon for a row.
eg. icon_function(data:Object):Class{
if(data.children != null)
{
//condition
return IconClass; }
got it, thanks for the help!
If you can consider a third party component, we offer a robust, enterprise ready LOB datagrid that was built to handle various complex hierarchical data displays. It is very hard to do this with the SDK grids, and our product was built to overcome some of the limitations and handles hierarchical data display very well. See http://www.flexicious.com/Home/Ultimate.
Hi! can u explain me any method to insert a check box in single cell of a list….
Have you tried using the rendererProviders property of the AdvancedDataGrid.
Basically, you can create an AdvancedDataGridRendererProvider and set the conditions in which you want a renderer to appear.
Hi – I’m using a renderProvider for an ADG, it’s a DataGrid. I’m using a collection of Generic objects but the renderProvider is creating a new dataGrid for each element in the children array collection. What I want is that it creates one DataGrid with all the elements in the children field. Am I not creating a Hierarchical Data collection correctly? That’s what I’m assuming.
I have the same issue than the last comment(136 | Matt)
I’m using an arraycollection(comming from remote object blazeds) as ADG HierarchicalData’s “source” and its children(another arraycollection) as the ADG HierarchicalData’s “childrenField”. Thanks
Thanks a lot dude…worked like a charm. 🙂
Hi Sameer,
i want the same for multi levels,i tried keeping one more renderer inside it,it dint work for me can u help on this.