एनजी-ग्रिड पृष्ठ लोड पर 100% चौड़ाई नहीं लेता है लेकिन

Question

आकार बदलने पर ठीक दिखाता है कोणीय जेएस के साथ एनजी-ग्रिड पेज लोड पर 100% चौड़ाई नहीं लेता है। यहां मेरा कोड है:

<tabs ng-cloak> 
     <pane title="Test Plan"> 
      <tabs> 
       <pane title="Include Tests"> 
        <div ng-controller="includedTestPlanGridCntrl"> 
         <div class="gridStyle" ng-grid="gridOptions"></div> 
        </div> 
       </pane> 
       <pane title="Excluded Tests"> 
        <div ng-controller="excludedTestPlanGridCntrl"> 
         <div class="gridStyle1" ng-grid="gridOptions"></div> 
        </div> 
       </pane> 
      </tabs> 
     </pane> 
     <pane title="Advanced Planning"> 
      Some text here 
     </pane> 
    </tabs> 

यदि मैं आकार बदलता हूं तो ग्रिड सही ढंग से दिखाई देता है।

Answer 1

मैंने इसके लिए एक समाधान तैयार किया है।

ng.EventProvider के अंदर ng-grid.js में निम्न पंक्तियां जोड़ें।

setInterval(function() { 
    domUtilityService.RebuildGrid($scope,grid); 
}, 30); 

Answer 2

यह परिवर्तन CPU लोड के संदर्भ में बहुत बेहतर होगा।

लाइन 2904

https://github.com/angular-ui/ng-grid/blob/a0d693e413e993145bff274375f1102770585e59/ng-grid-2.0.6.debug.js

इस से:

// we have to set this to false in case we want to autogenerate columns with no initial data. 
    grid.lateBoundColumns = false; 
    $scope.columns = []; 
    grid.config.columnDefs = a; 
    grid.buildColumns(); 
    grid.configureColumnWidths(); 
    grid.eventProvider.assignEvents(); 
    domUtilityService.RebuildGrid($scope, grid); 
}, true); 

इस के लिए

:

// we have to set this to false in case we want to autogenerate columns with no initial data. 
    grid.lateBoundColumns = false; 
    $scope.columns = []; 
    grid.config.columnDefs = a; 
    grid.buildColumns(); 
    grid.configureColumnWidths(); 
    grid.eventProvider.assignEvents(); 
    setTimeout(function() {domUtilityService.RebuildGrid($scope,grid);}, 1); 
}, true); 

Answer 3

मेरे मामले मैं ले जाया गया एनजी ग्रिड पुस्तकालय स्क्रिप्ट सभी स्क्रिप्ट के बाद, कि में डीओएम पेड़ बदल दिया। दूसरे शब्दों में:
समस्या से :

<script src="jquery.mmenu.min.all.js"></script> 
<script type="text/javascript" src="ng-grid-2.0.7.min.js"></script> 

Answer 4

आप इस्तेमाल कर सकते हैं ग्रिड ngGridLayoutPlugin (found here) और नियंत्रक init समारोह में यह कहते हैं:

<script type="text/javascript" src="ng-grid-2.0.7.min.js"></script> 
<script src="jquery.mmenu.min.all.js"></script> 

समस्या को ठीक।

var layoutPlugin = new ngGridLayoutPlugin(); 


    $scope.init = function() { 
     $scope.gridOptions = { 
      plugins: [layoutPlugin], 
     }; 


     window.setTimeout(function(){ 
      layoutPlugin.updateGridLayout(); 
     }, 100); 

    }; 

Answer 5

मुझे Angular UI Bootstrap से टैब का उपयोग करने में एक ही समस्या थी।

सरल ठीक एनजी ग्रिड के एक माता पिता के तत्व पर resize घटना को ट्रिगर करने के,
अच्छा होगा यदि आप युक्त एनजी ग्रिड टैब का चयन किया गया है।

एनजी-ग्रिड सही ढंग से आकार बदल जाएगा इस घटना को ट्रिगर किया गया है।

कुछ इस तरह का प्रयोग करें:

function onTabSelect() { 
    $('.grid-container').trigger('resize'); 
} 

Answer 6

उम्मीद है कि इस समय किसी और मैं परिदृश्यों में चारों ओर एक काम जहां यह अभी भी एक समस्या है पर खर्च की बचत होगी। मेरे लिए, मेरी आखिरी कॉलम चौड़ाई "*" थी, और कटऑफ कोई मुद्दा नहीं है, इसलिए एक रैपर div कार्यों का उपयोग करना। मुझे जावास्क्रिप्ट टाइमआउट समाधान में भी रूचि नहीं थी।

HTML:

<div class="gridWidthWrapper"> 
    <div class="gridStyle" ng-grid="gridOptions"></div> 
</div> 

नियंत्रक:

$scope.gridOptions = { 
    data: 'dataList', 
    columnDefs: [{field: 'type', displayName: 'Type', width: 120}, 
     {field: 'description', displayName: 'Description', width: '*'}] 
    }; 

सीएसएस:

.gridWidthWrapper { 
    width: 100%; 
    overflow: hidden; 
} 

.gridStyle { 
/* width: 100%; --- 100% not sizing on load - using gridWidthWrapper class to obtain 100% */ 
    width: 2000px; 
    height: 150px; 
} 

Answer 7

आप सभी जटिल हैं, यह स्रोत कोड में किए गए परिवर्तनों के लिए सबसे अच्छा तरीका नहीं है ..

बस इसमें जोड़ें div

data-ng-show="myData.length" 

जहां मेरा डेटा ग्रिड डेटा स्रोत है, डेटा लोड एसिंक को सुनिश्चित करें या लोड डेटा विधि पर $ टाइमआउट सेट करें।

मैं जानता हूँ कि ngGrid एक विधि getPagedDataAsync कहा जाता है, के लिए तैयार JQuery दस्तावेज़ से यह कहते हैं, इस तरह की कुछ:

$(function(){ 
    getPagedDataAsync(...) 
}); 

यदि आप डेटा पेजिंग नहीं कर रहे हैं, बस JQuery दस्तावेज़ तैयार से कस्टम डेटा लोड विधि कॉल।

आशा है कि यह :)

सादर

Answer 8

इस के लिए मुझे

$scope.gridOptions = { 
     data: 'gridData', 
     init:function(grid,$scope) { 
      setTimeout(function() { 
       $scope.gridOptions.$gridServices.DomUtilityService.RebuildGrid(
        $scope.gridOptions.$gridScope, 
        $scope.gridOptions.ngGrid 
       ); 
      },1000); 
     } 
    }; 

काम में मदद करता है चर आप का उपयोग करें और बिंगो के साथ "gridOptions" बदलें!

Answer 9

कोशिश सेटिंग एनजी-यदि करने के लिए केवल ग्रिड शामिल हैं जब शो के लिए डेटा उपलब्ध नहीं है: (एनजी-हाइड मेरे लिए काम नहीं किया)

<div class="gridStyle" ng-grid="gridOptions" ng-if="myViewModel.Data.length"></div> 

स्रोत: https://github.com/angular-ui/ng-grid/issues/855

संबंधित प्रश्न: When ng-grid change visibility from invisible to visible by ng-hide, grid width not being re-calculated

Answer 10

यदि आपके पास ग्रिड लोड होने के बाद हैंडलर है, तो आप एक विधि को कॉल कर सकते हैं जो वास्तव में विंडो का आकार बदलते समय ग्रिड को फिर से प्रस्तुत करता है।

gridApi.core.handleWindowResize() 

जब भी आप आकार बदलना ईवेंट को कॉल करना चाहते हैं तो यह आपकी मदद कर सकता है।