UI-Grid：调整大小的列以溢出网格结束

Question

我有一个由多列组成的网格。我定义了columnDefs，包括宽度和最小宽度。另外我已禁用水平滚动条。

当向右调整列的大小时，它们“退出”网格，我可以通过滚动看到它们（虽然没有滚动）。如何强制列保持在网格边界？

• 这是常规视图：

• 向右调整大小并向右滚动后，您可以看到“名称”列不在边界（左侧）

  网格配置

          columnDefs: this.queueConfig.columns,
          rowHeight: 24,
          rowTemplate: rowtpl,
          enableHorizontalScrollbar: this.uiGridConstants.scrollbars.NEVER,
          enableColumnMenus: false,
          enableRowSelection: true,
          enableRowHeaderSelection: false,
          enableFiltering: true,
          modifierKeysToMultiSelect: true,
          multiSelect: true
  

列定义

• 这是一个返回网格的columnDefs的函数。

• 详细信息并不重要，只是注意到我们问题的宽度定义。

   private buildGridColumns(): any {
  
      const colMinWidth = "100";
      const columnsMap = {
          name: {
              name: this.$translate.instant('Name'),
              field: "documentName",
              minWidth: colMinWidth
          },
          step: {
              name: this.$translate.instant('Col_Step'),
              field: "status",
              width: "150",
              minWidth: colMinWidth,
              cellFilter: "printStatus"
          },
          submitted: {
              name: "Submitted",
              field: "createdTime",
              width: "150",
              minWidth: colMinWidth,
              cellFilter: "date: 'd/M/yy h:mm a'",
              sort: {
                  direction: this.uiGridConstants.DESC
              }
          },
          pagesNum: {
              name: this.$translate.instant('NumPages'),
              field: "numPages",
              width: "80",
              minWidth: colMinWidth,
              cellFilter: "foreignDocument: this"
          },
          quantity: {
              name: this.$translate.instant('Quantity'),
              field: "numCopies",
              width: "80",
              minWidth: colMinWidth,
              cellFilter: "foreignDocument: this"
          },
          progress: {
              name: "Progress",
              field: "PercentComplete",
              minWidth: colMinWidth,
              cellTemplate:
              "<kd-progress-bar ng-if='!row.entity.isForeign' percentage='row.entity.percentComplete'></kd-progress-bar>" +
              "<div ng-if='row.entity.isForeign' class='kd-progress-unavailable'>N/A</div>"
          },
          duration: {
              name: this.$translate.instant('Duration'),
              field: "estimatedTime",
              minWidth: colMinWidth,
              cellFilter: "foreignDocument: this"
          },
          status: {
              name: this.$translate.instant('Status'),
              field: "docState",
              minWidth: colMinWidth,
              cellFilter: "documentState"
          },
          press: {
              name: this.$translate.instant('Press'),
              field: "dfeName",
              minWidth: colMinWidth
          },
          created: {
              name: this.$translate.instant('Created'),
              field: "createdDtm",
              minWidth: colMinWidth,
              cellFilter: "date: 'd/M/yy h:mm a'",
              sort: {
                  direction: this.uiGridConstants.DESC
              }
          },
          time: {
              name: this.$translate.instant("Time"),
              field: "createdTime",
              minWidth: colMinWidth,
              cellFilter: "date: 'd/M/yy h:mm a'",
              width: "120",
              sort: {
                  direction: this.uiGridConstants.DESC
              }
          },
          failTime: {
              name: this.$translate.instant('FailureTime'),
              field: "lastUpdateTime",
              minWidth: colMinWidth,
              cellFilter: "date: 'd/M/yy h:mm a'",
              width: "120",
              sort: {
                  direction: this.uiGridConstants.DESC
              }
          },
          completeTime: {
              name: this.$translate.instant('CompletionTime'),
              field: "lastUpdateTime",
              minWidth: colMinWidth,
              cellFilter: "date: 'short'",
              width: "120",
              sort: {
                  direction: this.uiGridConstants.DESC
              }
          }
      };
  
      return columnsMap;
  }