Vertical alignment of ImageButton in header

[Kevin]

I have a radgrid in which I have added an image button to the header in the code behind.  Here is where I am adding the button:

protected void RadGridMain_ItemCreated(object sender, GridItemEventArgs e)
        {
            if (e.Item is GridHeaderItem)
            {
                GridHeaderItem headerItem = (GridHeaderItem)e.Item;
                GridTableView table = headerItem.OwnerTableView;
                GridColumn column = table.GetColumnSafe("AddTeamPositionColumn");
                if (column != null)
                {
                    ImageButton addTeam = new ImageButton();
                    addTeam.ID = "btnAddTeam";
                    addTeam.ImageUrl = "~/Images/Volunteer/AddPos.png";
                    addTeam.ToolTip = "Add new team";
                    headerItem["AddTeamPositionColumn"].Controls.Add(addTeam);
                    addTeam.CommandName = "initInsert";
                    headerItem.Style["vertical-align"] = "middle";
                }
            }
        }

This works fine, but in firefox and chrome the button appears at the very bottom of the header with blank space above it (pls see attached images).  It looks fine in IE.  I have tried all sorts of things to effect the alignment and nothing has any effect at all.  Here is the html of the column:

<telerik:GridButtonColumn ButtonType="ImageButton" ItemStyle-Wrap="true" CommandName="addNestedItem" Text="Add new team position"
                    ImageUrl="~/Images/Volunteer/AddPos.png" ButtonCssClass="MyImageButton" UniqueName="AddTeamPositionColumn">
     <HeaderStyle Width="25px" VerticalAlign="Middle"></HeaderStyle>
     <ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" CssClass="MyImageButton"></ItemStyle></telerik:GridButtonColumn>

 

Does anyone know what I can do to make the image button added in the code behind be centered?

[Konstantin Dikov]

Hello Kevin,

The behavior that you are observing is due to the fact that there is a LiteralControl with a non-breaking white space entity set to its Text property. In order to remove that empty line that is breaking your header's cell layout, you could just add the following line in your OnItemCreated event:

(headerItem["AddTeamPositionColumn"].Controls[0] as LiteralControl).Text = "";

And the entire handler:

protected void RadGridMain_ItemCreated(object sender, GridItemEventArgs e)
{
    if (e.Item is GridHeaderItem)
    {
        GridHeaderItem headerItem = (GridHeaderItem)e.Item;
        GridTableView table = headerItem.OwnerTableView;
        GridColumn column = table.GetColumnSafe("AddTeamPositionColumn");
        if (column != null)
        {
            ImageButton addTeam = new ImageButton();
            addTeam.ID = "btnAddTeam";
            addTeam.ImageUrl = "Images/error.png";
            addTeam.ToolTip = "Add new team";
            (headerItem["AddTeamPositionColumn"].Controls[0] as LiteralControl).Text = "";
            headerItem["AddTeamPositionColumn"].Controls.Add(addTeam);
            addTeam.CommandName = "initInsert";
            headerItem.Style["vertical-align"] = "middle";
        }
    }
}

Hope this fixes the issue on your side too.


Regards,
Konstantin Dikov
Telerik

[Kevin]

Wonderful.  That did the trick!  Thanks so much for the reply, Konstantin.