Угловой ng-сетчатый заголовок не статический при загрузке первой страницы

Question

Вначале я загружаю страницу с помощью моей ng-сетки, а затем изменяю размер столбцов сетки, так что мне нужно прокручивать ее по горизонтали, чтобы увидеть их все, первый столбец не " t оставаться статичным. Как только я обновляю страницу, сетка загружает настройки столбцов из localstorage, а затем первый col остается статическим. Я использую настраиваемый headerCellTemplate, и у меня есть enablePinning: true и first column pinned: true уже настроен. Я пытаюсь понять, как заставить первый столбец оставаться статическим при начальной загрузке страницы.

Код:

var headerTemplate = '<div class="ngHeaderSortColumn test" ng-style="{\'cursor\': col.cursor}" ng-class="{ \'ngSorted\': !noSortVisible }">' 
+ '<div ng-click="col.sort($event)" ng-class="\'colt\' + col.index" class="ngHeaderText" popover-append-to-body="true" popover-trigger="mouseenter"' 
+ 'popover="{{getTooltip(col.displayName)}}">' 
+ '{{col.displayName}}</div> <div class="ngSortButtonDown" ng-show="col.showSortButtonDown()"></div>' 
+ '<div class="ngSortButtonUp" ng-show="col.showSortButtonUp()"></div>' 
+ '<div class="ngSortPriority">{{col.sortPriority}}</div>' 
+ '<div ng-class="{ ngPinnedIcon: col.pinned, ngUnPinnedIcon: !col.pinned }" ng-click="togglePin(col)" ng-show="col.pinnable"></div></div>' 
+ '<div ng-show="col.resizable" class="ngHeaderGrip" ng-click="col.gripClick($event)" ng-mousedown="col.gripOnMouseDown($event)"></div>'; 

var adverseEvent = { 
    field: 'event_label', 
    width: '28%', 
    pinned: true, 
    visible: true, 
    displayName: 'Adverse Event', 
    headerCellTemplate: headerTemplate, 
    cellTemplate: '<div class="ngCellText pull-left">{{row.getProperty(col.field) }}</div>' 
}; 

... больше столбцов ниже, не имеет значения

Функция, которая устанавливает gridColumns:

function getCustomGridColumns(stateName) { 
    var storageId = stateName + exports.GRID_STORAGE_ID; 
    var gridColumns = localStorageService.get(storageId); 
    if (!gridColumns) { 
     gridColumns = getDrugCostColumnDefinition(); 
     localStorageService.set(storageId, angular.toJson(gridColumns)); 
    } 
    return gridColumns; 
} 

столбцов сетки Get

function getDefaultGridOptions() { 
    return { 
     data: 'gridNumbers', 
     enableSorting: true, 
     enableColumnResize: true, 
     showGroupPanel: true, 
     enableCellGrouping: true, 
     showColumnMenu: true, 
     enablePinning: true, 
     showFilter: true, 
     jqueryUITheme: true, 
     columnDefs: 'headers', 
     sortInfo:{fields:['metric_sum_event_cost'], directions:['desc']}, 
     plugins: [new ngGridFlexibleHeightPlugin({"maxHeight": 500}), new ngGridCsvExportPlugin()], 
     showFooter: true, 
     footerTemplate: 'app/common/partials/footer-template.html', 
     footerRowHeight: 43 
    } 
}; 


// watch when any column settings changed from grid settings and saved into localstorage 
$scope.$watch('drugCostGridOptions.$gridScope.columns', functionChangeGrid, true); 

// callback for watchers 
function functionChangeGrid(newVal, oldVal) { 
    var config = []; 
    angular.forEach(newVal, function (col) { 
     config.push(_.pick(col, 'field', 'displayName', 'width', 'visible', 'headerCellTemplate', 'cellFilter', 'cellTemplate', 'pinned')); 
    }); 
    drugCostsService.setCustomGridColumns(currentState, config); 
} 

Answer 1

Разобрался Исход ue - похоже, что моя закрепленная колонка должна иметь ширину, определенную в пикселях, а не процент:

var adverseEvent = { 
    field: 'event_label', 
    width: '300', 
    pinned: true, 
    visible: true, 
    displayName: 'Adverse Event', 
    headerCellTemplate: headerTemplate, 
    cellTemplate: '<div class="ngCellText pull-left">{{row.getProperty(col.field) }}</div>' 
};