This is a migrated thread and some comments may be shown as answers.

How to add separator rows in rad grid?

11 Answers 616 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Uday
Top achievements
Rank 1
Uday asked on 08 Sep 2008, 08:08 PM
Hi all,

I am using a rad grid to display data from my data base. The rad grid has bound fields like date, name, user ID, location etc. I need to display the data sorted according to the date field. Also, I need to add a blank separator row after each sorted group. Please help me in this regard.

Thanks
Uday

11 Answers, 1 is accepted

Sort by
0
Uday
Top achievements
Rank 1
answered on 10 Sep 2008, 12:54 PM
Hi Telerik team,
I am awaiting your reply.

Regards
Uday
0
Yavor
Telerik team
answered on 11 Sep 2008, 10:03 AM
Hi Uday,

The functionality requested is not available by default in the control. One alternative which you may consider is altering the bottom border of the item which is the last in a given group. This can be done in the PreRender event handler of the control.
Let me know if this is a suitable option for you.

Regards,
Yavor
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.
0
Tad
Top achievements
Rank 1
answered on 12 Dec 2008, 08:29 PM
I am trying to accomplish something similiar.  I need to insert a "new row" into the grid results without modifying the datasource.

Here is my code of what I'm trying to accomplish, it's just a testing code it obviously doesn't work, but gives an idea of what I'm trying to do.

protected

 

void radGridUserReport_ItemCreated(object sender, GridItemEventArgs e)

{

 

if (e.Item.ItemType == GridItemType.Footer)

{

 

GridDataItem item = new GridDataItem(radGridUserReport.MasterTableView,2,2, GridItemType.Header);

 

TableCell cell = new TableCell();

cell.ColumnSpan = 2;

cell.Text =

 

"Running Total: ";

 

item.Cells.Add(cell);

radGridUserReport.MasterTableView.Controls.AddAt(2, item);

}

}

Any help would be appreciated.

 

0
Yavor
Telerik team
answered on 16 Dec 2008, 09:10 AM
Hi Tad,

Doing this on the server will cause the control to behave inconsistently. Another option which you can consider, which will ensure the control does not behave erratically, is to add the rows to the datasource to which the grid is bound, and then rebind the grid (if it is a standard item).
Additionally, you can add the items in the PreRender event handler of the grid, after getting a reference to the footer item.

Greetings,
Yavor
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.
0
Tad
Top achievements
Rank 1
answered on 16 Dec 2008, 04:02 PM
Thank you for your reply, could you be so kind as to provide a simple example of placing this in PreRender?
0
Yavor
Telerik team
answered on 17 Dec 2008, 07:36 AM
Hi Tad,

Attached to this message, is a small sample, which demonstrates a similar approach.
I hope it helps.

Greetings,
Yavor
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.
0
SDI
Top achievements
Rank 1
answered on 20 Sep 2012, 12:54 AM
Hello Telerik,

Could you supply an example of changing the color/width and style of the border sides (top, bottom, etc.) in the Pre-Render event. I cant seem to find the code needed to do that in documentation or intellisense. There is bordercolor and the other properties for the griddataitem, but not the specific sides. 

Thanks!
SDI
0
Tsvetina
Telerik team
answered on 24 Sep 2012, 03:37 PM
Hi,

To fine-tune the styles in RadGrid, you should better use CSS. You can find some instructions on how to override styles in a RadControl here:
http://blogs.telerik.com/aspnetmvcteam/posts/08-06-17/how-to-override-styles-in-a-radcontrol-for-asp-net-ajax-embedded-skin.aspx

Regards,
Tsvetina
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
0
SDI
Top achievements
Rank 1
answered on 24 Sep 2012, 09:53 PM
Yes I agree completely with that. I was actually referring to Yavor's response:

"...One alternative which you may consider is altering the bottom border of the item which is the last in a given group. This can be done in the PreRender event handler of the control. ..."

So I looked to see if it was even possible to accomplish this with a control server-side property.


0
TonyG
Top achievements
Rank 1
answered on 25 Sep 2012, 01:09 AM
I'm actually looking for something similar to what SDI describes. If I'm sorting by date I'd like to draw a line at the bottom of a set of rows for that date. This means (perhaps) selectively styling the bottom border of the last row with a thicker line. I don't think this can be accomplished by changing the skin. Admittedly, I'm only curious about this as an intellectual challenge.

For a practical application however, and a current client request, I'd like to be able to separate groups of related columns. (I've already filed a ticket that includes this question so I may get the answer there and publish here.)

So for example, we might break the year down in to quarters, where every column is a month (12 columns, 4 quarters). The challenge is to create the appearance of a vertical line drawn down the grid between each quarter. Is that a matter of styling the last month of each quarter so that the right border is thicker than the others?

It would be cool if this could be accomplished with the ColumnGroup feature, with a GroupBorder attribute that specifies how the division between groups appears all the way down a column rather than just in the header.

Just brainstorming...
0
Tsvetina
Telerik team
answered on 27 Sep 2012, 01:36 PM
Hello,

You can dynamically decide which rows should display a border bottom and assign them a custom CSS class. Once this is done, you can provide the styling through CSS. For example:
protected void grdPractice_ItemDataBound(object sender, Telerik.Web.UI.GridItemEventArgs e)
{
    if (e.Item is GridDataItem)
    {
        GridDataItem item = (GridDataItem)e.Item;
        if (item["B"].Text == "1")
        {
            item.CssClass = "bottomLine " + (item.ItemIndex % 2 == 0 ? "rgRow" : "rgAltRow");
        }
    }
}

CSS:
div.RadGrid tr.bottomLine td {
    border-bottom: 1px solid red;
}

If it is column separation that is needed, I assume the multi-column headers feature could provide you with a quite distinctive separation between groups of columns:
http://demos.telerik.com/aspnet-ajax/grid/examples/programming/multicolumnheaders/defaultcs.aspx

Kind regards,
Tsvetina
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
Tags
Grid
Asked by
Uday
Top achievements
Rank 1
Answers by
Uday
Top achievements
Rank 1
Yavor
Telerik team
Tad
Top achievements
Rank 1
SDI
Top achievements
Rank 1
Tsvetina
Telerik team
TonyG
Top achievements
Rank 1
Share this question
or