Dynamic column width not getting set

[JUNZHONG]

We are creating dynamic columns for the grid based on user selection.
The problem is with the width of the dynamic columns. It is not getting set and all the dynamic columns are appended to the right side , width being very small. Please help.
grid configurations -
width: "auto",
 scrollModel: {
                    autoFit: true
                },

This is the code which adds the columns to the grid.
var j = 2;//number of static field on grid
for (var i = 0, len = data.length; i < len; i++) {
  var rowData = data;
          
   colM.push( { title: rowData["DisplayName"] + "    "+"<input type='checkbox' class='showHideInsColumn'    id='"+j+"' /> ", dataType: "float", minWidth: '30%', maxWidth:'50%', align: "center",colModel: [
                                    { title: "Data", align: "center", dataIndx: rowData["DisplayName"], dataType: "string" },
                                    { title: "EIN", align: "center", dataIndx: rowData["DisplayName"]+'_EIN', dataType: "string", hidden:true },
                                    { title: "Who", align: "center", dataIndx: rowData["DisplayName"]+'_Who', dataType: "string", hidden:true },
                                   { title: "Date", align: "center", dataIndx: rowData["DisplayName"]+'_Date', dataType: "string", hidden:true }
                                  ]
                       } );
            j=j+1;
       }

[paramvir]

Please set minWidth for visible columns in last level of hierarchy.

Code: [Select]

{ title: "Data", align: "center", dataIndx: rowData["DisplayName"], dataType: "string", minWidth: '30%', maxWidth:'50%' }