How to change the style of the Insert/Cancel buttons in a RadGrid?

[Johnny]

Hello!

As you can see in the image that I attached, my radgrid has 2 buttons at the bottom (Valider & Annuler) which stands for Validate and Cancel in english. These buttons are added as the following:

<EditFormSettings>
     <EditColumn FilterControlAltText="Filter EditCommandColumn column" ButtonType="PushButton" InsertText="Valider" CancelText="Annuler" EditText="Modif" UpdateText="Valider">
     </EditColumn>
</EditFormSettings>

I would like to change their design and apply a skin.  I have applied the Material skin to the whole RadGrid however these buttons seem to not be affected by that. Would that be possible to style them, just like we style any radbutton using Skins? Would changing the ButtonType from pushbutton to another type help with this matter?

 

Here's the full code of the radgrid shown in the attached image:

<telerik:RadGrid ID="RadGrid1" runat="server" CellSpacing="0" Culture="French (France)"
            DataSourceID="SDS_Notes" GridLines="None" Width="775px" Skin="Material" 
            AllowAutomaticInserts="True" AutoGenerateEditColumn="True">
            <HeaderContextMenu CssClass="GridContextMenu GridContextMenu_Default">
            </HeaderContextMenu>
            <MasterTableView AutoGenerateColumns="False" CommandItemDisplay="Top" DataSourceID="SDS_Notes"
                NoMasterRecordsText="Aucune note" DataKeyNames="NumNote" 
                AllowAutomaticUpdates="True"
                Font-Size="13px">
                <CommandItemSettings ExportToPdfText="Export to PDF" AddNewRecordText="Ajouter une note"
                    RefreshText="Rafraichir"></CommandItemSettings>
                <RowIndicatorColumn FilterControlAltText="Filter RowIndicator column">
                    <HeaderStyle Width="20px"></HeaderStyle>
                </RowIndicatorColumn>
                <ExpandCollapseColumn FilterControlAltText="Filter ExpandColumn column">
                    <HeaderStyle Width="20px"></HeaderStyle>
                </ExpandCollapseColumn>
                <Columns>
                    <telerik:GridDropDownColumn DataField="AgenceAction" FilterControlAltText="Filter AgenceAction column"
                        HeaderText="Agence" SortExpression="AgenceAction" UniqueName="AgenceAction" HeaderStyle-Width="61px" DataSourceID="SDSAgence" ListTextField="AgenceAction" ListValueField="AgenceAction" ItemStyle-Width="130px">
                        <HeaderStyle Font-Size="15px" Width="80px"></HeaderStyle>
                        </telerik:GridDropDownColumn>
                    <telerik:GridDateTimeColumn DataField="DateAction" DataType="System.DateTime" FilterControlAltText="Filter DateAction column"
                        HeaderText="Date Action" SortExpression="DateAction" UniqueName="DateAction"
                        DataFormatString="{0:dd/MM/yyyy}" HeaderStyle-Width="110px">
                        <HeaderStyle Font-Size="15px" Width="130px"></HeaderStyle>
                    </telerik:GridDateTimeColumn>
                    <telerik:GridDateTimeColumn DataField="HeureAction" DataType="System.DateTime" FilterControlAltText="Filter HeureAction column"
                        HeaderText="Heure" SortExpression="HeureAction" UniqueName="HeureAction" PickerType="TimePicker" 
                        DataFormatString="{0:HH:mm}" HeaderStyle-Width="70px">
                        <HeaderStyle Font-Size="15px" Width="60px"></HeaderStyle>
                    </telerik:GridDateTimeColumn>
                    <telerik:GridBoundColumn DataField="Observations" FilterControlAltText="Filter Observations column"
                        HeaderText="Observations" SortExpression="Observations" UniqueName="Observations"
                        HeaderStyle-Width="500px" MaxLength="105">
                        <HeaderStyle Font-Size="15px" Width="500px"></HeaderStyle>
                        <ItemStyle CssClass="form-control" />
                    </telerik:GridBoundColumn>
                </Columns>
                <EditFormSettings>
                    <EditColumn FilterControlAltText="Filter EditCommandColumn column" ButtonType="PushButton" InsertText="Valider" CancelText="Annuler" EditText="Modif" UpdateText="Valider">
                    </EditColumn>
                </EditFormSettings>
                <HeaderStyle BackColor="#757575" Font-Bold="false" ForeColor="White"/>

            </MasterTableView>
            <FilterMenu EnableImageSprites="False">
            </FilterMenu>
        </telerik:RadGrid>

I have tried setting the SkinID from codebehind in the itemcreated property however I am receiving the following error:

"The 'SkinId' property can only be set in or before the Page_PreInit event for static controls. For dynamic controls, set the property before adding it to the Controls collection."

    Protected Sub RadGrid1_ItemCreated(ByVal sender As Object, ByVal e As Telerik.Web.UI.GridItemEventArgs) Handles RadGrid1.ItemCreated
    If TypeOf e.Item Is GridEditableItem AndAlso e.Item.IsInEditMode Then
        If Not e.Item.OwnerTableView.IsItemInserted Then
            '[......]
        Else
            '[......]
        End If
        Dim cancelButton As Button = CType(e.Item.FindControl("CancelButton"), Button)
            cancelButton.SkinID = "Material"
    End If
End Sub

Thanks a lot!

[Valentin Dragnev]

Hi Johnny,

I hope you are well. 

I've managed to test the provided code.

Let me explain why the Material skin is not applying to the buttons in question:
Setting ButtonType="PushButton" for the EditColumn forces the RadGrid to render native asp: Button controls both the Update and Cancel buttons. On the other hand, the Material skin and all the rest Telerik skins are designed to style only Telerik controls (RadGrid, RadButton, RadComboBox, etc.).

I would like to recommend to you a few options to change the buttons to the desired look: 

1. A most straightforward way is to keep the original style and look of the Grid action buttons in Material skin. This would work if you remove the pushButton declaration and keep the default button type and set the desired Text to each of the buttons. Here is what it would look like:
   
   

   <EditColumn FilterControlAltText="Filter EditCommandColumn column" ButtonType="PushButton" InsertText="Valider" CancelText="Annuler" EditText="Modif" UpdateText="Valider">
   </EditColumn>

2. Keep the current declaration of the buttons and use RadFormDecorator to style all the native elements on the page. Can find more information in the article below: FormDecorator Overview.
   Here is my approach to styling the buttons using the RadFormDecorator:
   

   <telerik:RadFormDecorator runat="server" ID="RadFormDecorator1" Skin="Material" DecoratedControls="Buttons" DecorationZoneID="gridWrapperDiv" />
   
   <div id="gridWrapperDiv">
       <telerik:RadGrid ID="RadGrid1" runat="server" CellSpacing="0" Culture="French (France)"
           OnNeedDataSource="RadGrid1_NeedDataSource" GridLines="None" Width="775px" Skin="Material" OnItemCreated="RadGrid1_ItemCreated" AutoGenerateColumns="true"
           AllowAutomaticInserts="True" AutoGenerateEditColumn="True">
           <HeaderContextMenu CssClass="GridContextMenu GridContextMenu_Default">
           </HeaderContextMenu>
           <MasterTableView AutoGenerateColumns="true" CommandItemDisplay="Top"
               NoMasterRecordsText="Aucune note"
               AllowAutomaticUpdates="True"
               Font-Size="13px">
               <CommandItemSettings ExportToPdfText="Export to PDF" AddNewRecordText="Ajouter une note"
                   RefreshText="Rafraichir"></CommandItemSettings>
               <RowIndicatorColumn FilterControlAltText="Filter RowIndicator column">
                   <HeaderStyle Width="20px"></HeaderStyle>
               </RowIndicatorColumn>
               <ExpandCollapseColumn FilterControlAltText="Filter ExpandColumn column">
                   <HeaderStyle Width="20px"></HeaderStyle>
               </ExpandCollapseColumn>
               
               <EditFormSettings>
                   <EditColumn FilterControlAltText="Filter EditCommandColumn column" ButtonType="PushButton" InsertText="Valider" CancelText="Annuler" EditText="Modif" UpdateText="Valider">
                   </EditColumn>
   
               </EditFormSettings>
               <HeaderStyle BackColor="#757575" Font-Bold="false" ForeColor="White" />
   
           </MasterTableView>
           <FilterMenu EnableImageSprites="False">
           </FilterMenu>
       </telerik:RadGrid>
   </div>

3. Use a GridTemplateColumn instead of the Autogenerated Edit column. That way you can define custom buttons for the Edit, Update, Cancel commands of the RadGrid. For instance:
   

   <telerik:GridTemplateColumn EditFormHeaderTextFormat=" ">
       <ItemTemplate>
           <telerik:RadButton ID="RadButton1" runat="server" Text="Edit" Skin="Material" CommandName="Edit"></telerik:RadButton>
       </ItemTemplate>
       <EditItemTemplate>
           <telerik:RadButton ID="RadButton2" runat="server" Text="Update" Skin="Material" CommandName="Update"></telerik:RadButton>
           <telerik:RadButton ID="RadButton3" runat="server" Text="Cancel" Skin="Material" CommandName="Cancel"></telerik:RadButton>
       </EditItemTemplate>
   </telerik:GridTemplateColumn>

   To avoid having two sets of Update and Cancel buttons you will need to hide the EditColumn:
   

   <EditFormSettings>
       <EditColumn Visible="false"></EditColumn>
   </EditFormSettings>

4. Another approach that I would say is most overwhelming is to use FormTemplate to define a completely custom edit form where Radbuttons can be used as action buttons. Note that in this case, you should also define edit controls for each of the columns in the Grid. Check out the Form Template Edit Form demo and the Template section in our Custom Edit Forms article.

I hope this helps.

Regards,
Valentin
Progress Telerik

[Johnny]

Thanks Valentin. I will be trying this and will get back to you.