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>