Controls Layout in dynamic CommandItemTemplate

[Ron]

Currently, I have a dynamically templated RadGrid. The RadGrid's commandItemTemplate is created during runtime. In this case, the ImageButton will appear on the left of the command template and the LiteralControl will be next to the ImageButton. How can I position the LiteralControl in the middle of the  CommandItemTemplate? I created the CommandItemTemplate using the ITemplate interface as shown below. Appreciate some help on positioning the LiteralControl to be in the middle/center of the CommandItemTemplate.

RadGrid1.MasterTableView.CommandItemTemplate = new CustomCommandItemTemplate(tableName);

 

//The CustomCommandItemTemplate class

public class CustomCommandItemTemplate : ITemplate

    {

private string tableName;

public CustomCommandItemTemplate(string tableName)

{

this.tableName = tableName;

}

public void InstantiateIn(System.Web.UI.Control Container)

        {

            ImageButton imgAdd = new ImageButton();

            imgAdd.ID = "add_button";

            imgAdd.CommandName = "InitInsert";

            imgAdd.ImageUrl = "~/Images/add.png";

            Container.Controls.Add(imgAdd);

 

            LiteralControl lit = new LiteralControl(tableName);

            lit.ID = tableName;

            Container.Controls.Add(lit);

}

}


[Dimo]

Hello Ron,

This is a general HTML/CSS question. In order to achieve the desired layout, you can insert the table name inside a paragraph (<p>) or a <div> with a text-align:center CSS style applied. In order to keep the ImageButton and the paragraph on the same line, you should float the image button (apply a float:left CSS style).

Sincerely yours,
Dimo
the Telerik team