Kendo Grid Column title with red asterick to indicate required field - kendo-ui

Question

I am using a kendo grid with multiple columns. But i need to display few columns with red asterick to indicate required filed. Can someone help me on this.
<div id="failureTypeInfoGrid" style="width:100%;overflow-x:auto;">
#(Html.Kendo().Grid(Model.lstSerialData)
.Name("serialGrid")
.Events(e => e.Edit("onEdit"))
.Columns(columns =>
{
columns.Bound(c => c.UnitId).Hidden(true).ClientTemplate("#= UnitId #" +
"<input type='hidden' name='SerialData[#= index(data)#].UnitId' value='#= UnitId #' />"
);
columns.Bound(c => c.SerialNumber).Title("Unit No/Serial No*").ClientTemplate("#= SerialNumber #" +
"<input type='hidden' name='SerialData[#= index(data)#].SerialNumber' value='#= SerialNumber #' />"
);
columns.ForeignKey(p => p.Failure_Subjected_To, (System.Collections.IEnumerable)ViewData["FailureSubjectedTo"], dataFieldValue: "ValueId", dataFieldText: "ValueName").Width(140).ClientTemplate("#= getValue(Failure_Subjected_To) #" +
"<input type='hidden' name='SerialData[#= index(data)#].Failure_Subjected_To' value='#= Failure_Subjected_To #' />"
).Title("Fail Subjected To");
columns.Bound(c => c.Hours_Before_Failure).ClientTemplate("#= Hours_Before_Failure #" +
"<input type='hidden' name='SerialData[#= index(data)#].Hours_Before_Failure' value='#= Hours_Before_Failure #' />"
).Title("Hours Before Failure (Hours)");
columns.Bound(c => c.Failure_Temperature).ClientTemplate("#= Failure_Temperature #" +
"<input type='hidden' name='SerialData[#= index(data)#].Failure_Temperature' value='#= Failure_Temperature #' />"
).Title("Failure Temperature (Celsius)");
columns.Bound(c => c.Component_LTC_Code).ClientTemplate("#= Component_LTC_Code #" +
"<input type='hidden' name='SerialData[#= index(data)#].Component_LTC_Code' value='#= Component_LTC_Code #' />"
).Title("Manufacturing Date/LTC Code");
columns.Bound(c => c.Board_Ref_Designator).ClientTemplate("#= Board_Ref_Designator #" +
"<input type='hidden' name='SerialData[#= index(data)#].Board_Ref_Designator' value='#= Board_Ref_Designator #' />"
).Title("Board Ref Designator");
columns.Bound(c => c.FailureMode).Hidden(true).HtmlAttributes(new { style = "height: 20px;" }).ClientTemplate("#= FailureMode #" +
"<input type='hidden' name='SerialData[#= index(data)#].FailureMode' value='#= FailureMode #' />"
);
columns.Bound(c => c.FailureMechanism).Hidden(true).ClientTemplate("#= FailureMechanism #" +
"<input type='hidden' name='SerialData[#= index(data)#].FailureMechanism' value='#= FailureMechanism #' />"
);
columns.Bound(c => c.FailureModeName).Title("Failure Mode");
columns.Bound(c => c.FailureMechanismName).Title("Failure Mechanism");
})
.Editable(editable => editable.Mode(GridEditMode.InCell))
.HtmlAttributes(new { style = "height: 200px;overflow-x:auto" })
//.Scrollable()
.Resizable(resize => resize.Columns(true))
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(20)
.ServerOperation(false)
.Model(model => { model.Id(p => p.Id); model.Field(p => p.FailureModeName).Editable(false); model.Field(p => p.FailureMechanismName).Editable(false); })
)
)
</div>
I want to display red asterik after unit serial number.

Answer 1

Please try with the below code snippet. We can achieve this thing by using header template.
columns.Bound(c => c.SerialNumber).HeaderTemplate("Unit No/Serial No" + "<span style='color:red;'>*</span>");
Let me know if any concern.