Customising layout for EditForm template in RadGrid for AJAX

4 posts, 0 answers
  1. Zaly
    Zaly avatar
    7 posts
    Member since:
    Sep 2011

    Posted 05 Oct 2015 Link to this post

    Hi,

    I have a RadGrid (for AJAX) in my web page. I chose to use EditForm template and I wish to customise the design of the edit form. My questions are (please refer to the attached jpeg file):

    1. How do I set the column/cell spacing between labels and controls (Item A in the file)?

    2. How do I set the row spacing (Item B in the file)?

    3. How do I change the vertical alignment of the label (Item C in the file)? In this case, I want the label to be aligned at the top, rather than middle.

    4. How do I change the spacing between the last row of user control and the command button row (Item D in the file)?

     

    My markup for the RadGrid is as below:

     

    <telerik:RadAjaxPanel runat="server" LoadingPanelID="RadAjaxLoadingPanelMain">
    <telerik:RadGrid ID="RadGridDegreeClassRules" runat="server" AllowPaging="True" AllowSorting="true" PageSize="10" Font-Names="Segoe UI"
        OnNeedDataSource="RadGridDegreeClassRules_NeedDataSource" HeaderStyle-BackColor="DarkCyan" HeaderStyle-Font-Bold="true"
        OnItemCommand="RadGridDegreeClassRules_ItemCommand" OnPreRender="RadGridDegreeClassRules_PreRender"
        AllowAutomaticInserts="false" OnInsertCommand="RadGridDegreeClassRules_InsertCommand"
        AllowAutomaticUpdates="false" OnUpdateCommand="RadGridDegreeClassRules_UpdateCommand"
        AllowAutomaticDeletes="false" OnDeleteCommand="RadGridDegreeClassRules_DeleteCommand" >
        <PagerStyle Mode="NextPrevAndNumeric" />
        <MasterTableView CommandItemDisplay="Top" AutoGenerateColumns="false" AllowSorting="true"
                    CommandItemSettings-ShowAddNewRecordButton="true" CommandItemSettings-AddNewRecordImageUrl="../images/add12.png"
                    CommandItemSettings-AddNewRecordText="Insert new rule"  
                    CommandItemSettings-RefreshImageUrl="../images/refresh14.png" DataKeyNames="Id">
            <Columns>
                <telerik:GridEditCommandColumn UniqueName="EditCommandColumnDegreeClassRules" ButtonType="ImageButton"
                    EditImageUrl="../images/edit12.png" EditText="Edit rule"
                    HeaderStyle-Width="30px" ItemStyle-HorizontalAlign="Center">
                    <ItemStyle CssClass="MyImageButton"></ItemStyle>
                </telerik:GridEditCommandColumn>
                <telerik:GridTemplateColumn HeaderText="Effective Date" HeaderStyle-ForeColor="White" AllowSorting="true" SortExpression="EffectiveDate">
                    <ItemTemplate>
                        <asp:Label ID="LabelEffectiveDate" runat="server" Text='<%# Bind("EffectiveDate","{0:dd-MM-yyyy}") %>'></asp:Label>
                    </ItemTemplate>
                    <InsertItemTemplate>
                        <telerik:RadDatePicker ID="DatePickerEffectiveDateInsert" runat="server" DateInput-DateFormat="dd-MM-yyyy" DateInput-DisplayDateFormat="dd-MM-yyyy" ></telerik:RadDatePicker>
                        <asp:RequiredFieldValidator runat="server" ID="RequiredFieldValidatorEffectiveDateInsert" ControlToValidate="DatePickerEffectiveDateInsert"
                            ErrorMessage="&nbsp; Missing required field!" Display="Dynamic" Font-Size="Small" ForeColor="Red"></asp:RequiredFieldValidator>
                    </InsertItemTemplate>
                    <EditItemTemplate>
                        <telerik:RadDatePicker ID="DatePickerEffectiveDateEdit" runat="server" MinDate="1900/01/01" DbSelectedDate='<%# Bind("EffectiveDate") %>'
                            DateInput-DateFormat="dd-MM-yyyy" DateInput-DisplayDateFormat="dd-MM-yyyy"></telerik:RadDatePicker>
                        <asp:RequiredFieldValidator runat="server" ID="RequiredFieldValidatorEffectiveDateEdit" ControlToValidate="DatePickerEffectiveDateEdit"
                            ErrorMessage="&nbsp; Missing required field!" Display="Dynamic" Font-Size="Small" ForeColor="Red"></asp:RequiredFieldValidator>
                    </EditItemTemplate>
                </telerik:GridTemplateColumn>
                <telerik:GridTemplateColumn HeaderText="Rule Name" HeaderStyle-ForeColor="White" AllowFiltering="true" AllowSorting="true" SortExpression="DegreeClassRuleName">
                    <ItemTemplate>
                        <asp:Label ID="LabelDegreeClassRuleName" runat="server" Text='<%# Bind("DegreeClassRuleName") %>'></asp:Label>
                    </ItemTemplate>
                    <InsertItemTemplate>
                        <telerik:RadTextBox ID="TextBoxDegreeClassRuleNameInsert" runat="server" Text="" Width="400" CssClass="EditFormButtonRow" ></telerik:RadTextBox>
                    </InsertItemTemplate>
                    <EditItemTemplate>
                        <telerik:RadTextBox ID="TextBoxDegreeClassRuleNameEdit" runat="server" Text='<%# Bind("DegreeClassRuleName") %>' Width="400" CssClass="EditFormButtonRow" ></telerik:RadTextBox>
                    </EditItemTemplate>
                </telerik:GridTemplateColumn>
                <telerik:GridTemplateColumn HeaderText="Rules" HeaderStyle-ForeColor="White" AllowFiltering="true" AllowSorting="true" SortExpression="DegreeClassRule">
                    <ItemTemplate>
                        <asp:Label ID="LabelDegreeClassRules" runat="server" Text='<%# Bind("DegreeClassRule") %>'></asp:Label>
                    </ItemTemplate>
                    <InsertItemTemplate>
                        <telerik:RadEditor ID="EditorDegreeClassRuleInsert" runat="server" >
                            <Tools>
                                <telerik:EditorToolGroup>
                                    <telerik:EditorTool Name="Copy" />
                                    <telerik:EditorTool Name="Cut" />
                                    <telerik:EditorTool Name="Paste" />
                                    <telerik:EditorTool Name="Undo" />
                                    <telerik:EditorTool Name="Redo" />
                                    <telerik:EditorTool Name="FontName" />
                                    <telerik:EditorTool Name="FontSize" />
                                    <telerik:EditorTool Name="ForeColor" />
                                    <telerik:EditorTool Name="Bold" />
                                    <telerik:EditorTool Name="Italic" />
                                    <telerik:EditorTool Name="Underline" />
                                    <telerik:EditorTool Name="InsertUnorderedList" />
                                    <telerik:EditorTool Name="InsertOrderedList" />
                                    <telerik:EditorTool Name="Indent" />
                                    <telerik:EditorTool Name="Outdent" />
                                    <telerik:EditorTool Name="InsertSymbol" />
                                    <telerik:EditorTool Name="InsertLink" />
                                </telerik:EditorToolGroup>
                            </Tools>
                        </telerik:RadEditor>
                    </InsertItemTemplate>
                    <EditItemTemplate>
                        <telerik:RadEditor ID="EditorDegreeClassRuleEdit" runat="server" content='<%# Bind("DegreeClassRule") %>' >
                            <Tools>
                                <telerik:EditorToolGroup>
                                    <telerik:EditorTool Name="Copy" />
                                    <telerik:EditorTool Name="Cut" />
                                    <telerik:EditorTool Name="Paste" />
                                    <telerik:EditorTool Name="Undo" />
                                    <telerik:EditorTool Name="Redo" />
                                    <telerik:EditorTool Name="FontName" />
                                    <telerik:EditorTool Name="FontSize" />
                                    <telerik:EditorTool Name="ForeColor" />
                                    <telerik:EditorTool Name="Bold" />
                                    <telerik:EditorTool Name="Italic" />
                                    <telerik:EditorTool Name="Underline" />
                                    <telerik:EditorTool Name="InsertUnorderedList" />
                                    <telerik:EditorTool Name="InsertOrderedList" />
                                    <telerik:EditorTool Name="Indent" />
                                    <telerik:EditorTool Name="Outdent" />
                                    <telerik:EditorTool Name="InsertSymbol" />
                                    <telerik:EditorTool Name="InsertLink" />
                                </telerik:EditorToolGroup>
                            </Tools>
                        </telerik:RadEditor>
                    </EditItemTemplate>
                </telerik:GridTemplateColumn>
                <telerik:GridButtonColumn CommandName="Delete" UniqueName="DeleteColumnDegreeClassRules"
                    Text="Delete rule" ConfirmText="Delete this rule?" ConfirmTitle="Delete" ConfirmDialogType="RadWindow"
                    HeaderStyle-Width="30px" ItemStyle-HorizontalAlign="Center"
                    ButtonType="ImageButton" ImageUrl="../images/delete12.png" DataType="System.Boolean">
                    <ItemStyle CssClass="MyImageButton"></ItemStyle>
                </telerik:GridButtonColumn>
            </Columns>
            <EditFormSettings ColumnNumber="1" CaptionDataField="DegreeClassRuleName" CaptionFormatString="Edit properties of rule: {0}">
                <FormStyle Width="100%" BackColor="Ivory"></FormStyle>
                <FormTableItemStyle Wrap="False"></FormTableItemStyle>
                <EditColumn UniqueName="EditColumnDegreeClassRule" ButtonType="PushButton"
                    InsertText="Insert" UpdateText="Update" CancelText="Cancel" ></EditColumn>
                <FormTableButtonRowStyle HorizontalAlign="Right" ></FormTableButtonRowStyle>
            </EditFormSettings>
        </MasterTableView>
        <ClientSettings>
            <ClientEvents OnRowDblClick="rowDblClick" />
        </ClientSettings>
    </telerik:RadGrid>​

     

     

    Thank you. Appreciate your reply.

    Zaly

  2. Viktor Tachev
    Admin
    Viktor Tachev avatar
    2372 posts

    Posted 06 Oct 2015 Link to this post

    Hi Zaly,

    In order to customize the space between the elements you can use a bit of CSS. For example:

    .rgEditForm td label {
        padding-right: 10px;
    }
    .rgEditForm td {
        padding-bottom: 10px;
    }

    If you would like additional information on the CSS classes that are rendered for RadGrid by default you would find the following article interesting.



    Regards,
    Viktor Tachev
    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
  3. Zaly
    Zaly avatar
    7 posts
    Member since:
    Sep 2011

    Posted 10 Oct 2015 in reply to Viktor Tachev Link to this post

    Hi Viktor,

    For a few days, I tried to apply your solution and follow the method in the link you provided, but it doesn't work. Is it possible if you provide a working example how to do this.

    Thank you in advance.

  4. Viktor Tachev
    Admin
    Viktor Tachev avatar
    2372 posts

    Posted 14 Oct 2015 Link to this post

    Hi Zaly,

    For some columns there is no label rendered in the EditForm. In order to have spacing in this scenario you can add padding to the td element.

    .rgEditForm tr td:first-child {
        padding-right: 10px;
    }
     
    .rgEditForm td {
        padding-bottom: 10px;
    }


    For reference I am attaching a sample project where the approach is implemented.

    Regards,
    Viktor Tachev
    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