Kendo Grid Column title with red asterick to indic

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.