I have igGrid that needs to get refreshed with data based upon a value that is selected in a combo box.  The combo box takes the value and sends it to the database to retrieve the data. Sometimes that data coming back is 10 columns and some times it is 5 columns.  However the first two columns are always the same so I would like to set their width so it would be constant.  My problem is two fold, if I set the width like

  columns: [
                  { headerText: "DISEASE SITE", key: "DISEASE_SITE", dataType: "string", width: "200" },
                  { headerText: "DESCRIPTION", key: "DESCRIPTION", dataType: "string", width: "200" }                
                    ],

then the other columns do not show up.  The other columns should be able to take whatever space is available and share it. Can I remove the columns property and set it after the grid has rendered?

Also (without setting the width) if I display the data that has the 10 columns first and then display the 5 column then the other 5 columns show up blank but still have a header. 

I used   $('#grid').igGrid('destroy'); to solve that issue but the entire div jumps around when it is destroyed and then pops back when the data is added.  Is there a cleaner way to repopulate a grid and have it redraw?  I've read a bunch of threads on this issue but most were from 2012 and I was hoping that a cleaner solution has been discovered.

Thanks