Customizing Style of RadGrid Edit Items

A developer wanted to customize his “edit” form with a telerik rad grid, and we found it less than simple to change the textboxes and other edit controls to make them more narrow, and/or other customizations.

 

I did some research and came across a few different technique for doing this that I am going to share with everyone.

 

Template Columns

The first option, which is the one he used because it is the easiest, is to convert your columns to “template columns.”  Converting columns changes:

 

<telerik:GridBoundColumn DataField=”EmployeeEmail” DataType=”System.Int32″ HeaderText=”EmployeeEmail”

SortExpression=”EmployeeEmail” UniqueName=”EmployeeEmail” />

 

To this:

 

<telerik:GridTemplateColumn DataField=”EmployeeEmail”

    HeaderText=”EmployeeEmail” SortExpression=”EmployeeEmail”

    UniqueName=”EmployeeEmail”>

    <EditItemTemplate>

        <asp:TextBox ID=”EmployeeEmailTextBox” runat=”server”

            Text=’<%# Bind(“EmployeeEmail”) %>‘></asp:TextBox>

    </EditItemTemplate>

    <ItemTemplate>

        <asp:Label ID=”EmployeeEmailLabel” runat=”server”

            Text=’<%# Eval(“EmployeeEmail”) %>‘></asp:Label>

    </ItemTemplate>

</telerik:GridTemplateColumn>

 

 

As you can see, this gives you control over the actual textbox item that will be displayed when you are in edit mode.

 

But using template columns can also be a bit of a pain, because you losing some of the simplicity that you had before when you simply allowed the rad grid to deal with the details of the display/edit cell items.  This also complicates things when you try to do anything in the ItemDataBound or ItemCreated events on the rad grid.  You can’t just grab the column, you have to dig deeper, looking for the contained child controls to find your actual edit control.

 

ItemDataBound

 

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

        If TypeOf e.Item Is GridEditableItem And e.Item.IsInEditMode Then

            Dim editItem As GridEditableItem = e.Item

            If TypeOf editItem.Item(“EmployeeId”).Controls(0) Is TextBox Then

                CType(editItem.Item(“EmployeeId”).Controls(0), TextBox).Width = 30

            End If

        End If

    End Sub

 

 

In this example, I am setting the width of the EmployeeId textbox to only 30px.

 

 

CreateColumnEditor

 

    Protected Sub RadGrid1_CreateColumnEditor(ByVal sender As Object, ByVal e As Telerik.Web.UI.GridCreateColumnEditorEventArgs) Handles RadGrid1.CreateColumnEditor

        If TypeOf e.ColumnEditor Is GridTextBoxColumnEditor Then

            If e.Column.UniqueName = “FirstName” Then

                CType(e.ColumnEditor, GridTextBoxColumnEditor).TextBoxStyle.Width = 30

                CType(e.ColumnEditor, GridTextBoxColumnEditor).TextBoxControl.Style.Add(“text-align”, “right”)

            End If

        End If

    End Sub

 

 

I believe this event is fired when the grid is creating the edit columns.  You hook into this event, and then modify the textboxstyle in order to change the look of the edit control.

 

 

Defined Column Editor

 

You can achieve the same results as in CreateColumnEditor without writing any code if you drop a GridTextBoxColumnEditor on your page (outside of the RadGrid) like so:

 

<telerik:GridTextBoxColumnEditor ID=”GridTextBoxColumnEditor1″ runat=”server”>

    <TextBoxStyle Width=”50px” />

</telerik:GridTextBoxColumnEditor>

 

And then in your column you specify the ID of the editor you want to use, like this:

 

<telerik:GridBoundColumn DataField=”UserId” DataType=”System.Int32″ HeaderText=”UserId” ColumnEditorID=”GridTextBoxColumnEditor1

    SortExpression=”UserId” UniqueName=”UserId”>

</telerik:GridBoundColumn>

 

 

 

 

Advertisements

2 thoughts on “Customizing Style of RadGrid Edit Items

  1. Chris

    Thanks very much for recording the results of your success.

    I was struggling with this, and like you, did not want to throw away the simplicity of a GridBoundColumn.

    Many thanks

    :-Jim

  2. Chris, thanks so much for this post. I knew of most of the options, but the CreateColumnEditor method was giving me fits. That’s exactly what I needed so that I could set properties in an inherited class of RadGrid to alter my form fields across ALL pages in one place. Incredibly helpful. Cheers…

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s