Conditionally change text color of foreign key column

3 posts, 0 answers
  1. Michael
    Michael avatar
    2 posts
    Member since:
    Oct 2016

    Posted 18 Nov 2016 Link to this post

    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

  2. Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    2466 posts

    Posted 22 Nov 2016 Link to this post

    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
    Telerik UI for ASP.NET MVC is ready for Visual Studio 2017 RC! Learn more.
  3. Michael
    Michael avatar
    2 posts
    Member since:
    Oct 2016

    Posted 22 Nov 2016 in reply to Konstantin Dikov Link to this post

    Hello Konstantin,

     

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

     

    Regards,

    Michael

Back to Top