एक केंडो ग्रिड में, क्या मैं एक समारोह के साथ गतिशील रूप से कॉलम विशेषताओं को सेट कर सकता हूं?

मैं कुछ कोड यहाँ है जहाँ मैं डेटा आइटम के मूल्य के आधार पर एक सेल की एक पृष्ठभूमि रंग सेट करने के लिए कोशिश कर रहा हूँ मिल गया है: 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>

मुझे पता है मैं एक टेम्पलेट के साथ ऐसा कर सकता है, लेकिन यह है कि एक अतिरिक्त एचटीएमएल तत्व की आवश्यकता होगी, क्योंकि आप टीडी के मार्कअप को नहीं बदल सकते हैं। यदि समर्थित है तो मैं गुणों को वापस करने के लिए फ़ंक्शन का उपयोग करना चाहता हूं।

स्रोत

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

मैं इसे कुछ इसी तरह के साथ काम कर ली:। '$ (" Td ") प्रत्येक (function() { अगर ($ (this) .text () === "जेन डो") { $ (यह) .addClass ("अच्छा"); } }); लेकिन मैं उम्मीद कर रहा था कि लूप न हो। समारोह द्वारा बस एक विशेषता। – 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

एक केंडो ग्रिड में, क्या मैं एक समारोह के साथ गतिशील रूप से कॉलम विशेषताओं को सेट कर सकता हूं?

उत्तर

संबंधित मुद्दे