Динамическое добавление / удаление столбцов дает мне горизонтальную полосу прокрутки

Question

При работе с JqxGrid в формате Angular я создавал флажок, который переключал бы появление дополнительных столбцов. Я подумал, что это будет довольно просто, когда предполагается, что Grid займет все доступное пространство.

Проблема, которую я заметил, заключается в том, что при переключении состояния для добавления новых строк появляется полоса прокрутки.

Моя кодовая база выглядит следующим образом:

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

Поэтому, когда я переключаю это, он будет делать именно то, что нужно. Это создаст этот новый столбец. но похоже, что инъекция неправильно изменяет размер других элементов. Полоса прокрутки выглядит так, как будто ее создание напрямую связано с созданным новым столбцом.

Примечание: несколько столбцов могут иметь некоторую ширину, но есть некоторые, которые не имеют, которые должны занимать как можно больше места.

Примечание. В этой демонстрации ни одна колонка не имеет определенной ширины, за исключением этой новой инъекции, которая имеет ширину "20 пикселей".

Я думал, что при сбросе столбцов данных он будет перерисовывать столбцы с неопределенным с, чтобы соответствовать как можно больше.

Я искал другие функции внутри 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") например, но безрезультатно. Там, где я могу использовать, может быть основная функция.

На данный момент я попытался сделать следующее: - this.grid.render() - this.grid.resize() - $(this.hostRef).trigger("resize") - $(this.grid).trigger("resize") - $(this.grid.host).trigger("resize") - $(window).trigger("resize")

еще ничего.