动态添加/删除列给了我一个水平滚动条

在以角度格式使用JqxGrid时,我创建了一个复选框,可以切换显示其他列。我认为这将是一件非常简单的事情,当网格应该占据所有可用空间时。

我注意到的问题是,切换状态以添加新行时,会出现一个滚动条。

我的代码库如下:

///Globals: 
//    dataColumns: []
//    dataAdapter: []
//    isToggled : boolean
//    dataFields: []

toggleFired(e){
    this.isToggled = e.target.checked;
    this.setColumns(this.columns);
    this.setDataAdapter();
}
setColumns(columns){
    let dColumns = []
    let dataFields = []
    if (this.isToggled){
        //The reason i clone columns is to not augment the original column array.  If i removed this, subsequent taps will mention datafield reuse errors.
        columns = columns.slice;
        let iconColumn = new DataColumn();
        iconColumn.width = "20px";
        /// other properties set.
        columns.unshift(iconColumn);
    }
    for( let col of columns){
      let dColumn = {
        width: col.width,
        text: col.text || "",
        cellsrenderer: null,
        cellClassName: "col",
        dataField: col.datafield
      };
      if (!dColumn.width) delete dColumn.width;
      dColumns.push(dColumn);
    }
    this.dataFields = dataFields;
    this.dataColumns = dColumns;
}
setDataAdapter(){
    //This aspect is primarily used for the data rows.  It sets localdata, datatype, and datafields. 
    //After creating that object, it will update the dataAdapter Obj passed into jqxGrid.
}

所以当我切换这个时,它会完全按照我的要求运行。它将创建这个新列。但是注射似乎不能正确调整其他项目的大小。滚动条的创建似乎与创建的新列直接相关。

注意:一些列可能有一定的宽度,但也有一些没有,这意味着要占用尽可能多的空间。

注意:在这个演示中,没有任何列具有定义的宽度,除了这个新的注入,它的宽度为“20px”

我在想,当重置datacolumns时,它会用undefined with重新绘制列,以尽可能地匹配。

我在jqxGrid中寻找其他函数,但没有一个函数跳出来找我,api也没有给出函数的详细信息,只是函数、属性等的列表。

标记:

<jqxGrid [source]="dataAdapter" [columns]="dataColumns" 
         [columnsresize]="true" 
         width="100%" height="100%"></jqxGrid>

供参考: https://www.jqwidgets.com/angular-components-documentation/documentation/jqxgrid/angular-grid-api.htm?search=grid

编辑 :我注意到,当我调整窗口或拆分器的大小时,网格会自动进行调整。这意味着一个事件正在被监听。我一直试图用类似的事件来模拟它: $(window).trigger("resize") 例如,但没有用。在我可以利用的地方,可能有一个潜在的功能。

截至目前,我已经尝试了以下几点: -这个。网格render() -这个。网格调整大小() -$(this.hostRef)。触发器(“调整大小”) -$(此为.grid)。触发器(“调整大小”) -$(this.grid.host)。触发器(“调整大小”) -$(窗口)。触发器(“调整大小”)

还是没什么。