Kann ich in einem Kendo-Raster Spaltenattribute dynamisch mit einer Funktion setzen?

Ich habe einige Code hier, wo ich basierend auf dem Wert des Datenelements eine Hintergrundfarbe einer Zelle zu setzen versuche: http://dojo.telerik.com/@solidus-flux/eHaMu Kann ich in einem Kendo-Raster Spaltenattribute dynamisch mit einer Funktion setzen?

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

Ich weiß, ich könnte dies tun mit einer Vorlage, aber das würde ein extra html-element benötigen, da du die markierung des td selbst nicht ändern kannst. Ich möchte eine Funktion verwenden, um Attribute zurückzugeben, wenn das unterstützt wird.

Quelle

2015-02-28 Chris

Sie sagten, Sie wollen keine Vorlagen verwenden, aber ich denke, Sie sprachen über Spaltenvorlagen.

Sie können die Markup der selbst td ändern, indem Sie eine Zeile Vorlage:

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 
});

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

Für die Schleife zu arbeiten, können Sie Ihre Vorlage an das Netz allerdings binden, müssen (demo)

Als Alternative können Sie auch Attribute wie folgt erstellen:

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

Dies hätte den Vorteil, die Zeilenvorlage nicht zu verwenden, aber Sie müssten die Vorlagensyntax für die Logik verwenden.

(demo)

Quelle

2015-02-28 18:08:50

Wenn die Attributeigenschaft Funktionen nicht unterstützt, dann bringt mich das so nahe, wie ich es bekommen werde. – Chris

Jetzt, wo Sie es sagen, können Sie Funktionen in den Attributen verwenden, solange Sie die Template-Begrenzer nicht stören (und sie als String schreiben müssen) –

Bitte versuchen Sie es mit dem folgenden Code-Snippet.

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

Quelle

2015-02-28 17:02:34

Ich habe es mit etwas ähnlich. '$ ("Td"), die jeweils (function() { if ($ (this) .text () === "Jane Doe") { $ (this) .addClass ("gut"); } }); 'aber ich hatte gehofft, keine Schleife zu haben. Nur ein Attribut nach Funktion. – Chris

In Winkel Kendō Rückruf e arbeiten nicht

verwenden

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

Quelle

2015-10-25 09:18:13

Für 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>

Und der Kendo-MVC

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

Quelle

2018-02-05 15:08:51 MohammadSoori

Kann ich in einem Kendo-Raster Spaltenattribute dynamisch mit einer Funktion setzen?

Antwort

Verwandte Themen