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

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

4 Answers 151 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Damian
Top achievements
Rank 1
Damian asked on 27 Aug 2010, 07:50 AM

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>

 

 

 

4 Answers, 1 is accepted

Sort by
0
Dimo
Telerik team
answered on 27 Aug 2010, 04:50 PM
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"
 
<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
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 Public Issue Tracking system and vote to affect the priority of the items
0
Damian
Top achievements
Rank 1
answered on 27 Aug 2010, 05:58 PM
Thanks for the reply, I will give you r suggestion a try.
0
Damian
Top achievements
Rank 1
answered on 27 Aug 2010, 06:13 PM
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?
0
Dimo
Telerik team
answered on 30 Aug 2010, 07:28 AM
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
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 Public Issue Tracking system and vote to affect the priority of the items
Tags
Grid
Asked by
Damian
Top achievements
Rank 1
Answers by
Dimo
Telerik team
Damian
Top achievements
Rank 1
Share this question
or