How can I modify the edit form cell layout when using EditItemTemplate controls?

[Damian]

Hello,

I am using <EditItemTemplate> in my radgrid and want to adjust the layout of the edit form table column cells. The problem is that I want to set the horizontal and vertical attributes of the cells that hold the item label and the input control.

So for example, currently the label is centered and the input control looks like it is aswell, so when there is multiple rows (for example, in the below code they get 'Name' and 'Description' fields to edit) they do not line up well in the edit form.

For example, what I want to be able to do is set the label (header?) to align to the right, and the input control (textbox) to align to the left. This would make a clean and consistent look to all the edit rows.

I have tired all types of things and have affected just about everything else, including the form that holds the edit rows, but could not figure out how to affect the actual cells of the edit rows.

Here is the vb radgrid code:

 

 

 

 

 

<telerik:RadGrid ID="sections" runat="server" GridLines="None" Skin="Office2007"
                    OnItemDataBound="section_ItemDataBound" OnNeedDataSource="section_NeedDataSource"
                    AutoGenerateColumns="False" OnDeleteCommand="sections_DeleteCommand" OnInsertCommand="sections_InsertCommand"
                    OnUpdateCommand="sections_UpdateCommand">
                    <ExportSettings ExportOnlyData="True" HideStructureColumns="True" IgnorePaging="True"
                        OpenInNewWindow="True">
                    </ExportSettings>
                    <MasterTableView CommandItemDisplay="Top" CommandItemSettings-AddNewRecordText="Add Section"
                        ItemStyle-HorizontalAlign="Left" AlternatingItemStyle-HorizontalAlign="Left"
                        DataKeyNames="sec_id">
                        <CommandItemSettings AddNewRecordText="Add Section"></CommandItemSettings>
                        <Columns>
                            <telerik:GridBoundColumn UniqueName="sec_id" HeaderText="ID" DataField="sec_id" Visible="false"
                                ReadOnly="true">
                            </telerik:GridBoundColumn>
                            <telerik:GridTemplateColumn HeaderText="Name" UniqueName="label" ItemStyle-Width="300">
                                <EditItemTemplate>
                                    <asp:TextBox ID="label_edit" runat="server" Text='<%# Bind("label") %>' Width="400"
                                        MaxLength="250"></asp:TextBox>
                                    <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ErrorMessage="(required)"
                                        ControlToValidate="label_edit"></asp:RequiredFieldValidator>
                                </EditItemTemplate>
                                <ItemTemplate>
                                    <a href='/view/Default.aspx?sec_id=<%#DataBinder.Eval(Container.DataItem, "sec_id") %>'>
                                        <%#Eval("label")%></a>
                                </ItemTemplate>
                            </telerik:GridTemplateColumn>
                            <telerik:GridTemplateColumn HeaderText="Description" UniqueName="description">
                                <EditItemTemplate>
                                    <asp:TextBox ID="description_edit" runat="server" Text='<%# Bind("description") %>'
                                        Width="400" TextMode="MultiLine" Rows="2"></asp:TextBox>
                                </EditItemTemplate>
                                <ItemTemplate>
                                    <asp:Label ID="description_view" runat="server" Text='<%# Eval("description") %>'></asp:Label>
                                </ItemTemplate>
                            </telerik:GridTemplateColumn>
                            <telerik:GridButtonColumn CommandName="Edit" Text="Edit" UniqueName="EditSection"
                                ItemStyle-Width="30" ItemStyle-HorizontalAlign="Center">
                            </telerik:GridButtonColumn>
                            <telerik:GridButtonColumn CommandName="Delete" Text="Delete" UniqueName="DeleteSection"
                                ItemStyle-Width="40" ItemStyle-HorizontalAlign="Center">
                            </telerik:GridButtonColumn>
                        </Columns>
                    </MasterTableView>
                </telerik:RadGrid>

 

 

 

[Dimo]

Hi Damian,

Here is one possible and simple way to achieve the desired layout. By the way, column widths should be set with HeaderStyle-Width, not ItemStyle-Width.

<%@ Page Language="VB" %>
<%@ Import Namespace="System.Data" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

<script runat="server">

    Protected Sub RadGrid_NeedDataSource(ByVal sender As Object, ByVal e As GridNeedDataSourceEventArgs)
    Dim dt As New DataTable()
    Dim dr As DataRow
    Dim cols As Integer = 4
        Dim rows As Integer = 6
    Dim colName As String = "Column"

    For c As Integer = 1 To cols
        dt.Columns.Add(String.Format("{0}{1}", colName, c))
    Next

    For r As Integer = 1 To rows
        dr = dt.NewRow()
        For rc As Integer = 1 To cols
            dr(String.Format("{0}{1}", colName, rc)) = String.Format("{0}{1} Row{2}", colName, rc, r)
        Next rc
        dt.Rows.Add(dr)
    Next r

    TryCast(sender, RadGrid).DataSource = dt
End Sub

</script>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>RadControls</title>
<style type="text/css">

.rgEditForm td label
{
    display:block;
    text-align:right;
}

.rgEditForm td div
{
    text-align:left;
}

</style>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />

<telerik:RadGrid
    ID="RadGrid1"
    runat="server"
    AutoGenerateColumns="false"
    AutoGenerateEditColumn="true"
    OnNeedDataSource="RadGrid_NeedDataSource">
    <MasterTableView>
        <Columns>
            <telerik:GridTemplateColumn HeaderText="Column 1">
                <ItemTemplate>
                    Column1 ItemTemplate
                </ItemTemplate>
                <EditItemTemplate>
                    <div>
                        <asp:TextBox ID="TextBox1" runat="server" Width="100px" />
                    </div>
                </EditItemTemplate>
            </telerik:GridTemplateColumn>
            <telerik:GridTemplateColumn HeaderText="Longer Column Name Here">
                <ItemTemplate>
                    Column1 ItemTemplate
                </ItemTemplate>
                <EditItemTemplate>
                    <div>
                        <asp:TextBox ID="TextBox2" runat="server"  Width="200px" />
                    </div>
                </EditItemTemplate>
            </telerik:GridTemplateColumn>
        </Columns>
    </MasterTableView>
</telerik:RadGrid>

</form>
</body>
</html>

Regards,
Dimo
the Telerik team

[Damian]

Thanks for the reply, I will give you r suggestion a try.

[Damian]

Ok, that got me part way there, the edit form labels no line up 'aligned right' but the input items still do not line up to the right. (See attached image)

I did not change my NeedDataSource code or any of the grid code, I just added the style sheet code you supplied, did I have to make another adjustment?

[Dimo]

Hello Damian,

Please provide a simple runnable demo, which exhibits the unwanted edit form layout and I will advise further what to change.

Best wishes,
Dimo
the Telerik team