Posted by: Sameer on: February 18, 2008
There is a post in Flex component Yahoo group on how to show a 3-state checkbox in an AdvancedDataGrid.
It has been implemented for the Flex Tree Control in the Flex cookbook.
I thought lets write a similar example for AdvancedDataGrid. I made some changes in the original sample and here it is; working for the AdvancedDataGrid control.
Great example! I was simply trying to get unique images prepended to the label in the tree. You’re work saved me a ton of time figuring out this new Advanced DataGrid and its new renderers.
Thanks!
RJ
Is the code under opensource license? Thanks.
Sameer,
Thanks for the example. Do you have a similar example using AdvancedDataGridItemRenderer which puts the CheckBox in a different column than the tree (instead of AdvancedDataGridGroupItemRenderer)? Thanks.
Sameer,
Just a renderer with text and a checkbox would be ideal. Thanks.
Jason
Sameer,
Can you point me to any examples that show drag and drop between two ADGs with slightly different object models (but both based on HierarchicalData)? Thanks.
Jason
Hi, I was wondering how can you get the status of the checked items, let’s say.. to get the data from all the items checked?
Hi
Sameer
i had seen ur example it is nice
but can give the same checking checkBox example with
the flat data because i am using flat data from DB
Hi Sameer,
ich have also data from a database and an ArrayCollection instead of a XML structure.
Your code is not working for me with the ArrayCollection as dataProvider.
I tried 2 days to figure out the difference but it’s not working.
That is very sad
Yes i have a property called “checkbox” and therefor item.checkbox
I think there is a little problem with the “HierarchicalData”, because i used the normal ArrayCollection as DataProvider and not the HierarchicalData(ArrayCollection). And so the child-checkboxes were not refreshed.
So i try to convert my ArrayCollection to HierarchicalData.
Hi Marcus
did u get ur proplem solved..
Checkbox are not getting updated, when I click arrow mark of group node it gets updated..
Please let me know if u have fixed the problem
Thanks
vijay
I don’t get it. I change the checkbox property of my item, but the “set data(value:Object)” function is not fired. That i really strange.
Should I post the full code here or is it better to send you a mail with the full example?
Hi!
First of all, thank you for this control. I’ve found it very useful.
Can you give me some help to make it dinamic?
I mean, i`m using it with datas got from a server. And when i`m updateing the data to the advancedDatagrid.dataProvider, the list item that have been checked dosent trigger the parent node to “open”.
Thanks.
Hmm im pretty new to Flex so I`m trying to explain my problem.
I have to grids:
- a simple datagrid contains some editable row (id=”dgFiles”)
- an AdvancedDatagrid with your groupItemRendere. (id=”adgTexts”)
When the user selects a row in dgFiles, the script sending a request to the server, and getting the ids that should be checked in in the adgTexts. So the main goal is to save the checked rows id from the adgTexts and attache it to the selected item in the dgFiles.
Here are the datagrids:
</code
ehh cant post code here, sry.
Is the CheckADGRenderer.as file customized for the ‘label’ and ’state’ columns in your example? I can’t seem to get it work.
I am using an ArrayCollection and I added a property called ’state’.
Although I have 4 other properties that I am displaying in the advanced datagrid. Do I need to include all of them in the AS file?
Also, you stated how to get the checked values, but I’m not sure where to place the code. Could you post an example?
ps. great work!
Hi Sameer,
Excellent Sample. Can i use this code to have a checkbox in tha grid header? if so then how can i acheive the functionality of “Select All” in Datagrid control.
Thanks in advance.
Vinitha
Hello Sammer,
I need to use the CheckADGRenderer as an ItemRendenderer instead of an ItemGroupRenderer.
I have a grid with hierarchical data, but I need the checkbox in others columns.
For example:
property1 property2
HData1 true false
HData1A true false
Item1AA true false
Item1AB true false
HData1B true false
Item1BA true false
Item1BB true false
Do you think that you can update the code to do this?
I’m very new in flex and I can’t get it working.
Thank you very much.
(Excuse my poor english).
I want to use the CheckADGRenderer.
Can I post code here?
I use the ExternalInterface to get the data from a js function that shoots a AJAX.
I transform the XML in a ArrayCollection, then I populate the grid with it.
I need to use the checkboxs in diferent columns. And the CheckADGRenderer would give me exactly what I want (if I could get it work correctly…)
I need to Embed 2 LinkButton inside Advanced Datagrid. If i tried to embed ny Advanced grid position doesn’t maintain for link button proerply or If i keep it as 2 Seprate Column as link button column Scroll bar disappears for expanded Advanced Grid…. do you have solutions for that…
Hi Sammer,
Thank you for your example and hints. I need to use flat data and I adapted the example to use flat data but I could not get it initialize with three states (only checked or unchecked).
I could not find a smart way to do it. Do you have any suggestions?
I will send you my sample by e-mail I hope it is OK.
Haluk
Quick update for those trying to get this working with a flat GroupingCollection. The set function isn’t getting fired and the cascading checkboxes aren’t being updated because the GroupingCollection refreshes only on demand for performance reasons.
To make it work beautifully, all that’s needed (in addition to above) is to add the line below at the end of toggleChildren:
adg.dataProvider.refresh();
Thanks Sameer for figuring this all out… I would never have thought of using updateDisplayList for the alignment!
this answered my question
thanks
FYI!
For the message I read earlier where the dot appears at the bottom when compiled with Flex 3, the solution to fix that would be to make the following change.
In the CheckADGRenderer class under the updateDisplayList function, set the value for myImage.y = myCheckBox.y – 3 instead of myImage.y = myCheckBox.y + 4 within the if condition for STATE_SCHRODINGER.
Is it possble to control the depth till which CheckBox are rendered? Say if in oen of the child I dont have property state then where / how I shud specify that for a particular level of node/leaf there are no checkboxes?
but renderer wont help as I need the checkbox with the hierarchial data. I have tried putting check in the component but its still rendering the checkboxes till the most lowest leaf node of the tree. Any other workaround or placeholder in code as to whr i can put the check?
Is there any way that I can render a TextInput and a Label inside AdvancedDataGridColumn (Header)? And while clicking the Label the default sort functionality of column must happen/
Sameer, this example is grt… I am looking for a small variation from this example. I need the checkboxes only for the grouped items. So is there a property which i set ??? A code snippet wud be really appreciated and its helpful to a grt extent
I have another question about the license of your component. You said it’s open source, but which open source license do you use? Is it possible to use it in an commercial product without any charge or limitations?
Hey Sameer,
Thanks a lot for this component, it works really well. However, I do have a question that hopefully you can provide some clarity.
For instance, in your example, the datasource used is an XMLList, where all ‘folder’ nodes have the state attribute = “unchecked”. As expected, when the datagrid is rendered, all nodes are indeed unchecked.
This issue I run into is, if any of those state attributes are modified to “checked”, only the corresponding folder node is actually checked. The parent nodes do not have the schrodinger dot.
Say, for instance I have a function that assigns
a.b.c.@state = “checked”
Right now, when I do that I get
* a – unchecked
** b – unchecked
*** c – checked
Is there a function that can be called, after modifiying the state attributes, to make it show correctly?
* a – schrodinger
** b – schrodinger
*** c – checked
I am not sure what is needed to be done – refresh/update the dataprovider?
Many Thanks!
Hi Sameer,
Can u make all the checkboxes(Including parent and Child) selected on a Button click?
Lets say we have two buttons “Select All” and “Deselect All” doing selection and removing selection.
Hi Sameer,
awesome code. Really helped me understand some stuff.
I still have a problem though… I would like to enable dragging between items. I added this in the datagrid.
—
dragEnabled=”true”
dropEnabled=”true”
dragMoveEnabled=”true”
—
When I try to move something,I get the following error
Error #1009: Cannot access a property or method of a null object reference.
The error comes from : function set data(value:Object)
Any help would be greatly appreciated.
Thanks
Hey Sameer,
I was able to do it myself.
Thanks
Hi Sameer,
I have a currency column which i was formating using a CurrencyFornatter.The things were working fine.But now my client wants that i should make currency column a hyperlink column.
So now iam using linkbutton as my ItemRenderer,but the problem is iam loosing Formatting.
here is my code.
The data is coming as it is.
I think i need to set label property of linkbutton with the formatted rather than pure datafield.
Thanks in advance
Iam not able to paste the code
Hey sameer,
I was able to do it myself.
Thanks anyways..
Hi, Sameer.
It’s a great component, we are using it in our enterprise application. However, we have a problem we can’t solve.
We have our ADG inside a module. the module is set to 100% width and 100% height. When the module is dropped inside a container wich does not provide enough space for the ADG, the module shows a vertical scroll bar, as expected.
The problem is that when one of the grouped check is clicked, moving the scroll up and down shows that the rest of the grouped items are not always being refresed correctly. It happend only in grouped checks, and never in item checks.
Everyplace where we combine the scroll bar and the item renderer we have refreshing problem, and we don’t know the reason, any idea?
Hi, Sameer
We finally found the problem. We are gruping an ArrayCollection via Actionscript, using GroupingCollection objects. So the grouped items does not have an state field like the item ones.
We solved this issue by modifying the setCheckState function this way:
private function setCheckState (checkBox:CheckBox, value:Object, state:String):void
{
if (state == STATE_CHECKED)
{
checkBox.selected = true;
}
else if (state == STATE_UNCHECKED)
{
checkBox.selected = false;
}
else if (state == STATE_SCHRODINGER)
{
checkBox.selected = false;
}
else checkBox.selected = false; // NEW LINE
}
Hope this helps. Thak you
Thanks Sameer ..
I tried collectionview.itemUpdated(item); it worked..
I have one more issue..I have two grouping field, I want to change just the label of the first grouping field with other column value which is not grouped..
i have this code in GroupLabelFunction to calculate no of childnode and display along with group label..
grpFunc(data:Object,column:AdvancedDataGridColumn):String
{
var gc:IGroupingCollection = adgChequeInfo.dataProvider.source as GroupingCollection;
var childCount:int = gc.getChildren(data).length;
return data[gc.grouping.label] + “(” + childCount + “)”;
}
instead of showing the group label of grouped item I want to show the other columns value..[eg am showing id field , instead want to show the name for that id field]
Hi Sameer,
Great example, thanks!
Jay on March 20, 2008 had asked how you can place the checkbox in a different column in an ADG and I had a similar question, but with the functionality that you currently have implemented for the three states.
Basically, exactly the same functionality you have already but just moving the checkboxes to a different column and having the tree in the first column (and maintaining the parent/child checkbox relationship).
Any help would be awesome…thank you so much.
Dan
Nevermind…figured it out using your code…thanks for the example!
ha hi dude..,
i want the same logic to be done but with the arraycollection as an dataprovider.. i mean by using the grouping fields..
Hi Sameer,
first of all I should thank you for this great control!
I’m using it in my application. my data provider is an array collection (I have a flat data). and in the UI, user can add grouping to the data! my problem is that, we I select a parent(check the checkbox) the children don’t get notified and their state don’t change, or if a parent is selected and i deselect one of its children, the parent doesn’t get notified and its state doesn’t change!
maybe it’s because my data provider is not hierarchical, so I need to change something in your code!
I would appreciate your help,
Thanks
Gol
Hi Sameer,
Comment 38 solved my problem
once again thanks for the great post
Hi Sameer,
I’m trying to give the user the ability to turn the checkboxes on and off! The following code is the function that I’m writing. getNodeModification() returns the attribute in xml report which says wether the checkboxes should be on or off! so I don’t actually know how to write the else part (i.e. when nodeModification == “off”).
I tried setting groupItemRenderer to null, but this removed all of my groupings!! any suggestions?
Thanks
private function enableNodeModification()
{
var nodeModification:String = getNodeModification();
if(nodeModification == “on”)
{
myADG.groupItemRenderer = new ClassFactory(CheckADGRenderer);
}
}
hi
sameer i am using ur ADGRenderer it is very nice and working fine for me. may data is in the form of objects so i made flat data and it is working fine for me say i had 3 entries in my ADG and i checked 2 of them and say delete it working fine but when i try to do with last entry after a server call and after deleting the entry when it comes to rerender the Advance Data Grid it is throwing an error
in ADGRenderer at line no 211 that is
super.measure(); i am not getting why it is happening
please help thanks
Sagar
I have an adg hierarchical data with check box as itemrender in a separate column.I want to display/delete the checkbox on tree close/open .Is there any way to do ?
I need to check box to display at the parent level when tree is closed and only in child level when tree is open
Hi,
Is it possible to lock the checkbox that will not user check or uncheck with certain criteria?
Thanks in advance.
I use a ArrayCollectionWithFilters as provider.
And I specify for every item if it is checked or not(setting the Version field) and i want the parent category to be checked if all children are selected.
I use GroupingCollection and I don’t know how to set check the grouping Object on creation of grid.
Now I didn’t multiselection columns when check box click in advanced data grid in flex3.I want to do like gmail ,when check box click,that row selected and other click like that.But it is not yet okay now.I can’t find any source code like that in Internet and I can’t develop by myself.Help me!
March 10, 2008 at 8:21 pm
HI, thanks, can you you perhaps add another column to your grid, I have also used the same technique, my grid column with the rendered check box do not resize correctly if wordWrap=”true”