कॉलम में किसी निश्चित मान के आधार पर एजी ग्रिड में एक पूरी पंक्ति के लिए पृष्ठभूमि रंग कैसे प्रदान करें?

Question

मुझे कॉलम में किसी शर्त के आधार पर एजी ग्रिड में एक पूरी पंक्ति के लिए पृष्ठभूमि रंग प्रदान करने की आवश्यकता है। मुझे ऐसा कोई उदाहरण नहीं मिला जहां कॉलम में एक निश्चित मूल्य के आधार पर पूरी पंक्ति रंगीन है ..

Answer 1

पिछले जवाब कुछ हद तक पुरानी हो चुकी है और अब हम पर कुछ अधिक नियंत्रण है ग्रिड की स्टाइल। तुम सिर्फ इस तरह इस काम के लिए getRowStyle(params) इस्तेमाल कर सकते हैं,:

gridOptions.getRowStyle(params) { 
    if (params.data.myColumnToCheck === myValueToCheck) { 
     return {'background-color': 'yellow'} 
    } 
    return null; 
} 

जाहिर है, myColumnToCheck स्तंभ आप के खिलाफ अपने मूल्य जाँच कर रहे हैं हो सकता है (इसी नाम आप colDef वस्तु की आईडी/क्षेत्र संपत्ति में इनपुट) , और myValueToCheck वह मूल्य होगा जो आप चाहते हैं कि कॉलम को सभी पीले रंग को पंक्ति बनाना है।

Answer 2

आप एक कमांड में एक संपूर्ण पंक्ति का पृष्ठभूमि रंग नहीं बदल सकते हैं। आपको columnDefs में cellStyle कॉलबैक सेटअप के माध्यम से ऐसा करने की आवश्यकता है। इस कॉलबैक को पंक्ति में प्रत्येक सेल के अनुसार बुलाया जाएगा। आपको सभी कोशिकाओं के रंग को बदलकर पंक्ति का रंग बदलना होगा।

निम्नलिखित स्तंभ परिभाषा

{ 
    headerName: "Street Address", field: "StreetAddress", cellStyle: changeRowColor 
} 

देखें आप अपने सभी स्तंभों के लिए यह करने के लिए की जरूरत है।

यहां आपका changeRowColor फ़ंक्शन है।

function changeRowColor(params) { 

    if(params.node.data[4] === 100){ 
     return {'background-color': 'yellow'};  
    } 

} 

यह एक पंक्ति के रंग बदल जाता है, तो तीसरे सेल का मान (हालांकि अभी भी सही और काम) 100

Answer 3

उत्तर 2 सही है, लेकिन इस्तेमाल किया गया वाक्यविन्यास गलत है, और मुझे इसे हल करने की कोशिश करने में कई समस्याएं हुईं। उदाहरण के लिए, उत्तर 2 कोड barfed को कम करने का प्रयास कर रहा है। यह काम करता है, लेकिन जहां तक ​​मैं देख सकता हूं यह उचित वाक्यविन्यास नहीं है।

ध्यान दें, यह इनलाइन किया जा सकता है, या एक बाहरी समारोह के साथ, 2 अलग अलग तरीकों से:

अलग फंक्शन:

vm.gridOptions = { 
    columnDefs: columnDefs, 
    getRowStyle: getRowStyleScheduled 
} 

function getRowStyleScheduled(params) { 
    if (params.selected && params.data.status === 'SCHEDULED') { 
     return { 
      'background-color': '#455A64', 
      'color': '#9AA3A8' 
    } 
    } else if (params.data.status === 'SCHEDULED') { 
     return { 
      'background-color': '#4CAF50', 
      'color': '#F4F8F5' 
     }; 
    } 
    return null; 
}; 

इनलाइन:

vm.gridOptions = { 
    columnDefs: columnDefs, 
    getRowStyle: function(params) { 
     if (params.selected && params.data.status === 'SCHEDULED') { 
      return { 
       'background-color': '#455A64', 
       'color': '#9AA3A8' 
      }; 
     } else if (params.data.status === 'SCHEDULED') { 
      return { 
       'background-color': '#4CAF50', 
       'color': '#F4F8F5' 
      }; 
     } 
     return null; 
    } 
} 

Answer 4

मैं अलग रंग सेट यहां तक ​​कि विषम पंक्तियों के लिए आप इसे किसी भी तरह से कर सकते हैं ..

$scope.gridOptions.getRowStyle = function getRowStyleScheduled(params){  
     if(parseInt(params.node.id)%2==0) { 
      return {'background-color': 'rgb(87, 90, 90)'} 
     }else { 
      return {'background-color': 'rgb(74, 72, 72)'} 
     } 
    };