RadGrid Add Record Layout using GridTemplates

[Jerry]

I have about 20 or so columns. I am looking for a way to lay them out in Edit or Add New Record (EdititemTemplate) so they are not all in a vertical line. Normaly I would use tables but since I am using the GridTemplateCoumn I am not sure how to create a layout. Here is a sample. I would like the text boxes to display the first 10 or so on the left and the last 10 on the right. Can I use tables  with the GridTemplateColumns? Yeah I am new to Telerik and somewhat new to Web Dev.

 Thanks in advance.

 

<telerik:GridTemplateColumn DataField="Last_Name" HeaderText="Last Name" SortExpression="Last_Name" UniqueName="Last_Name">
                   <EditItemTemplate>
                       <div>
                       <asp:TextBox runat="server" ID="Last_NameTextBox" Text='<%# Bind("Last_Name") %>'></asp:TextBox>
                   </div>
                           </EditItemTemplate>
                   <ItemTemplate>
                       <asp:Label runat="server" ID="Last_NameLabel" Text='<%# Eval("Last_Name") %>'></asp:Label>
                   </ItemTemplate>
                   <FilterTemplate>
                       <telerik:RadComboBox ID="LastNameComboFilter" runat="server" DataSourceID="SqlDataSourceLastName"
                           DataTextField="Last_Name" DataValueField="Last_Name" AppendDataBoundItems="True"
                           SelectedValue='<%# ((GridItem)Container).OwnerTableView.GetColumn("Last_Name").CurrentFilterValue %>'
                           OnClientSelectedIndexChanged="Last_NameChanged"
                           MarkFirstMatch="True"
                           Filter="StartsWith"
                           AllowCustomText="True" Width="110px">
                           <Items>
                               <telerik:RadComboBoxItem Text="All" />
                           </Items>
                       </telerik:RadComboBox>
                       <telerik:RadScriptBlock ID="RadScriptBlockLastName" runat="server">
                           <script type="text/javascript">
                               function Last_NameChanged(sender, args) {
                                   var tableView = $find("<%# ((GridItem)Container).OwnerTableView.ClientID %>");
                                   tableView.filter("Last_Name", args.get_item().get_value(), "EqualTo");
                               }
                           </script>
                       </telerik:RadScriptBlock>
                   </FilterTemplate>
               </telerik:GridTemplateColumn>


               <telerik:GridTemplateColumn DataField="First_Name" HeaderText="First Name" SortExpression="First_Name" UniqueName="First_Name">
                   <EditItemTemplate>
                       <asp:TextBox runat="server" ID="First_NameTextBox" Text='<%# Bind("First_Name") %>'></asp:TextBox>
                   </EditItemTemplate>
                   <ItemTemplate>
                       <asp:Label runat="server" ID="First_NameLabel" Text='<%# Eval("First_Name") %>'></asp:Label>
                   </ItemTemplate>
                   <FilterTemplate>
                       <telerik:RadComboBox ID="FirstNameComboFilter" runat="server" DataSourceID="SqlDataSourceFirstName"
                           DataTextField="First_Name" DataValueField="First_Name" AppendDataBoundItems="True"
                           SelectedValue='<%# ((GridItem)Container).OwnerTableView.GetColumn("First_Name").CurrentFilterValue %>'
                           OnClientSelectedIndexChanged="First_NameChanged"
                           MarkFirstMatch="True"
                           Filter="StartsWith"
                           AllowCustomText="True" Width="110px">

                           <Items>

                               <telerik:RadComboBoxItem Text="All" />

                           </Items>

                       </telerik:RadComboBox>
                       <telerik:RadScriptBlock ID="RadScriptBlockFirstName" runat="server">
                           <script type="text/javascript">
                               function First_NameChanged(sender, args) {
                                   var tableView = $find("<%# ((GridItem)Container).OwnerTableView.ClientID %>");
                                   tableView.filter("First_Name", args.get_item().get_value(), "EqualTo");
                               }
                           </script>
                       </telerik:RadScriptBlock>
                   </FilterTemplate>
  
               </telerik:GridTemplateColumn>

[Konstantin Dikov]

Hello Jerry,

I am not sure that I understand the exact requirement that you have, but if you need to have complex custom edit form, you can define your own FormTemplate in the grid. Detailed information and example with that approach could be found in the following help article and online demo:

• Custom Edit Forms 
• Grid - Form Template Edit Form

Hope this helps.


Regards,
Konstantin Dikov
Telerik