RadGrid Add Record Layout using GridTemplates

2 posts, 0 answers
  1. Jerry
    Jerry avatar
    4 posts
    Member since:
    Mar 2015

    Posted 29 May 2015 Link to this post

    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>

  2. Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    2466 posts

    Posted 03 Jun 2015 Link to this post

    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:
    Hope this helps.


    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
Back to Top