New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

Add a required indicator to the DropDownColumn when editing or inserting an item


Product Telerik WebForms Grid for ASP.NET AJAX


Sometimes, you want to indicate that a DropDownColumn (or any other column) must have a value selected when editing or inserting a new item. For that, you might want to add something of a required symbol (asterisk) at the header of the column.

Required symbol (asterisk) showing when editing/inserting a record


You can achieve such a behavior by adding a CSS class with an asterisk (*) as its content, and applying/removing it based on the different commands (Insert, Edit, Update, etc.):

<telerik:RadGrid ID="RadGrid1" runat="server" OnItemCommand="RadGrid1_ItemCommand">
    <MasterTableView CommandItemDisplay="Top">
            <telerik:GridEditCommandColumn />
            <telerik:GridDropDownColumn UniqueName="PhoneType" DataField="PhoneTypeCode" HeaderText="Contact Type" DataSourceID="dsPhoneType"
                DropDownControlType="RadComboBox" ListTextField="LookUpTypeDescription" ListValueField="LookUpTypeValue">
.required::after {
    content: "*";
    color: red;
    padding-left: 5px;
protected void RadGrid1_ItemCommand(object sender, GridCommandEventArgs e)
    RadGrid radGrid = (RadGrid)sender;
    GridDropDownColumn dropDownColumn = radGrid.MasterTableView.GetColumn("PhoneType") as GridDropDownColumn;

    if (e.CommandName == RadGrid.InitInsertCommandName || e.CommandName == RadGrid.EditCommandName) // Add more commands if you wish
        dropDownColumn.HeaderStyle.CssClass += "required";
    else if (e.CommandName == RadGrid.PerformInsertCommandName || e.CommandName == RadGrid.CancelCommandName || e.CommandName == RadGrid.UpdateCommandName)
        dropDownColumn.HeaderStyle.CssClass = "";
Protected Sub RadGrid1_ItemCommand(ByVal sender As Object, ByVal e As GridCommandEventArgs)
    Dim radGrid As RadGrid = CType(sender, RadGrid)
    Dim dropDownColumn As GridDropDownColumn = TryCast(radGrid.MasterTableView.GetColumn("PhoneType"), GridDropDownColumn)

    If e.CommandName = RadGrid.InitInsertCommandName OrElse e.CommandName = RadGrid.EditCommandName Then
        dropDownColumn.HeaderStyle.CssClass += "required"
    ElseIf e.CommandName = RadGrid.PerformInsertCommandName OrElse e.CommandName = RadGrid.CancelCommandName OrElse e.CommandName = RadGrid.UpdateCommandName Then
        dropDownColumn.HeaderStyle.CssClass = ""
    End If
End Sub
In this article