Dynamicly adding/removing columns is giving me a Horizontal Scrollbar

Question

When working with JqxGrid in an Angular format, I was creating a checkbox which would toggle additional column(s) to appear. I thought this would be a pretty simple thing, when the Grid is suppose to take up all available space.

The issue I have noticed is that toggling the state to add new rows, a scrollbar will appear.

My codebase is as follows:

///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.
}

So when i toggle this, it will do exactly what is desired. It will create this new column. but it seems that the injection doesnt resize the other items correctly. The scrollbar looks like its creation is directly related to the new column created.

Note: A few columsn may have some width, but there are a few which do not, which are meant to take up as much space as possible.

Note: In this demo, no columns have a defined width, with the exception of this new injection, which has a width of "20px"

I was thinking that when resetting the datacolumns, it would redraw the columns with undefined with to fit as much as possible.

I was looking for other functions inside the jqxGrid, but none were jumping out at me and the api didnt give details on the functions, just a list of functions, properties, etc.

Markup:

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

For Reference: https://www.jqwidgets.com/angular-components-documentation/documentation/jqxgrid/angular-grid-api.htm?search=grid

Edit: I noticed that when I resize the window or a splitter, the grid automatically adjusts itself. That means an event is being listened to. I have been trying to simulate it with similar events: $(window).trigger("resize") for example but to no avail. There may be an underlying function somewhere I can leverage.

As of right now, i have attempted the following: - this.grid.render() - this.grid.resize() - $(this.hostRef).trigger("resize") - $(this.grid).trigger("resize") - $(this.grid.host).trigger("resize") - $(window).trigger("resize")

still nothing.