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

Vertical alignment of ImageButton in header

2 Answers 298 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Kevin
Top achievements
Rank 1
Kevin asked on 02 Jun 2015, 07:55 PM

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?

2 Answers, 1 is accepted

Sort by
0
Accepted
Konstantin Dikov
Telerik team
answered on 05 Jun 2015, 12:53 PM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Kevin
Top achievements
Rank 1
answered on 05 Jun 2015, 03:14 PM
Wonderful.  That did the trick!  Thanks so much for the reply, Konstantin.
Tags
Grid
Asked by
Kevin
Top achievements
Rank 1
Answers by
Konstantin Dikov
Telerik team
Kevin
Top achievements
Rank 1
Share this question
or