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>