В сетке кендо можно ли динамически устанавливать атрибуты столбца с помощью функции?

У меня есть некоторый код здесь, где я пытаюсь установить цвет фона ячейки на основе значения элемента данных: 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>

Я понимаю, что я мог бы сделать это с помощью шаблона, но потребуется дополнительный элемент html, так как вы не можете изменить разметку самого td. Я хотел бы использовать функцию для возврата атрибутов, если это поддерживается.

источник

2015-02-28 Chris

Вы сказали, что не хотите использовать шаблоны, но я думаю, вы говорили о шаблонах столбцов.

Вы можете изменить разметку самого тд с помощью шаблона строки:

<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>

Для цикла на работу, вы должны связать свой шаблон к сетке, хотя:

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)

В качестве альтернативы вы также можете создать атрибуты, подобные этому:

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

У этого было бы преимущество, если бы не использовать шаблон строки, но вам придется использовать синтаксис шаблона для логики.

(demo)

источник

2015-02-28 18:08:50

Если свойство атрибутов не поддерживает функции, это приводит меня к тому, что я собираюсь получить. – Chris

Теперь, когда вы это говорите, вы можете использовать функции в атрибутах, если вы не против разделителей шаблонов (и их нужно писать как строку) –

Пожалуйста, попробуйте приведенный ниже фрагмент кода.

<!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>

источник

2015-02-28 17:02:34

Я получил это работает с чем-то подобным:. '$ ("ТД") каждая (функция() { если ($ (это) .text () === "Jane Doe") { $ (this) .addClass ("good"); } }) ;, но я надеялся не иметь петли. Просто атрибут по функции. – Chris

В угловом кендо обратного вызова е не работает

использовать этот

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

источник

2015-10-25 09:18:13

Для Кендо-JQuery.

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

И это Кендо-MVC

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

источник

2018-02-05 15:08:51 MohammadSoori

В сетке кендо можно ли динамически устанавливать атрибуты столбца с помощью функции?

ответ

Смежные вопросы