कोणीय ui ग्रिड

Question

में कॉलम चौड़ाई निर्धारित करना मैं कोणीय यूई-ग्रिड का उपयोग कर रहा हूं और लगभग 30 कॉलम के साथ एक लंबी ग्रिड रखता हूं, मैं कॉलम के लिए निश्चित चौड़ाई निर्धारित करना चाहता हूं ताकि कम से कम कॉलम हेडर आसानी से देखा जा सके। सेट करने का कोई तरीका है, सभी कॉलम के लिए 10% चौड़ाई कहें, या मुझे प्रत्येक कॉलम के लिए इसे एक-एक करके करना है।

कई कॉलम ui ग्रिड हेडर सेल पर न्यूनतम-चौड़ाई निर्धारित करने के बाद एक

.ui-grid-header-cell { 
    min-width: 150px !important; 
} 

Answer 1

में संयुक्त हो गया है कि आप अपने सीएसएस

करने के लिए शैली में जोड़ सकते हैं

.ui-grid-header-cell { 

    min-width: 200px !important; 
    max-width: 300px !important; 

} 

Answer 2

आपके कॉलम निश्चित सेट करने के बाद इटियंस, आप निम्नलिखित

for (var i = 0; i < $scope.gridOptions.columnDefs.length; i++) { 
    $scope.gridOptions.columnDefs[i].width = '10%'; 
} 

यह सभी स्तंभों को आपके द्वारा चुने गए चौड़ाई में सेट कर देगा। 10 कॉलम पर 30 कॉलम के साथ उपयोगकर्ता सभी कॉलम देखने के लिए क्षैतिज स्क्रॉलबार का उपयोग करेगा, जैसा आप चाहें। मैंने कोई सीएसएस नहीं बदला।

Answer 3

यदि आप लूप के लिए चौड़ाई जोड़ना चाहते हैं या तरीकों से यह आपके ग्रिड के प्रतिपादन को धीमा कर सकता है, तो मैं इसे सीएसएस के माध्यम से करने का सुझाव दूंगा। क्योंकि मुझे 15,000 पंक्तियों और 80 कॉलम के साथ एक ही समस्या थी और मैंने लूप का उपयोग करके चौड़ाई जोड़ने की कोशिश की और ऐसा लगता है कि ग्रिड के प्रतिपादन को धीमा करना धीमा लगता है। तो, अपने सीएसएस में कोड नीचे जोड़ने का प्रयास करें, यह आपके उद्देश्य को हल करेगा।

.ui-grid-header-cell { 
min-width: 200px !important; 
max-width: 300px !important; 
} 

.ui-grid-cell { 
min-width: 200px !important; 
max-width: 300px !important; 
} 

Answer 4

आप देख रहे हैं निश्चित चौड़ाई के लिए, अगर आप इस तरह colomnDefs में चौड़ाई संपत्ति का उपयोग कर सकते हैं:

columnDefs : [ 
      { field : 'pageIcon', displayName : 'Page Icon', width:25}, 
      { field : 'pageName', displayName : 'Page Name', width:100} 
]