I've asked a similar question before, but what I learned there doesn't seem to apply to this question:
What I'm trying to achieve is something similar to how "Status" displays in this demo of yours:
I want to color the text for a cell, based off a value that is in the ViewBag datasource for a cell. In the datasource, along with "value" and "code" is an end user customizable "DisplayColor" field. I want to use that value to color a span with a rounded border (similar to a chip) that contains the foreignKeyValue. But during my initial work, I can't even get the foreignKeyValue to show in the span.
My code is similar to the following. Coloring the cell works, sort of. I need to fix the style for the span not the cell, and do the rounded border. But I can't figure out how to display the foreignKeyValue.
@(Html.EJS().Grid<CaseGridVm>("CaseListGrid")
.DataSource(ds => { ds.Url(Url.Action("LoadRecords")).Adaptor("UrlAdaptor"); })
.Columns(col => {
col.Field(p => p.Id).IsPrimaryKey(true).IsIdentity(true).Visible(false).Add();
col.Field("CaseNumber").HeaderText("Case ID").Width(130).Add();
col.Field("ServiceId").HeaderText("Service").Width(100).Type("number").Template("#serviceTemplate")
.Filter(new { type = "CheckBox" }) // for FilterType.Menu
.ForeignKeyField("value").ForeignKeyValue("code").DataSource((IEnumerable<object>)ViewData["ServiceId"]).Add();
})
.QueryCellInfo("queryCellInfoCaseListGrid")
.Render()
)
<script type="text/x-template" id="serviceTemplate">
<div id="status" class="servicetemp">
<span class="servicetext">${foreignKeyValue}</span>
</div>
</script>
<script type="text/javascript">
var serviceList;
$(document).ready(function () {
serviceList = @Html.Raw(Json.Encode(ViewData["ServiceId"]));
});
function queryCellInfoCaseListGrid(args) {
if (args.column.field === 'ServiceId') {
var service = serviceList.find(x => x.value === args.data.ServiceId);
if (service != null && service.color != "") {
console.log(args.cell);
args.cell.style.backgroundColor = service.DisplayColor;
args.cell.style.color = "#FFFFFF";
}
}
}
</script>
Thank you,
Rich W
