ui-grid внутри вкладки отображается без столбцов

Question

Я реализую вкладку с ui-сеткой, которая не отображает столбец из 5-го. В первой загрузке приложения сетка отображается очень хорошо, но если я нажму F5, Ctrl-F5, сетка не покажет столбцы, как показано на изображениях.

Я проверяю сгенерированный HTML-код, и содержимое для hiden-столбцов не было создано. Если я ставлю UI-сетку за пределами вкладки всегда это показано, как ожидалось

Первая Загрузить

После F5 или Ctrl + F5

Можно увидеть в меню что все столбцы помечены как показано

Hidding столбец обновить пользовательский интерфейс-GRID
Наружное вкладки всегда работает

Уменьшенный код веб

Service.prototype.getColumns = function() { 
 
     return [ 
 
         { field: 'branch_Name', displayName: commons.translate('branch_externalform_field_name_label'), enableCellEdit: false }, 
 
         { field: 'productPackageProduct_Product_Name', width: '300', displayName: commons.translate('product_externalform_field_name_label'), enableCellEdit: false }, 
 
         { field: 'productPackageProduct_ProductPackage_Name', displayName: commons.translate('productpackage_externalform_field_name_label'), enableCellEdit: false }, 
 
         { field: 'measureUnit_Name', displayName: commons.translate('measureunit_externalform_field_name_label'), enableCellEdit: false }, 
 
         { field: 'quantity', displayName: commons.translate('stock_selfform_field_quantity_label'), enableCellEdit: false }, 
 
         { field: 'price', displayName: commons.translate('stock_selfform_field_price_label'), enableCellEdit: false }, 
 
         { field: 'createdDate', cellFilter: 'date', displayName: commons.translate('stock_selfform_field_createddate_label'), enableCellEdit: false }, 
 
         { field: 'buyerOfferCount', width: '60', displayName: commons.translate('buyeroffer_entity_name_pluralsimple'), enableCellEdit: false, enableSorting: false }, 
 
         { 
 
          field: 'myCurrentBuyerOffer.unitaryPrice', width: '90', displayName: commons.translate('buyeroffer_html_fromstock_unitaryprice_label'), enableCellEdit: true, enableCellEditOnFocus: true, enableSorting: false, 
 
          editableCellTemplate: "<div class=\"bg-warning\"><form name=\"inputForm\"><input type=\"number\" ng-class=\"'colt' + col.uid\" ui-grid-editor ng-model=\"MODEL_COL_FIELD\" data-ng-model-options=\"{allowInvalid:true}\" data-z-float step=\"0.01\" min=\"0.01\" max=\"{{row.entity.price}}\" ng-pattern=\"/^[0-9]+(\.[0-9]{1,2})?$/\"></form></div>", 
 
         }, 
 
         { 
 
          field: 'myCurrentBuyerOffer.quantity', width: '90', displayName: commons.translate('buyeroffer_html_fromstock_quantity_label'), enableCellEdit: true, enableCellEditOnFocus: true, enableSorting: false, 
 
          editableCellTemplate: "<div class=\"bg-warning\"><form name=\"inputForm\"><input type=\"number\" ng-class=\"'colt' + col.uid\" ui-grid-editor ng-model=\"MODEL_COL_FIELD\" data-ng-model-options=\"{allowInvalid:true}\" data-z-float step=\"1\" min=\"0\" max=\"{{row.entity.quantity}}\"></form></div>", 
 
         }, 
 
         { field: 'id', displayName: '', width: '100', rezisable: false, enableColumnMenu: false, enableSorting: false, enableCellEdit: false, enableCellEditOnFocus: false, enableFocus: false, cellTemplate: '<div class="text-center"><button class="btn btn-xs" ng-disabled=\"!grid.appScope.stockToOfferLogic.listConfiguration.buyerOfferReadyToSave(row.entity.myCurrentBuyerOffer)\" ng-class="{\'btn-success\': row.entity.myCurrentBuyerOffer.changed, \'btn-default\': !row.entity.myCurrentBuyerOffer.changed}" ng-click="grid.appScope.stockToOfferLogic.listConfiguration.saveNewOfferFromStock(row.entity.myCurrentBuyerOffer)"><i class="fa fa-save"></i></button><button class="btn btn-xs" ng-if="grid.appScope.stockToOfferLogic.listConfiguration.showBuyerOfferRefreshButton(row.entity.myCurrentBuyerOffer)" ng-disabled=\"!grid.appScope.stockToOfferLogic.listConfiguration.buyerOfferCanRefresh(row.entity.myCurrentBuyerOffer)\" ng-class="{\'btn-danger\': row.entity.myCurrentBuyerOffer.changed, \'btn-default\': !row.entity.myCurrentBuyerOffer.changed}" ng-click="grid.appScope.stockToOfferLogic.listConfiguration.refreshBuyerOffer(row.entity.myCurrentBuyerOffer)"><i class="fa fa-refresh"></i></button><button class="btn btn-xs btn-success" ng-if="grid.appScope.stockToOfferLogic.listConfiguration.showBuyerOfferImplicationButton(row.entity.myCurrentBuyerOffer)" ng-click="grid.appScope.stockToOfferLogic.listConfiguration.acceptBuyerOffer(row.entity.myCurrentBuyerOffer.id)"><i class="fa fa-thumbs-o-up"></i></button></div>' }, 
 
     ]; 
 
    };

<ul class="nav nav-tabs nav-tabs-ar"> 
 
     <li class="pointer" ng-class="{'active': filters.activeSection == 'buyer'}"><a data-target="#buyer" data-toggle="tab" ng-click="filters.activeSection = 'buyer'" translate="traderole_html_buyer_label"></a></li> 
 
    </ul> 
 
    <!-- Tab panes --> 
 
    <div class="tab-content"> 
 
     <div class="tab-pane" id="buyer" ng-class="{'active': filters.activeSection == 'buyer'}"> 
 
      <div class="panel panel-default"> 
 
       <div class="panel-heading"> 
 
       </div> 
 
       <div class="panel-body"> 
 
        <div ng-if="filters.activeSection == 'buyer'" class="gridStyle" external-scopes="states" ui-grid="stockToOfferLogic.listConfiguration.gridOptions" ui-grid-pagination ui-grid-edit ui-grid-cellnav custom-ui-grid-scroll></div> 
 
       </div> 
 
      </div> 
 
      <h3></h3> 
 
     </div> 
 
    </div>

Answer 1

Проблема была решена с помощью ui.grid.autoResize.

Я не знаю, почему, но факт - это сетка (внутри вкладки), не позволяют добавить более 10 колонок. Независимо от размера столбца, если я добавил 11 defs, столбцы после 4-го будут скрыты. Итак, моя первая идея заключалась в том, что ui-grid не может вычислить ширину сетки, возможно, из-за оболочки вкладки. Поиск способа обновления сетки для измененного контейнера я нашел модуль ui.grid.autoResize, который разрешает все проблемы с землей.