Kendo 网格列标题带有红色星号以指示必填字段

Question

我正在使用具有多列的 kendo 网格。但我需要用红色星号显示几列以指示所需的归档。有人可以帮我解决这个问题吗？

<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>

我想在单元序列号后显示红色星号。

Answer 1

请尝试使用以下代码片段。我们可以通过使用 header 模板来实现这件事。

columns.Bound(c => c.SerialNumber).HeaderTemplate("Unit No/Serial No" + "<span style='color:red;'>*</span>");

如有任何疑问，请告诉我。