Conditionally change text color of foreign key column

[Michael]

Hi,

i want to change the text color of a foreign key column depending on the values of two other columns.

I do this for a bounded column using a client template:

columns.Bound(p => p.CompanyAlternative).ClientTemplate("# if ( LeIdOriginal === LeIdAlternative) { # <div> #= CompanyAlternative # </div> # } else { # <div style='color: rgb(225,0,15);'> #= CompanyAlternative # </div> # } #");

But how can i achieve this for a foreign key?

 

Thanks

Michael

[Konstantin Dikov]

Hello Michael,

With a ForeignKey column it will be difficult to achieve the desired result by using a ClientTemplate, because you will have to manually match the values. For your convenience, following is an example (based on our online demo for the ForeignKey column), where there is a conditional template for the foreign key column:

@(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.ProductViewModel>()
    .Name("grid")
    .Columns(columns =>
    {
        columns.Bound(p => p.ProductName);
        columns.ForeignKey(p => p.CategoryID, (System.Collections.IEnumerable)ViewData["categories"], "CategoryID", "CategoryName")
            .Title("Category").Width(200).ClientTemplate("#=getForeignKeyTemplate(data)#");
        columns.Bound(p => p.UnitPrice).Width(200);
        columns.Command(command => command.Destroy()).Width(150);
    })
    .ToolBar(toolBar =>
        {
            toolBar.Create();
        })
    .Editable(editable => editable.Mode(GridEditMode.InCell))
    .Filterable()
    .Groupable()
    .Pageable()
    .Scrollable()
    .HtmlAttributes(new { style = "height:540px;" })
    .DataSource(dataSource => dataSource
        .Ajax()
        .PageSize(20)
        .ServerOperation(false)
        .Events(events => events.Error("errorHandler"))
        .Model(model =>
        {
            model.Id(p => p.ProductID);
            model.Field(p => p.ProductID).Editable(false);
            model.Field(p => p.CategoryID).DefaultValue(1);
        })
        .Read(read => read.Action("ForeignKeyColumn_Read", "Grid"))
        .Update(update => update.Action("ForeignKeyColumn_Update", "Grid"))
        .Create(create => create.Action("ForeignKeyColumn_Create", "Grid"))
        .Destroy(destroy => destroy.Action("ForeignKeyColumn_Destroy", "Grid"))
    )
)

<script type="text/javascript">
    var categories;
    function getCategory(id) {
        categories ? categories : categories = $("#grid").data("kendoGrid").columns[1].values;
        for (var i = 0; i < categories.length; i++) {
            if (categories[i].value == id) {
                return categories[i].text;
            }
        }
    }

    function getForeignKeyTemplate(data) {
        if (data.ProductName[0] == "C") {
            return "<span style='color: red'>" + getCategory(data.CategoryID) + "</span>"
        }
        else {
            return "<span>" + getCategory(data.CategoryID) + "</span>"
        }
    }
    function errorHandler(e) {
        if (e.errors) {
            var message = "Errors:\n";
            $.each(e.errors, function (key, value) {
                if ('errors' in value) {
                    $.each(value.errors, function() {
                        message += this + "\n";
                    });
                }
            });
            alert(message);
        }
    }
</script>

Another option would be to handle the DataBound event and traverse all items in order to apply the custom style.

If further questions arise, please feel free to contact us again.


Regards,
Konstantin Dikov
Telerik by Progress

[Michael]

Hello Konstantin,

 

i implemented it in the same way as in the example and it works fine. Thanks!

 

Regards,

Michael