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=" 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=" 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
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
Rank 1
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.
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