Monday, August 4, 2008

Extended GridView for Asp.Net 2.0 with Custom Grouping and Record Indexing

Grouping in GridView

When we start writing apps in asp.net, we always get hold off if we miss some functionality that we desperately need to roll out the solution. And the case is true always when we write code with Asp.Net's GridView control... When i started with one of the developments (Web Portal), i was running into issues since i dont have those expected functionalities available in the classic asp.net 2.0 controls. I was being asked by the business owners to have grouping in the listing while display data. The only option left off is to go for third party components like infragistics and i have to shed dollars from my pocket to have it done. Having said that, i started thinking.. "Why can't i have a simple control extended from the classic to have those required functionalites instead buying..?". There i started..And i became successfull in delivering the solution .Now the control is complete and i have few more ideas to be incorporated within the control, but in future. The control is free to use and distribute with no restrictions and royality. The current version has only GridView with grouping functionality based on DataKeys and record indexing, all with CSS styles....

How to use the control?



  1. Download the control from the link below

  2. Add the control to your ToolBox panel by locating the dll file.

  3. Drag ZNetGridView on your .aspx form

  4. Define the properties of the control

















  5. For grouping, make EnableGrouping = true and set the CSS for Grouping header inside the "Grouping" cateogry of properties window. To make grouping inside the control, you have to first specify the datakey(s) for data binding and then specify the "GroupingDataKeyIndex" for grouping so that the control will group with respect to that particular datakey. Care should be taken that the GroupingDataKeyIndex should always be less than count of datakey(s)

  6. User has the option to make the header visible inside each group (multi header gridview) as below.













    To enable it, make "ShowColumnHeaderInsideGroups" = true

  7. For record indexing, make "EnableRecordIndexing" = true in the "Record Indexing" cateogory of property dialog box. You can set the header text for indexing column and CSS styles as well




Download
The latest release of the control is available for downlad at http://code.msdn.microsoft.com/ZNetControls

Tested Platforms : IE and FireFox browsers.

72 comments:

Muhammad Mosa said...

Good one!
Do you provide expand collapse for grouped data?!
If you do, do you provide on demand loading of grouped data (details) upon expand of the group?

It would be great if you share your code so people can know how you built it and adapt it.
Keep it up

dotNetSoldier said...

Yes,,,i would be extnding the control to include more functionalities..

ss said...

Hi,
Iam trying to use this control. But I get the following error

"There was an error rendering the control. Datakeys Index not specified for grouping"

Where do I specify the datakeys index and how do I get rid of this error.

Thank You
Shri

dotNetSoldier said...

Shri,
I hope you know how to define datakeys in gridview for data binding. Once that is done, you have to specify the datakeyindex for grouping in ZNet control. You can see the property "DataKeyIndex" under "Grouping" category in property window of GridView control.

Eg:- You have to datakeys comma seperated, say ProductName, Category and you want to group with respect to category. Then you have specify the datakeyindex for grouping as "1" since the value starts from zero index.

Hope this helps. Let me know how it goes. I would be there to make it happen for you..

Cheers..

SR said...

I have the same problem of Shi...

System.Exception: DataKeys not specified for grouping
thrown at ZNet.Controls.GridView.DrawGroup(HtmlTextWriter writer) +906

my control looks like:

<ZNet:GridView ID="grdList" runat="server" AutoGenerateColumns="true"
EnableGrouping="True" GroupingDataKeyIndex="0" DataKeyNames="RAGSOC">
</ZNet:GridView>

Thanks
Sandro

SR said...

I have resolved setting Datakeynames array in the code instead on control...

grdList.DataKeyNames = new string[1] {"RAGSOC"};

Thanks and compliments for your job !!

dotNetSoldier said...

SR,

To enable grouping in my control, you should specify the index of datakeys to be grouped.

For example, if you have only one datakey, make GroupingDataKeyIndex = 0. If you have 2 dayakeys specified, the value for GroupingDataKeyIndex can be either zero or one.

You dont have to write any code in code behind, nor you have to send arrays of datakeys. Just specify the datakey for the control and specify the index of datakey for grouping..

Let me know if you need more help!

SR said...

The problem was that I set the datasource and make databind() in an event (eg button_click) and your Render method triggered in the page_load throwing the exception. I resolved setting EnableGrouping=true just before binding the grid (and only if recordnumber > 0).

Thanks again
Sandro

SR said...

A little suggestion: it would a nice feature to have a css property (or almost a Bold true/false) for the TR of the repeated header row (if ShowColumnHeadersInsideGroups = true)

have a nice day
Sandro

dsheardown said...

Very cool! just what I was looking for! I am using Gaia ajaxwidgets and this grid for grouping, and it looks really cool.. the datakeys/grouping index is fine, and works well. Would be good to hear of new enhancements for sure.

If you haven't already got one, I would add a link to let people make donation!

Renfaire Man said...

I am sorry, but I am truly feeling dumb at this moment. I am getting the following error and have not a clue.
Unknown server tag 'ZNet:GridView'.

Help!

dotNetSoldier said...

renfaire,
You have to add the control in to your toolbox by locatin the downloaded url. Once that is done, you just drag it over to ur page..

Renfaire Man said...

I did add the control dll to my toolbox, and I show the control registering on the page. I see the control in the bin folder, but when I try to compile it I get the "unknown server tag" error.

dotNetSoldier said...

look into the web.config and see whether the control is registered or not. If not you do it manually. However, it should happen automatically. Which framework are you trying with? Which version of IDE?

Renfaire Man said...

Okay, the assembly is not registering in web.config. I am using VS2005, .Net 2.0 SP1. Can you tell me what the code is that needs to be in the web.config?

dotNetSoldier said...

Actually it is not mandatory that the control be registered in the web.config. If you want to do it mannually, add the control with prefix tag inside <controls> tag in web.config. Can you see the znet dll file in the reference list of the project?

Renfaire Man said...

Okay, at this point, I truly give up. I suspect it's something simple, but deep into how I have this set up that's killing me. Thanks for your time.

kumarp said...

Hi I want to change font size as well as thinkness of groupheader text. Anywasy you did nice job.

Thanks

kumarp said...

Hi renfaire man I saw your post I have solution for that. You just remove that grid and drag and drop new grid and do it from beginning you will surely get it.

dotNetSoldier said...

Hey Kumar,

You can freely defined your own css for the header style and specify the css class name in the properties of znet gridview...

kumarp said...

Hi

For groupheader as well i znetfridview class? I tried but its not working. I want to get text in the center which is we define by every groupheader text.

dotNetSoldier said...

Kumar,
While applying css to header, you should remove the color properties from the property window of the controller.I have the same control and i am using with no issue

Mag said...

Great control!
Thank you very much. It's very useful for me.
I have a question.
I'm grouping data by a "date" field. What can I do to Format the group header title? Now it's showing like: 07/15/2008, 07/30/2008.
I hope you can help me with that.
Thank you again

dotNetSoldier said...

Mag,
Unfortunately, i haven't defined that property currently. You can expect it in my next version.

For the time being what you can do is, just create a formatted date from the database (as a string) while binding and add it as one of the datakeys of gridview. Then use this key index for your grouping.

kumarp said...

Hi

This is kumar again. I have one question I want that I have made groups and I dont want those name in columns as well. I think you my question. Ex as you have shown ..Produce is shown in column as well as grouping row So is it possible that I need only in row not that thing in column.

Thanks

Sergio said...

Excellent,
but I want to do a sum some columns for a group and a general sum

for example of a grid

costumer date quantity
Peter 19/10/08 1
Peter 20/10/08 2
Total Quantity 3

John 19/10/08 5
John 20/10/08 8
Total Quantity 13

Total General 18

What can I do it? I use Visual Basic

Thankyou

dotNetSoldier said...

Kumar,
You don't have to display the field as a column apart from grouping. Grouping depends only on datakeys. Having said that, you can do it with no doubt

dotNetSoldier said...

Sergio,
That functionality is not available in the current version. You may have to wait for the next release.

Rem said...

Your blog is very nice...
visit my blog asp.net example

kegofbud1 said...

Very nice job! I am looking forward to the next release, hoping for a function a sum/average/count for the groups. That would really make this control worth it's weight in gold. Keep up the great work!

Ed said...

When I use the control, If enableGrouping = true in the properties, I get the Error Rendering the control. Datakeys not specified for grouping. I have to do this via code. gridview1.enablegrouping = true. I have DataKeyNames = Office and GroupingDataKeyIndex = 0

[ZNet:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" GroupingDataKeyIndex="0" FontBold="True" GroupHeaderBackColor="Navy" DataKeyNames="Office" Width="740px" OnRowDataBound="GridView1_RowDataBound">
[Columns>
[asp:BoundField DataField="Office" HeaderText="Office" SortExpression="Office" />
[asp:BoundField DataField="Name" HeaderText="Name" SortExpression="Name" />
[asp:BoundField DataField="Title" HeaderText="Title" SortExpression="Title" />
[asp:BoundField DataField="Mobile" HeaderText="Mobile" SortExpression="Mobile" />
[/Columns>
[/ZNet:GridView>


Also the header visible is not working for me. It not hiding my grouped field (office). I Need to "erase" the field during databinding event.

Is there something I'm not reading?

(dont know how to post code to the the comment. so I changed the < to [ to hide it in the post).

Jen said...

The blog is helpfull...
visit also asp.net [c#]

rags said...

This Control works like a charm.But like the other user mentioned, i need to expand/Collapse the grouped data and show it on demand. For some reason, i can't have boundField visible set to false, it still shows the header and the next column shows up in current boundfield. Also if this is not big deal , can you please make it open source or throw a hint on how to render multiheader gridview with grouping. Also can we make this AJAX enabled.

Amit Deshpande said...

Looks Nice .. very good control. Can we have something like subtotal apart from the group headings ? I desperately need something with subtotals

Marc said...

I am using the control and everything is working ok. I have 33 columns. The Group Header doesn't fill all the columns it stops at column 20. I checked the source of the page and it's spans the td with a value of 20.

How can I make it span all the columns. Everything in my Gridview is loading dynamically.

Thank you,

Great control.

Marc said...

I am using the control. it's a great one. I am having an issue with the group header it doesn't span all the columns. I have 32 columns and I am loading everything in my Gridview dynamically.

I checked the source of the page and it shows this: td colspan="20"

Where is this being set?

Thank you,

Marc said...

I am using the control. it's a great one. I am having an issue with the group header it doesn't span all the columns. I have 32 columns and I am loading everything in my Gridview dynamically.

I checked the source of the page and it shows this: td colspan="20"

Where is this being set?

Thank you,

Marc said...

the grouping breaks if in the gridview you merge columns. I have a gridview that on the rowdatabound I remove columns and use colspan to merge cells together.

the header of the gridview spans the number of columns and not the width of the gridview I think.

Is there any work around this?

Thank you,

Marc said...

hi,

I sent you two comments before about the colspan issue with the columns.

I thought of taking the border out of the group header so I assigned a css class but it's not working. I can't remove the color properties from the grid they are required.

Please help,

patrick said...

I download this grid for the grouping feature which is nice. But I noticed that the footer only appears at the very end of the grid. Is there a way to have a footer for each group?

Brenden said...

Great control! Thanks! Wondering if I have the ability to change the group header text? I am using this with LINQ and have my CodeID (grouping by) as a FK in the table I am quering. So it is displaying the ID vs the Name, which is what I really want. Any thoughts, ideas?

BPK

phil-c- said...

I am getting the error message:
DataKeys not specified for grouping
which comes up when I try to add a Filter on the SqlDataSource - do you know any solutions to this, or an alternative?
Thanks

RRave said...

Invitation to new programming Resources Website



Dear Sir,

I hope you are doing well. I got this email address from one of your contribution web site. I have launched a web site www.codegain.com and it is basically aimed C#,JAVA,VB.NET,ASP.NET,AJAX,Sql Server,Oracle,WPF,WCF and etc resources, programming help, articles, code snippet, video demonstrations and problems solving support. I would like to invite you as an author and a supporter.
Looking forward to hearing from you and hope you will join with us soon.

Thank you
RRaveen
Founder CodeGain.com

goedings said...

Is there a way to make a page (paging option) per group ?

avarndel said...

Are you considering adding scrolling, collaspe and expand features?

Pk said...

I added ZNet in My toolbox and defined 2 datakeys named as Headline,Type. In grouping control is set its index as 1 because i want to group according to type.. But these all stuff works well if I have some data, if my database doesn't contain any data then it throws an exception "Datakeys are not defined for grouping".
So what to do??
I am in a unwanted trouble....
Plz help........

Pk said...

It works well only when their is number of row must be one, if number of rows will be none then it throws an exception...Datakeys are not defined for grouping,....
Is their is any solution??

pp said...

how to add custom text in grouping?

gas_greece_wind said...

I fixed this exception by this piece of code behind;

protected void GridView1_RowDataBound (object sender. EventArgs e)
{
if (Gridview1.Rows.Count > 0)
GridView1._EnableGrouping - true;
}

Of course in page i have set the EnebleGrouping to false, and set the OnRowDataBound="Gridview1_RowDataBound".

gas_greece_wind said...

I fixed this exception by this piece of code behind;

protected void GridView1_RowDataBound (object sender. EventArgs e)
{
if (Gridview1.Rows.Count > 0)
GridView1._EnableGrouping = true;
}

Of course in page i have set the EnebleGrouping to false, and set the OnRowDataBound="Gridview1_RowDataBound".

JJMC said...

i am using znet grid, i bind it to a SqlDatasource and when i run the page i get this error. "Unable to cast object of type 'System.Web.UI.WebControls.Label' to type System.Web.UI.WebControls.Table"...i have not made any changes to the properties of the grid, can someone help.

JJMC said...

I am using the znet grid, no modifications to grid or properties , when bind to a Sqldatasource i get this error "Unable to cast object of type 'System.Web.UI.WebControls.Label' to type 'System.Web.UI.WebControls.Table'."... can someone help.

Tuna Tech said...

thanks gas_greece_wind it is working now good solution

Kumar said...

Hi,

I added a checked box in the the grouped data, but even if I check the checkbox the system still recognises it as unchecked. (i.e. if the initial state of the checkbox is unchecked and i check the checkbox and then submit/iterate through the gridview it still thinks that the checkbox is unchecked.

Please help!

Phil said...

Got this working very quickly, and found it to be very useful and effective.

Promoting it on my blog:
http://atominnovation.blogspot.com/2010/04/aspnet-how-to-group-data-in-gridview.html

ramneek said...

Is the source code for this control available for download?

자바웍키 said...

Thanks!!! This is a Cool...

pratyush said...

hi friend,
i've the problem of setting the datakeys....

actually i want to load the data onto the gridview dynamically through a query.........
due to this my datakeyname vary according to the query and the constraints......

so could u help me out as to how to set up the appropriate datakeys and enable grouping within it....


thanks,
Pratyush

pratyush said...

hi friend,
i've the problem of setting the datakeys....

actually i want to load the data onto the gridview dynamically through a query.........
due to this my datakeyname vary according to the query and the constraints......

so could u help me out as to how to set up the appropriate datakeys and enable grouping within it....


thanks,
Pratyush

Sara's said...

hello sir,
i gone through your complete article for which you posted for "Extended GridView for Asp.Net 2.0 with Custom Grouping and Record Indexing" its very good and very useful for me, if you send me source of the above article.

Pheonix said...

The fridview is gr8 of use.
I would like to know whether it is possible to add item template in the group header.

Pheonix said...

The gridview is gr8 of use.
I would like to know whether it is possible to add item template in the group header. if so please do let me knw

fadi77_net said...

Hi, the grid is duplicating the groups(check the grid picture please), how it happened?

Bezabeth said...

It worked for me, but for a reason, I cant center header titles. :(

Bezabeth said...

it works but I can't center the header column titles. Could u help?

adams said...

Hello,
your grid is excellent.
is possibile export grid into excel?
thank you

Massimiliano said...

Hi!

Some months ago SERGIO asked about sum functionality and the aswer has been:

dotNetSoldier said...
Sergio,
That functionality is not available in the current version. You may have to wait for the next release.

October 20, 2008 10:20 AM

Any news about this or someone could help me to do that?

THANKS!!

TJ said...

Hi,
I am trying to use the Net gridview and it's adding SL. column as you have shown in the snap shot.
I want to replace the SL. to Sr.
How can I do that??

Edd Li said...

what happened to the creator of this control?, I can't see more updates of this powerful control! :-(

Danilo´s Blog said...

Hi,
I am trying to use the Net gridview and it's adding SL. column as you have shown in the snap shot.
I want to replace the SL. to Sr.
How can I do that??

----

Try with RecordIndexColumnHeaderText="Sr."

Adrian Josue Barahona Osorio said...

HOLA AMIGOS SOY MUY NUEVO EN VB Y ME HE TOPADO CON ESTE PROBLEMA QUE QUIERO AGRUPAR ENCABEZADOS DE COLUMNA Y VEO Q EL GRIDVIEW Q TRAE POR DEFAULT NO TRAE ESTA UTILIDAD PERO ZNET GRIDVIEW SI ;) NO SE SI ALGUIEN ME PODRIA FACILITAR UN EJEMPLITO PEQUEÑO!!! SE LOS AGRADECERIA MUCHOOOO BENDICIONES

Adrian Josue Barahona Osorio said...

Hello friends I am new to vb.net and I need to group columns and I have not the slightest idea how!! : (Anyone of you could pass me a small example to guide me, thanks blessings