RadGrid aligning Items in GroupHeader under column name

[Santi]

Hello,

I have a radGrid that populates with groups. The group header displays the group header title and aggregate sum as expected but the group header text is not aligned under the column name. All the header text is aligned in the left side of the groupheader. My code for calculates the sum is this:

protected void RadGrid1_PreRender(object sender, EventArgs e)
        {
            RadGrid1.HeaderStyle.Font.Size = 10;
            RadGrid1.GroupHeaderItemStyle.Font.Size = 10;

            GridGroupByExpression gridGroupByExpression1 = new GridGroupByExpression();
            GridGroupByField gridGroupByField1 = new GridGroupByField();

            gridGroupByField1.FieldName = "GroupName";
            gridGroupByField1.HeaderValueSeparator = " ";

            gridGroupByExpression1.SelectFields.Add(gridGroupByField1);
            gridGroupByExpression1.GroupByFields.Add(gridGroupByField1);

            GridGroupByField gridGroupByField3 = new GridGroupByField();

            foreach (totals tot in totalsList)
            {
                gridGroupByField3 = new GridGroupByField();
                gridGroupByField3.FieldName = tot.name;
                gridGroupByField3.HeaderText = " ";
                gridGroupByField3.HeaderValueSeparator = " ";
                gridGroupByField3.FormatString = " (Total: {0})";
                gridGroupByField3.Aggregate = GridAggregateFunction.Sum;
                gridGroupByExpression1.SelectFields.Add(gridGroupByField3);
            }

            RadGrid1.MasterTableView.GroupByExpressions.Add(gridGroupByExpression1);
        }

I need to align the sum under the column name inside the groupheader text.

Thank you

[Daniel]

Hello Santi,

The structure of the header item does not allow such presentation out of the box. If you examine its structure you will notice that there only two cells there and the cell of interest have a colspan 3 (for example). As you may have already guessed the solution would require that you create the missing cells and then split and move the text of the original cell to the newly created ones. Here is a possible way to achieve it, although I don't recommend you going this route as this is not supported.

int invisibleColumns = 1; //rowindicator column

private int GetGroupLevel(GridGroupHeaderItem item)
{
    return item.GroupIndex.Split('_').Length - 1;
}

protected void RadGrid1_ItemDataBound(object sender, GridItemEventArgs e)
{
    TableCell groupCell = null;
    GridGroupHeaderItem item = e.Item as GridGroupHeaderItem;
    if (item != null)
    {
        groupCell = item.Cells[invisibleColumns + GetGroupLevel(item)];
        string[] fields = groupCell.Text.Split(';');

        for (int fieldIndex = 0; fieldIndex < fields.Length; fieldIndex++)
        {
            string field = fields[fieldIndex];
            GridColumn col = (GridColumn)e.Item.OwnerTableView.RenderColumns[fieldIndex + invisibleColumns ];
            item.Cells[fieldIndex + invisibleColumns].Text = field;
        }

        groupCell.Text = fields[fields.Length - 1];
    }
}

protected void RadGrid1_ItemCreated(object sender, GridItemEventArgs e)
{
    TableCell groupCell = null;
    GridGroupHeaderItem item = e.Item as GridGroupHeaderItem;
    if (item != null)
    {
        groupCell = item.Cells[invisibleColumns + GetGroupLevel(item)];
        for (int cellIndex = 1; cellIndex < groupCell.ColumnSpan; cellIndex++)
            item.Cells.Add(new TableCell());
    }
}

<script type="text/javascript">
    function gridCreated(sender) {
        $("#" + sender.get_id() + " .rgGroupHeader .rgGroupCol").each(function (i, v) { $(v).next().attr("colspan", 0) })
    }
</script>

<ClientSettings>
    <ClientEvents OnGridCreated="gridCreated" />
</ClientSettings>

Note that the cells are created in ItemCreated and then populated in the ItemDataBound event. This is needed in order to avoid ViewState-related problems.
You also need to remove the colspan of the group cells on the client.

Regards,
Daniel
Telerik