CustomGrid v1.2
August 15, 2007 by udayms
I am releasing the v1.2 of CGrid. It’s been in drafts for a long while now.This time, a few more basic niceties have been added to the CGrid. 
- Export to Excel (Copy selected rows or entire grid to clipboard and paste in excel)
- User can select columns to view and width of the columns etc. This setting for each grid in the application is remembered across sessions.(For this to work properly, you will have to ensure that you always specify a distinct ID for for each grid in your application.) This feature is very useful, if you are fetching a lot of columns to display but are not sure whether all the users would be interested in all the columns. Now, the user can choose to see columns of his/her choice and that choice is remembered across sessions.
- Fixed the sorting logic in the column sort.
- The CGrid can now take in custom itemRenderer from the caller.
Check it out… For more details about what CGrid is all about, check out this post.
It’s been a long time since I updated the grid component. Hey, for that matter… It’s been a log while since I last posted here. Been quiet a bit busy lately. Anyway, am almost back. This month is also going to be a bit hectic. But, I hope to post regularly from September onwards.
Note: Thanks to all who downloaded CGrid v1.0 and used them in their projects. It really feels nice to see that the component has served some good purpose. The CGrid component is individually responsible for keeping my blog alive and bringing in readers even though I haven’t posted anything new for the last couple of months. So, this component is kind of the ‘old man’ of this blog. Anyway, Lemme thank all visitors for checking it out. Keep downloading. Keep leaving comments ….
[ Demo | Source | Sample Printout ]
[...] CustomGrid v1.0 (or SearchGrid v2.0) December 26, 2006 Posted by udayms in Flex Components, GUI, ActionScript. trackback Update: 15 August 2007 - CustomGrid v1.2 released [...]
[...] Searchable Grid Widget June 30, 2006 Posted by udayms in Scriptlet, Flex, ActionScript. trackback Update: 15 August 2007 - CustomGrid v1.2 released [...]
Hi,
Its really very nice to listen u that,
i have used tree grid componenet in project very successfully.
I am looking for custom combobox having array of checkboxes on dropdown.
cheers,
Prashant D Shelke.
Hi Uday,
I want to use the Custom Grid in my application.
But I have some issues in that. I am getting the data in xml format. Also i have converted it to ArrayCollection. But in the Grid, we have some data which should no be visible to user.
Example is
i m having following data,
Now, The requirement is that user should not able to search the uid as well as uid should not be visible to user. But in Application, we need uid.
How can we achieve this in Custom grid 1.2. ?
Hi,
First off I would like to say this is an awesome custom grid you have been working on and has everything i need in it. I was wondering though i am trying to convert the rssreader example to work with xml if it can. I am use to the normal datagrid provider code but how would i use xml as the array collection. Not to rush you or anything but asap if you could.
Thanks,
Stephen
Oh I dont know if you need this to help but my xml is built like this
C-A
C-B
C-C
C-A
C-B
C-C
C-A
C-B
C-C
Oh i guess your word press kills the code anyways just email me if you need it.
Thanks again,
Stephen
Hey,
First of all great component!
I only got myself into a few problems,
- hiding of columns doesn’t work, de hide:true makes it visible.false. When adding the columns they are visible off but the datagrid still shows the column :S
- Exporting to Excel only copies the values not the headers. When you have alot of numeric values this can be hard.
- Sorting of numeric values sets the value 0 at the top before the highest value.
Im trying to workarround of fix these things, any suggestions are welcome.
Greetings Sjoerd
Thank to your component.
But in Flex 3, I got few problems when try item renderer:
My grid column code:
{colname:”", renderer:renderers.ButtonRenderer}
]);
Compiler throw this error: 1120 Access undified properties renderers.
Thank to yours help.
Hi,
I just change some code in CGrid.mxml, function filterData(), to support user can search what they see. Here is my code:
colNos = colinfo.length;
for(var i:int=0;i<colNos;i++){
if (colinfo[i].labelFunction != null) {
if (colinfo[i].labelFunction(item, null).toLowerCase().indexOf(txtSearchCriteria.text.toLowerCase()) != -1) {
return true;
}
}
}
Hello,
I’m building my own datagrid component with some features you have implemented. Im currently using the advanceddatagrid from Flex3 beta1 (Moxie). For the function to copy rows to the clipboard I have managed to add some extra features.
- Copied rows are now copied sorted how they display in the grid NOT the order how the user clicked on it. Users want it this way, especially when they sort on columns.
- Headers are also copied to clipboard, when you have a lot of numbers this comes very handy!
Here’s the function with thanks to the owner:
private function copyToClipBoard():void
{
var columns:Array = dataGrid.columns;
var textFromItems:String = “”;
var arr : Array = dataGrid.selectedCells;
if(arr.length == 0){
arr = (dataGrid.dataProvider as XMLListCollection).toArray();
}
else
{
//Sort the array on numeric rows then get the data of that row.
var arrCopy:Array = arr;
arr = new Array();
for each(var obj:Object in arrCopy)
{
arr.push(obj.rowIndex);
}
arr.sort(Array.NUMERIC);
arrCopy = arr;
arr = new Array();
for each(var rowNumber:Number in arrCopy)
{
arr.push((dataGrid.dataProvider as XMLListCollection)[rowNumber]);
}
}
//Add Headers
for each (var col:AdvancedDataGridColumn in columns)
textFromItems += col.headerText + “\t”;
textFromItems += “\n”;
for each (var it:Object in arr){
for each (var c:AdvancedDataGridColumn in columns)
textFromItems += it[c.dataField] + “\t”;
textFromItems += “\n”;
}
if(textFromItems != “”){
flash.system.System.setClipboard(textFromItems);
if(dataGrid.selectedItems.length > 0){
Alert.show(”Selected Rows copied to Clipboard.”, “Copy To Clipboard”);
}else{
Alert.show(”All Rows copied to Clipboard.”, “Copy To Clipboard”);
}
}
}
@Sjoerd:
Thanx!!! I shall merge this into the Flexlib code base.
Hello, Great component but I got some problems, header and footers texts imcomplete, datagrid looks blurry on the paper… what can I do? do you have any Idea?
@Rafael: I think it has got something to do with the CSS you are using, can u mail me a screenshot?
@Sjoerd:
- hiding of columns doesn’t work, de hide:true makes it visible.false. When adding the columns they are visible off but the datagrid still shows the column.
For this, did u try clearing your flash player cache by using the context menu? Because, once a column is set to visible using the drop down, this setting is remembered by the component in a sharedObject. And the sharedObject value over-rides the value in the code. So, if you manually made it visible once using the menu, then even if ur code says hide:true, the column would be visible. Try it out… Hope this helps
@udayms:
Ah i didn’t knew that ! Thanks for the reply
Is there a way to bind the cgrid column properties? If I update my column ArrayCollection I want the changes to be instantly displayed in my cgrid (changing a column name for instance).
sorry Udayms but You never reply my email about print title problem?? did you find the problem on that?
thanks
Hey! nice component…good work!
Great component. Thanks for sharing with the world
I would like to use the datagrid component to my application but my problem is that all my data is in XML files and I’m using an XMLListCollection as a dataProvider.
I have made some alterations to the code but I’m not sure If I could ever make it possible to work. I’m a newbie to Flex and I don’t know how to convert an XMLListCollection to an ArrayCollection (if of course it’s applicable).
udayms,
Wow, I just found your datagrid and it rox!! Thanks. I have a question for you.
I’m using Cairngorm for a large application I am building. Before using your grid, the standard grid would update automatically when my web service result handler would update the array collection, since the array collection is bound to the grid. Looking at your grid, I see a function call loadData( … ) to populate the grid. Do you know of a way I could create a listener to call that function when the data is available from my webservice? Using Cairngorm, the result handler for my web service has no knowledge of the view with your grid component. Thus I rely on binding.
Thanks for any help you might offer!!!
@Steven Rieger: actually u can set a arraycollection to the CGrid… CGrid is a wrapper on datagrid. so, you can use - CGRID_ID.dataGrid.dataprovider = ArrayCollection; Hope this solves ur problem…
@Rafael Ochoa: Sorry pal… i got a bit busy at work recently…. shall check the mail backlog and respond asap…
Hey Udayms,
The problem I’m having is when to call the loadData function. If I call it before the results of my webservice are available loadData will error. Using a regular datagrid I set it’s dataprovider to a bound arraycollection thus Flex updates the datagrid automatically.
Do I have to call loadData or can I set the dataprovider to my bound arrayCollection?
Check out our new flex pivot table component! demo is available.
Anyone implemented i18N and L10N using cGrid?
How do I get columndata and Grid data in custom Grid example from
an httpservice calling a JSP page?
gridColumns:ArrayCollection= new ArrayCollection
gridData:ArrayCollection = new ArrayCollection
Good stuff! I stumbled onto your site looking for a solution to a problem I’m having with ItemRenderer. I’m curious if you’ve come across it. I want to use ItemRenderers for my DataGrid, but I still want the text to use the same styles seen on the other columns (the ones not using an ItemRenderer). For example, when I roll over the row, I want the textRollOverColor set for the DataGrid to be picked up by my Label or whatever control I’m using in my ItemRenderer. I know the Label doesn’t support this style, but can you think of a way to get this to work? Thanks! Either way, I’ll be visiting your site occasionally to see what’s in the works.
Hello Again, I need to use Mike Nimer for RowColorDatagrid but not for highlightData I need to use this as a datagrid legend. Can you help me?
thanks in advance..
Uday & Everyone,
Have you guys run into any problems with the itemDoubleClick event handler on CGrid?
In drawColumns, i’ve added:
dataGrid.doubleClickEnabled = true;
dataGrid.addEventListener(ListEvent.ITEM_DOUBLE_CLICK,itemDoubleClickHandler);
then my function is straight foward:
private function itemDoubleClickHandler(event:ListEvent):void {
trace(”double click”);
}
but it never fires. I’m utterly confused. Anyone run into this problem? Note, ListEvent.ITEM_CLICK fires just fine.
Any insight would be helpful. TIA
hi
i am trying to add wordwrap. I have tried it everwhere i can think of
drawcolumns
if (cols[i].wrap != “” && cols[i].warp != null && cols[i].warp == true) {
column.wordWrap = true;
}
and
Hi,
I can bind data to the grid, but the filter search stops working.
Any idea why?
Hey man,
This is a very cool widget, and just what I was looking for in a good flex data entry tool.
I have one suggestion for a change that I made- when copying to the clipboard, only include visible columns. It was a one-liner in CGrid.mxml > copyToClipBoard :
for each (var c:DataGridColumn in columns)
if(c.visible==true) //add this line
textFromItems += it[c.dataField] + “\t”;
Thanks!
[...] components are not free, but there are some open source components (which I have not yet tested): CustomGrid and [...]
I got a blank page while I run the demo. What did I do wrong?
Do I need to do something for the component before running the demo?
I’m a beginner and I hope someone can help me.
thanks a lot,
hi..
its very cool, but after getting columnnames i want to remove column name and add new colum names how to do it?
I can’t get CGrid to work when I do a new on it.
var grid:CGrid = new CGrid();
the dataGrid seems to be uninitialized.
I need to dynamically create CGrids that I attach to dynamically created Panels. Nothing is defined in the mxml initially, other than the Application.
doug
that picture you posted on your blog is sweet dude!
How can I add to footer SUM ,AVG etc. ?