Progress® Kendo UI® for jQuery Feedback Portal
Back to Feed
Request a Feature Report a Bug
Unplanned
Last Updated: 22 Nov 2019 15:31 by ADMIN
Chris
Created on: 13 Nov 2019 16:46
Category: TreeList
Type: Feature Request
2
Conditional logic on column attributes is not working.

if you look at this dojo (http://dojo.telerik.com/oSOloLuR) the attributes work for kendoGrid.  If you change to a kendoTreeList, the conditional attributes do not work.  Is there a different way to change the attribute?  I tried in the template, but can't set the background-color style in the temple.

Code from dojo with kendoGrid changed to kendoTreeList:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Kendo UI Snippet</title>

    <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1411/styles/kendo.common.min.css">
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1411/styles/kendo.rtl.min.css">
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1411/styles/kendo.default.min.css">
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1411/styles/kendo.dataviz.min.css">
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1411/styles/kendo.dataviz.default.min.css">
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1411/styles/kendo.mobile.all.min.css">

    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://cdn.kendostatic.com/2014.3.1411/js/kendo.all.min.js"></script>
<style>
  .red {
  background-color: red
  }
    .green {
  background-color: green
  }
</style>
</head>
<body>
  
<div id="grid"></div>
<script>
  
var grid = $("#grid").kendoTreeList({
  columns: [ 
    {
    field: "name",
    title: "Name",
    attributes: { "class": "# if(data.name === 'Jane Doe') { # red # } else { # green # } #" }
    },
            {
    field: "title",
    title: "Title"
    }
   ],
  sortable: true,
  dataSource: [ { name: "Jane Doe", title: "Dr. Dr." }, { name: "John Doe", title: "Senior Citizen" }]
}).data("kendoTreeList");
  

  
</script>
</body>
</html>

 

5 comments
ADMIN
Alex Hajigeorgieva
Posted on: 22 Nov 2019 15:31

Hi, Chris,

Here is the link to the public item or your reference:

https://feedback.telerik.com/kendo-jquery-ui/1442053-conditional-logic-on-column-attributes-is-not-working

Kind Regards,
Alex Hajigeorgieva
Progress Telerik

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Chris
Posted on: 20 Nov 2019 19:46

Yes, please convert to a feature request.  

thanks.

ADMIN
Alex Hajigeorgieva
Posted on: 20 Nov 2019 09:15

Hello, Chris,

I am glad that the suggestion works for you.

Do you mind if I convert this to a public feature request?

Kind Regards,
Alex Hajigeorgieva
Progress Telerik

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Chris
Posted on: 19 Nov 2019 16:12
Thanks,  that will work for now.
ADMIN
Alex Hajigeorgieva
Posted on: 18 Nov 2019 13:24

Hello, Chris,

Thank you for the provided runnable example.

If you inspect the DOM you will notice that the attributes in the Kendo UI TreeList are not evaluated. This thread could be converted to a public feature request to allow others to upvote it. The threads which gain popularity are pushed forward for implementation. Let me know if you would like me to do that.

Meanwhile, there are two options:

  • Use the data bound event and assign the class as you loop through the cells

https://dojo.telerik.com/OlufuVIB

        dataBound: function(e){
        	var treelist = this;
          var rows = treelist.items();
          $.each(rows, function(i, row){
          	var dataItem = treelist.dataItem(row);
            if(dataItem.name == "Jane Doe"){
              $(row).find("td:first-child").addClass("red");
            } else {
            	$(row).find("td:first-child").addClass("green");
            }
          });
        }

http://dojo.telerik.com/oSOloLuR/5

 .green {
        background-color: green;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
      }

      td {
        position: relative;
      }

        template: function(e){
              if(e.name == "John Doe"){
                return "<span class='red'>" + e.name + "</span>"
              } else {
                return "<span class='green'>" + e.name + "</span>"
              }
            }

Kind Regards,
Alex Hajigeorgieva
Progress Telerik

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Create an account Log In
View
Type
Status
Category