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

Customising layout for EditForm template in RadGrid for AJAX

3 Answers 208 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Zaly
Top achievements
Rank 1
Zaly asked on 05 Oct 2015, 04:17 PM

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

3 Answers, 1 is accepted

Sort by
0
Viktor Tachev
Telerik team
answered on 06 Oct 2015, 12:43 PM
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
0
Zaly
Top achievements
Rank 1
answered on 10 Oct 2015, 09:52 AM

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.

0
Viktor Tachev
Telerik team
answered on 14 Oct 2015, 11:45 AM
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
Tags
Grid
Asked by
Zaly
Top achievements
Rank 1
Answers by
Viktor Tachev
Telerik team
Zaly
Top achievements
Rank 1
Share this question
or