All geek questions in one place

In a kendo grid, can I dynamically set column attributes using a function?

I have a code here where I am trying to set the background color of a cell based on the value of a data item: http://dojo.telerik.com/@solidus-flux/eHaMu

<!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> </head> <body> <div id="grid"></div> <script> $("#grid").kendoGrid({ columns: [ { field: "name", title: "Name", attributes: function(e) { return { "class": "table-cell", style: e.name == "Jane Doe" ? "background-color: red" : "background-color: green" }; } //attributes: { //"class": "table-cell", //style: "text-align: right; font-size: 14px" //} } ], dataSource: [ { name: "Jane Doe" }, { name: "John Doe" }] }); </script> </body> </html>

I understand that I can do this with a template, but this will require an additional html element, since you cannot change the markup of td itself. I would like to use a function to return attributes, if supported.

+6
source share
5 answers

You said you did not want to use templates, but I think you were talking about column templates.

You can change the markup of td itself using the line pattern:

 <script id="template" type="text/x-kendo-template"> <tr data-uid="#= uid #"> # this.columns.forEach(function(col) { var val = data[col.field], css, style = '' cClasses = ''; if (typeof col.attributes === 'function') { css = col.attributes(data); cClasses = css["class"]; style = css.style } # <td class='#= cClasses #' style='#= style #'> #= data[col.field] # </td> # }) # </tr> </script>

For the loop to work, you need to bind your template to the grid, though:

 var grid = $("#grid").kendoGrid({ columns: [{ field: "name", title: "Name", attributes: function (e) { return { "class": "table-cell", style: e.name == "Jane Doe" ? "background-color: red" : "background-color: green" }; } }, { field: "title", title: "Title" }], dataSource: [{name: "Jane Doe", title: "Dr. Dr."}, {name: "John Doe", title: "Senior Citizen"}] }).data("kendoGrid"); var template = kendo.template($("#template").html()).bind(grid); grid.setOptions({ rowTemplate: template });

( demo )

Alternatively, you can also create the following attributes:

 { field: "name", title: "Name", attributes: { "class": "# if(data.name === 'Jane Doe') { # red # } else { # green # } #" } },

This would have the advantage of not using a string pattern, but you would need to use the pattern syntax for the logic.

( demo )

+11
source

Try using the code snippet below.

 <!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> .greenBG { background-color:green; } .redBG { background-color:red; } </style> </head> <body> <div id="grid"></div> <script> $("#grid").kendoGrid({ columns: [{ field: "name", title: "Name", attributes: function (e) { return { "class": "table-cell", style: e.name == "Jane Doe" ? "background-color: red" : "background-color: green" }; } }], dataSource: [{ name: "Jane Doe" }, { name: "John Doe" }], dataBound: function () { dataView = this.dataSource.view(); for (var i = 0; i < dataView.length; i++) { if (dataView[i].name === "Jane Doe") { var uid = dataView[i].uid; $("#grid tbody").find("tr[data-uid=" + uid + "]").addClass("greenBG"); } else { var uid = dataView[i].uid; $("#grid tbody").find("tr[data-uid=" + uid + "]").addClass("redBG"); } } } }); </script> </body> </html>
0
source

In angular, kendo e answer doesn't work

Use this

 attributes: { "ng-confirm-message": "{{this.dataItem.is_active ? \'Are you sure deactive ?\' : \'Are you sure active ?\'}}", "confirmed-click": "vm.inlineSubmit(this.dataItem.toJSON() ,true)" }
0
source

For Kendo-jQuery.

 <div id="grid"></div> <script> $("#grid").kendoGrid({ columns: [{ field: "name", headerAttributes: { "class": "table-header-cell", style: "text-align: right; font-size: 14px" } }] }); </script>

And this Kendo-MVC

 .Columns(columns => { columns.Bound(c => c.ActiveReason).Title("ActiveReason").HeaderHtmlAttributes(new { @class = "table-header-cell" }); })
0
source

A few years later, but ... the attribute function doesn’t work for me at all, it doesn’t even work, it seems pretty, but it doesn’t work (why do I need a manual class if functions are provided to do the work? Something seems strange),

I make editable cells based on the values ​​of other fields, but also I needed to change the styles

1) Add validation to the field in which you want to embed the css class,

 //Your other fields configuration field:"dependentField", attributes: { "class": "# if(data.ImportantField!==true) { # nonEditableCellStyle # } else { # editableCellStyle # }# ", } //Your other fields configuration

2) Bind the grid change event and check if there is a change in any important field, if it is a field that controls the style of other cells, just call the refresh method

 var _kendoGrid = $('#myGrid').data("kendoGrid"); _kendoGrid.dataSource.bind("change", function (e) { if (e.action === "itemchange") { if (e.field === "ImportantField") { _kendoGrid.refresh(); } } });

The refresh method renders your grid again, which means that your weather functions are a template or attribute function (and again, for me this does not work at all), in which case the correct styles or classes will be applied.

0
source

Source: https://habr.com/ru/post/1214382/

More articles:


All Articles