Kendo ızgarasında, sütun niteliklerini dinamik olarak bir işlevle ayarlayabilir miyim?

Ben veri öğesinin değerine bağlı olarak bir hücrenin arka plan rengini ayarlamak çalışıyorum burada bazı kodlar var: http://dojo.telerik.com/@solidus-flux/eHaMu Kendo ızgarasında, sütun niteliklerini dinamik olarak bir işlevle ayarlayabilir miyim?

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

Ben bir şablon ile bu yapabileceğini fark, ancak bu td'nin işaretlemesini değiştiremeyeceğiniz için ekstra bir html öğesi gerekir. Destekleniyorsa öznitelikleri döndürmek için bir işlev kullanmak isterim.

kaynak

2015-02-28 Chris

Şablonları kullanmak istemediğinizi söylediniz, ancak sütun şablonlarından bahsediyorsunuz.

Bir satır şablonu kullanarak td kendisinin işaretlemeyi değiştirebilirsiniz:, gerçi şebekeye şablonunuzu bağlamak gerekir çalışmak döngü için

<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) alternatif olarak

, ayrıca böyle özelliklerini oluşturabilirsiniz:

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

Bu, satır şablonunu kullanmamanın avantajına sahip olacaktır, ancak mantık için şablon sözdizimini kullanmanız gerekir. açısal kendo geri arama e olarak

(demo)

kaynak

2015-02-28 18:08:50

Öznitelikler özelliği işlevleri desteklemiyorsa, bu bana ulaşacağım kadar yaklaşır. – Chris

şimdi söylüyorsanız, şablon sınırlayıcılarına (ve bir dizge olarak yazmak zorunda kalmamanıza) gerek duymadığınız sürece özniteliklerdeki işlevleri kullanabilirsiniz. –

Lütfen aşağıdaki kod parçacığı ile deneyin.

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

kaynak

2015-02-28 17:02:34

. '$ ("Td") her (function() { if ($ (this) .text () === "Jane Doe") { $ (this) .addClass ("iyi"); } }); ama bir döngü olmamasını umuyordum. Sadece işleve göre bir özellik. – Chris

Kullanıcıyı Kendo-JQuery için, bu

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

kaynak

2015-10-25 09:18:13

çalışmaz.

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

Ve bu Kendo-MVC Ben benzer bir şey ile çalışan var

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

kaynak

2018-02-05 15:08:51 MohammadSoori

Kendo ızgarasında, sütun niteliklerini dinamik olarak bir işlevle ayarlayabilir miyim?

cevap

İlgili konular