कोणीय-यूई-ग्रिड: माउसओवर पर पंक्ति को हाइलाइट कैसे करें?

Question

जब माउस इसके शीर्ष पर होता है तो मैं कोणीय-यूई-ग्रिड की एक पूरी पंक्ति को हाइलाइट करना चाहता हूं।

मैंने पृष्ठभूमि-रंग सेट करने वाले एनजी-माउसओवर और एनजी-माउसलेव कॉलबैक जोड़कर पंक्ति टेम्पलेट को संशोधित करने का प्रयास किया है।

यहां मेरी पंक्ति है टेम्पलेट - मुझे उम्मीद है कि पहली पंक्तियां पूरी पंक्ति रंग को लाल रंग में बदल देंगी। लेकिन वर्तमान में माउस के नीचे वाला सेल बदल जाता है।

<div 
    ng-mouseover="rowStyle={'background-color': 'red'}; grid.appScope.onRowHover(this);" 
    ng-mouseleave="rowStyle={}" 
    ng-style="rowStyle" 
    ng-repeat="(colRenderIndex, col) in colContainer.renderedColumns track by col.uid" 
    ui-grid-one-bind-id-grid="rowRenderIndex + '-' + col.uid + '-cell'" 
    class="ui-grid-cell" 
    ng-class="{ 'ui-grid-row-header-cell': col.isRowHeader }" 
    role="{{col.isRowHeader ? 'rowheader' : 'gridcell'}}" 
    ui-grid-cell> 
</div> 

मैं माउसओवर घटनाओं पर पूरी पंक्ति को कैसे हाइलाइट करूं?

मैंने कोशिश की एक और दृष्टिकोण: कुछ कॉलबैक फ़ंक्शन का उपयोग करके - उदाहरण में appScope.onRowHover की तरह। यहां, मेरे पास पंक्ति की गुंजाइश है। मैं उस पंक्ति को onRowHover फ़ंक्शन के अंदर स्टाइल करने के बारे में कैसे जा सकता हूं?

धन्यवाद!

Link to Plunkr। मैं पूरे पंक्ति को लाल करने के लिए एक ग्रिड सेल पर आवास की उम्मीद करता हूं।

Answer 1

यहां, है। मैंने पंक्ति टेम्पलेट में बदलाव किया है। http://plnkr.co/edit/gKqt8JEo2FukS3URRLJ5?p=preview

RowTemplate:

<div ng-mouseover="rowStyle={'background-color': 'red'}; grid.appScope.onRowHover(this);" ng-mouseleave="rowStyle={}"> 
    <div ng-style="rowStyle" ng-repeat="(colRenderIndex, col) in colContainer.renderedColumns track by col.uid" ui-grid-one-bind-id-grid="rowRenderIndex + '-' + col.uid + '-cell'" 
    class="ui-grid-cell" ng-class="{ 'ui-grid-row-header-cell': col.isRowHeader }" role="{{col.isRowHeader ? 'rowheader' : 'gridcell'}}" ui-grid-cell> 
    </div> 
</div> 

Answer 2

(कोणीय-ui ग्रिड # 3.0.7) सबसे आसान तरीका CSS होवर शैलियों का उपयोग करने के लिए है, बस जोड़ने के पेज और आप कर रहे हैं के लिए अपने सीएसएस शैलियों के लिए निम्न पूरी तरह से तैयार:

.ui-grid-row:hover .ui-grid-cell { 
 
    background-color: beige; 
 
}

---

यूई-ग्रिड 3.1.1 के साथ उपर्युक्त शैलियों का काम नहीं हुआ। मैं यह करने के लिए किया था:

.ui-grid-row:nth-child(odd):hover .ui-grid-cell{background:red} 
.ui-grid-row:nth-child(even):hover .ui-grid-cell{background:red} 

Solution borrowed from here

Answer 3

SaiGiridhar के समाधान के साथ एक छोटी सी समस्या है: चयन काम कर के बाद से एक और आवरण एनजी-दोहराने div के शीर्ष पर जोड़ा जाता है बंद हो जाता है पर प्रकाश डाला।

एक छोटा सा ठीक यह होगा के लिए:

<div ng-mouseover="rowStyle={'background-color': (rowRenderIndex%2 == 1) ? '#76BED6' : '#BFDAE3'};" ng-mouseleave="rowStyle={}" ng-style="selectedStyle={'background-color': (row.isSelected) ? '#379DBF' : ''}"> 
    <div ng-style="(!row.isSelected) ? rowStyle : selectedStyle" ng-repeat="(colRenderIndex, col) in colContainer.renderedColumns track by col.uid" ui-grid-one-bind-id-grid="rowRenderIndex + '-' + col.uid + '-cell'" 
     class="ui-grid-cell" ng-class="{ 'ui-grid-row-header-cell': col.isRowHeader }" role="{{col.isRowHeader ? 'rowheader' : 'gridcell'}}" ui-grid-cell> 
    </div> 
</div> 

मैं बस अपना कोड को कॉपी-पेस्ट किया है। यह हाइलाइट की गई पंक्तियों के लिए वैकल्पिक पंक्ति स्टाइल जोड़ता है और चयनित पंक्ति हाइलाइटिंग को भी ठीक करता है।

उम्मीद है कि यह किसी की मदद करेगा।