CustomGrid v1.2
August 15, 2007 54 Comments
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 ]
Flexed 
Pingback: CustomGrid v1.0 (or SearchGrid v2.0) « Flexed
Pingback: Searchable Grid Widget « Flexed
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!
Pingback: Getting started with the Flex compiler « Pete’s notes
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. ?
I have added a little functionality so that in the search text box you can search for multiple strings across columns for instance if you had two columns first name, and last name. You can now type John, smith which will return all rows where both strings are matched just separate string with ‘,’. Below is the code you will need to add
somewhere at the top of CGrid.mxml
import mx.utils.StringUtil;
private var searchArray:Array = new Array();
override the function filterData in CGrid
private function filterData(item:Object):Boolean{
var colNos:int = colDataNames.length;
var count:Number = 0;
//loop through all elements in the search Array
for(var j:Number = 0;j<searchArray.length;j++){
//loop across all columns
for(var i:int=0;i<colNos;i++){
if(item[colDataNames[i]] != null){
//if there is a match increase the count
if(item[colDataNames[i]].toString().toLowerCase().indexOf(searchArray[j]) != -1){
count++;
break;
}
}
}
}
//if all elements match return true
if(count == searchArray.length)
return true;
return false;
}
override function handleSearch
private function handleSearch():void{
//clear the search array
searchArray = new Array();
//change the search string to lowercase and trim
var lowertxt:String = txtSearchCriteria.text.toLowerCase();
lowertxt = StringUtil.trimArrayElements(lowertxt,”,”);
//split into an array and remove any empty strings
searchArray = lowertxt.split(“,”);
for(var i:Number = 0; i<searchArray.length;i++){
if(searchArray[i] == “”)
searchArray.splice(i,1);
}
//if the array is empty add a empty string so all rows match
if(searchArray.length == 0)
searchArray.push(“”);
if(searchType == “filter”){
handleFilterSearch();
}else if(searchType == “highlight”){
handleHighlightSearch();
}
}
Really great work Uday!
Fantastic stuff here…
Just one question, is there a more efficient way to filter?
I have datasets are large as 10,000 rows and it gets quite slow…
Hi Uday,
Which source code is the latest one? Is it:
– Udayms.com OR
– http://flexedtoolkit.googlecode.com/svn/trunk/
Tried to create the grid… somehow the SVN version has “filter” attribute being added to the column header which is not exist in [http://udayms.com/flex/cgrid/v1.2/srcview/index.html]
Thanks 🙂
The SVN always has the latest code…
At the blog I have released only the tested versions….
All the other latest changes would be checked into SVN…
And the code in SVN might have bugs in it as well… So, I would recommend using the swc… but, if u r ok with using the svn code, thats fine too… In that case, if you come across bug… I would really appreciate it if you mail me the bugs…
First of all i would just like to say: Wow this is brilliant. I have managed to load an xml file but the search function doesnt work. Could you give me a hint to how and where i should be loading the xml file. I think it would also be a great thing to add to your main post. Anyway thanks. hope you can help me out.
Ok for people having problems with importing an XML file:
– Start by modifying the RSSReader.mxml and change rssURL: to what is appropriate for you…
-Then make sure the coldata in gidColumns function is the exact name of your various xml entries.
-Do not reference the XML file on your hard drive. Upload it to the web somewhere or run a server on your localhost. i.e. url should look like “http://insertappropriate/file.xml” and not “insertappropriate/sampledata.xml”
-Now you can use the RSSReader.mxml in your project.
CGrid is great !! Thank you Uday hope you keep this running.
Hi. Great grid! Any chance you could add paging capabilities to it? For example, to be able to set the number of records to display and have previous/next buttons? Thanks.
Hi. I really like your grid a lot. I am using it in one of my projects and I have an issue when it comes to loading controls to the cvsControlSpace.
I have two separate grids. One loads icon images just fine as buttons in the control space whereas the other grid loads the images just as images when they are supposed to be loaded as image buttons.
The code that defines the two grids separate controls for the control space’s is virtually identical and I can’t figure out what is going wrong.
here is an example:
[Embed(source=”Assets/img1.gif”)]
[Bindable] public var icoImg1:Class;
private function addButtonImagesToCGrid1():void {
var img:Image = new Image();
img.buttonMode = true;
img.useHandCursor = true;
img.source = icoImg1;
…
myCGrid1.addControl(img);
}
private function addButtonImagesToCGrid2():void {
var img:Image = new Image();
img.buttonMode = true;
img.useHandCursor = true;
img.source = icoImg1;
…
myCGrid2.addControl(img);
}
and for some reason it loads correctly in second grid but not the first. Whereas the first grid is being called and defined first and used first before the second grid is ever used.
Any Ideas as to why this might be happening?
I’m having the same problem with double click as “It”. Has anyone found a solution for this?
Hi
I am using datagrid and grid view to display more than 10k rows. it displays all the rows on the page, but nothing works after it binds the gridview. An idiea anybody what could be the problem.
Thanks in advance sneha
The Datagrid Demo URL doesnt seem to work. Kindly update the link for the demo. It says “Not Found” when clicked.
This looks like a really interesting and useful component. The links to view the source and demo are not currently working. Would it be at all possible to update the link? Thanks for such a useful addon!
Hi,
i wanna see this component but the source link seems to be broken.Plz share it with me asap.
Thanks.
I build one application(sample.swf) with CustomGrid with delete,edit renderers.My application runnng properly.
But, when am using sample.swf(above application) in another application using SWFLoader, am getting runtime error about itemRenderers like “ReferenceError: Error #1065: Variable deleteRenderer is not defined.”
Please help me, How to solve this issue