Built in Editing - How to change the fonts/sizes

[Jon]

Hi..
I'm using a grid with the built in editing - how do I modify the fonts and sizes of the edit 'form'?
thanks

[Dimo]

Hi Jon Elster,

RadGrid uses the following CSS classes to wrap its edit forms:


GridEditRow_SkinName - when EditMode="InPlace"

GridEditForm_SkinName - when EditMode="EditForms" or "PopUp"

You can use the above two CSS classes to target labels and textboxes and modify their styles. For example:


div.RadGrid_Default  .GridEditRow_Default  input
{
      font-size:12px;
}


You have to make sure that the custom CSS rules have high enough specificity to override the embedded skin's styles:

How to override embedded skins


Let us know if you need more information.


Greetings,
Dimo
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Jon]

Thanks..
How do I change the formatting in a 

 

<FormTemplate>

 

thanks

[Dimo]

Hi Jon,

The FormTemplate edit form is nested inside a div with a

GridEditForm_SkinName

CSS class. You can use this CSS class to target elements for styling or use your own CSS classes (or inline styles) in the form template itself.


Regards,
Dimo
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Jon]

thx

[Jon]

Hi..
I updated my GridWebBlue.css - the Telerik css.
But there is not a change.  I even tried modifiying other properties...
Still no change.. what am I  missing?
thanks

[Dimo]

Hello Jon,

Please make sure that:

1) The CSS file is properly registered on the page.

2) The CSS classes and selectors are valid (for example - did you rename _Skin with the actual name of your skin?)

3) Even if the CSS classes and selectors are valid, the CSS rules may have lower specificity than other styles on the page, so the ones that do not work get overridden.

For points (2) and (3) you can use tools such as Firebug for Firefox, it's very useful for debugging CSS-related issues.

If you still have troubles, please send us your RadGrid declaration and the CSS code.


Best wishes,
Dimo
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Larry]

IMPORTANT:  I have noticed that when providing code in the code block, the UNDERSCORE is removed.  My code has underscores so just be forwarned.

I believe I have figured out a way to dynamically change the style of the Edit form in edit mode and insert mode.  The key turns out to be recursion and seems to work pretty well.  Let me provide a little background. 

I needed to create a grid that read information out of the SQL master / sys tables.   The information provided from the master tables included column name, type, length, description (for the column headers), primary key and whether the column was an identity column.  I used this information to build the grid and everything worked very well, except for some reason the Edit form (by the way, I was using an automatically generated edit form) was using the old style textboxes, radiobuttons and checkboxes even though I had specified the "Outlook" skin.

I tried setting the skin on the grid and on the mastertableview, but it always seemed to be overriden.  I also wanted the ability to select the data (in edit mode) that was previously entered to make it easy on the user to delete.

I am not going to provide all my code but am providing enough for other developers to have an example of how to recursively read a collection when you don't have the ID's and when you cannot loop the collection using a "For Each".

I am dynamically building the RadGrid, so I needed to provide a handler for the ItemDataBound. For those C# developers out there, I appologize, but I only code in VB.  I could provide code using a converter, but I never know if the code will work, so I just provide VB.

AddHandler RadGrid1.ItemDataBound, AddressOf RadGrid1_ItemDataBound

Then determine the mode of operation in the ItemDataBound.  If you use this code, comment out the HoldError routine in the catch of the try.

 

        Protected Sub RadGrid1_ItemDataBound( _
                ByVal sender As Object, ByVal e As Telerik.Web.UI.GridItemEventArgs) 'Handles RadGrid1.ItemDataBound

            Try
                Dim rg As Telerik.Web.UI.RadGrid = CType(sender, Telerik.Web.UI.RadGrid)

                If TypeOf e.Item Is Telerik.Web.UI.GridEditFormInsertItem AndAlso _
                        e.Item.OwnerTableView.IsItemInserted Then

                    'the item is in insert mode
                    Dim insertedItem As Telerik.Web.UI.GridEditFormInsertItem = _
                        DirectCast(e.Item, Telerik.Web.UI.GridEditFormInsertItem)

                    If insertedItem.Cells.Count > 0 Then
                        If insertedItem.Cells.Count > 0 Then
                            For Each cell As System.Web.UI.WebControls.TableCell In insertedItem.Cells
                                If cell.Controls.Count > 0 Then
                                    FindEditControlAndColorize(cell.Controls)
                                End If
                            Next
                        End If
                    End If

                ElseIf TypeOf e.Item Is Telerik.Web.UI.GridEditableItem AndAlso e.Item.IsInEditMode _
                        AndAlso rg.MasterTableView.IsItemInserted Then
                    'If using Inplace edit mode

                    'the item is in edit mode
                    Dim editedItem As Telerik.Web.UI.GridEditableItem = _
                        CType(e.Item, Telerik.Web.UI.GridEditableItem)

                    If editedItem.Cells.Count > 0 Then
                        If editedItem.Cells.Count > 0 Then
                            For Each cell As System.Web.UI.WebControls.TableCell In editedItem.Cells
                                If cell.Controls.Count > 0 Then
                                    FindEditControlAndColorize(cell.Controls)
                                End If
                            Next
                        End If
                    End If

                ElseIf TypeOf e.Item Is Telerik.Web.UI.GridEditableItem AndAlso e.Item.IsInEditMode Then
                    'if using edit forms

                    'the item is in edit mode
                    Dim editedItem As Telerik.Web.UI.GridEditableItem = _
                        CType(e.Item, Telerik.Web.UI.GridEditableItem)

                    If editedItem.Cells.Count > 0 Then
                        If editedItem.Cells.Count > 0 Then
                            For Each cell As System.Web.UI.WebControls.TableCell In editedItem.Cells
                                If cell.Controls.Count > 0 Then
                                    FindEditControlAndColorize(cell.Controls)
                                End If
                            Next
                        End If
                    End If

                End If

            Catch ex As Exception
                HoldError(ex, "RadGrid1_ItemDataBound")
            End Try

        End Sub

The next bit of code loops throught the collection using recursion.  I have built a shell for the code to show how it could work for any Web control and how to make applying style very easy to override.  It is not a complete peice of code but works for textboxes and you get the idea of how to identify any type of control.  At the end of the codeblock, you will see the code calls itself again if there are more controls (recursion).

        Private Sub FindEditControlAndColorize(ByVal oControlCollection As ControlCollection)

            For Each oControl As Control In oControlCollection
                Select Case oControl.GetType.ToString
                    Case "System.Web.UI.WebControls.TextBox"
                        Dim objCntl As TextBox = DirectCast(oControl, TextBox)
                        With objCntl
                            .Attributes.Add("padding", "0px 0px 0px 0px;")
                            .BorderStyle = Web.UI.WebControls.BorderStyle.Solid
                            .BorderColor = System.Drawing.ColorTranslator.FromHtml("#BEBEBE")
                            .BorderWidth = Unit.Pixel(1)
                            '  Cornsilk
                            .BackColor = System.Drawing.ColorTranslator.FromHtml("#FFF8DC")
                            .ForeColor = System.Drawing.Color.Black
                            .Attributes.Add("font-size", "10px;")
                            .Attributes.Add("font-family", "Arial, Tahoma, Sans-serif;")
                            .Height = Unit.Pixel(20)
                            .Width = Unit.Pixel(160)
                            .Wrap = True
                            .Attributes.Add("OnFocus", "Javascript: SetFocus(this);")
                        End With
                    Case "System.Web.UI.WebControls.RadioButtonList"
                        Dim objCntl As RadioButtonList = DirectCast(oControl, RadioButtonList)
                        System.Diagnostics.Debug.Print(objCntl.ClientID.ToString)
                    Case "System.Web.UI.WebControls.RadioButton"
                        Dim objCntl As RadioButton = DirectCast(oControl, RadioButton)
                        System.Diagnostics.Debug.Print(objCntl.ClientID.ToString)
                    Case "System.Web.UI.WebControls.CheckBoxList"
                        Dim objCntl As CheckBoxList = DirectCast(oControl, CheckBoxList)
                        System.Diagnostics.Debug.Print(objCntl.ClientID.ToString)
                    Case "System.Web.UI.WebControls.CheckBox"
                        If oControl.ID.ToString <> "0" Then
                            Dim objCntl As CheckBox = DirectCast(oControl, CheckBox)
                            System.Diagnostics.Debug.Print(objCntl.ClientID.ToString)
                        End If
                    Case "System.Web.UI.WebControls.FileUpload"
                        Dim objCntl As FileUpload = DirectCast(oControl, FileUpload)
                        System.Diagnostics.Debug.Print(objCntl.ClientID.ToString)
                    Case "Telerik.Web.UI.RadTextBox"
                        Dim objCntl As Telerik.Web.UI.RadTextBox = DirectCast(oControl, Telerik.Web.UI.RadTextBox)
                        System.Diagnostics.Debug.Print(objCntl.ClientID.ToString)
                    Case "Telerik.Web.UI.RadNumericTextBox"
                        Dim objCntl As Telerik.Web.UI.RadNumericTextBox = DirectCast(oControl, Telerik.Web.UI.RadNumericTextBox)
                        System.Diagnostics.Debug.Print(objCntl.ClientID.ToString)
                    Case "Telerik.Web.UI.RadDatePicker"
                        Dim objCntl As Telerik.Web.UI.RadDatePicker = DirectCast(oControl, Telerik.Web.UI.RadDatePicker)
                        System.Diagnostics.Debug.Print(objCntl.ClientID.ToString)
                    Case "Telerik.Web.UI.RadDateInput"
                        Dim objCntl As Telerik.Web.UI.RadDateInput = DirectCast(oControl, Telerik.Web.UI.RadDateInput)
                        System.Diagnostics.Debug.Print(objCntl.ClientID.ToString)
                    Case Else
                        Dim objCntl As System.Web.UI.Control = DirectCast(oControl, System.Web.UI.Control)
                        If objCntl IsNot Nothing Then
                            'System.Diagnostics.Debug.Print(objCntl.ClientID.ToString)
                        End If
                End Select
                If oControl.Controls.Count > 0 Then FindEditControlAndColorize(oControl.Controls)

            Next
        End Sub

The last bit of code is in my Page_Init and demonstrates how to add Javascript and CSS in code behind.  I wanted to provide this code for several reasons.  First to help out users who are having the same problem with the Edit form.  Second, to get some points from Telerik.  Third, to help a great company that has created a great product for the development community.  If you want a great grid that provides tons of power to your user, this is it.

                Dim jScript As New System.Text.StringBuilder

                jScript.Append("<script type='text/javascript'>")
                jScript.Append("function RequestStart(grid, eventArgs) { ")
                jScript.Append("  document.body.style.cursor = 'wait';  ")
                jScript.Append("  if (eventArgs.EventTargetElement != null ) {")
                jScript.Append("     eventArgs.EventTargetElement.disabled = true;  ")
                jScript.Append("  }")
                jScript.Append("  if (eventArgs.EventTarget != null ) {")
                jScript.Append("     if (eventArgs.EventTarget.indexOf('excelButton') != -1) {")
                jScript.Append("        alert('IMPORTANT:  After EXPORTING a file, \n\n click the REFRESH button on the browser or \n\n the grid will NO LONGER FUNCTION ! ! !');")
                jScript.Append("        eventArgs.EnableAjax = false;")
                jScript.Append("        setTimeout(function(){document.getElementById('__EVENTTARGET').value = '';}, 50);")
                jScript.Append("     }")
                jScript.Append("     if (eventArgs.EventTarget.indexOf('wordButton') != -1) {")
                jScript.Append("        alert('IMPORTANT:  After EXPORTING a file, \n\n click the REFRESH button on the browser or \n\n the grid will NO LONGER FUNCTION ! ! !');")
                jScript.Append("        eventArgs.EnableAjax = false;")
                jScript.Append("        setTimeout(function(){document.getElementById('__EVENTTARGET').value = '';}, 50);")
                jScript.Append("     }")
                jScript.Append("  }")
                jScript.Append("}")
                jScript.Append("function ResponseEnd(grid, eventArgs) { ")
                jScript.Append("   document.body.style.cursor = 'default';")
                jScript.Append("}")
                jScript.Append("function CenterEditForm(sender, eventArgs) { ")
                jScript.Append("   var popup = eventArgs.get_popUp();")
                jScript.Append("   popup.style.top = ""10%"";")
                jScript.Append("   popup.style.left = ""40%"";")
                jScript.Append("}")
                jScript.Append("function SetFocus(obj) { ")
                jScript.Append("   obj.focus();")
                jScript.Append("   obj.select();")
                jScript.Append("}")
                jScript.Append("</script>")

                Dim css As New System.Text.StringBuilder
                css.Append("<style type=""text/css"">")
                css.Append("   .MasterTable_Outlook caption { ")
                css.Append("      background-color: #E7EEFF !important; ")
                css.Append("      color: DarkBlue; ")
                css.Append("      font-size: larger; ")
                css.Append("      font-weight: bold; }")
                css.Append("   .DetailTable_Outlook caption { ")
                css.Append("      background-color: DarkBlue !important;  ")
                css.Append("      color: Orange; ")
                css.Append("      border: 1px solid DarkBlue; ")
                css.Append("      font-size: larger; ")
                css.Append("      font-weight: bold; }")
                css.Append("   .DetailTable_Outlook .DetailTable_Outlook caption { ")
                css.Append("      background-color: DarkGreen !important;  ")
                css.Append("      color: Yellow; ")
                css.Append("      border: 1px solid DarkGreen; ")
                css.Append("      font-size: larger; ")
                css.Append("      font-weight: bold; }")
                css.Append("   .GridEditForm_Outlook .GridHeader_Outlook { ")
                css.Append("      background-color: #6495ED !important;  ")  'cornflowerblue
                css.Append("      color: #FFCE00; ")
                css.Append("      font-size: larger; ")
                css.Append("      font-weight: bold; ")
                css.Append("   html { overflow:scroll;} ")
                css.Append("   html, body, form {width:100%;height:100%; }")
                css.Append("</style>")

                Dim radCodeBlock As New Telerik.Web.UI.RadCodeBlock
                With radCodeBlock
                    .ID = "RadCodeBlock1"
                    .Controls.Add(New LiteralControl(jScript.ToString))
                    .Controls.Add(New LiteralControl(css.ToString))
                End With
                Me.Controls.Add(radCodeBlock)

I hope this helps someone out there who was having a problem with styling the Edit form.  Good luck.

[Sebastian]

Hello Larry,

Thank you for sharing your solution in our public forums - thus you can help other community members who would like to style the RadGrid edit form in the same manner. I updated your Telerik points for the involvement.

Best,
Sebastian
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.