Width Not Set When Defining Columns

Question

Hi Syncfusion,I define columns programatically like this:https://www.screencast.com/t/uYGSHUbbkand setting columns properties like this:https://www.screencast.com/t/agWpBJTwEverything works here except width. So headerText works, columns template works but width is stretched to the lenght of the longest cell. I do not use autoFitColumns. I can see in the code that widht is not added:https://www.screencast.com/t/jQtza7q21UdWhy is width not applied to the grid?Thanks,Marius

Balaji Sekar · Answer

Hi Marius, 
 
Greetings from syncfusion support. 
 
Query#: Why is width not applied to the grid? 
 
Based on your query we have prepared a sample and we suggest you to follow the below way to achieve your requirement. Please refer the below code example and sample for more information. 
 





 
var pvt = { 
    key: true 
  } 
export default { 
  data() { 
    return { 
      data: data, 
      grid: "", 
      toolbar: ["Add", "Delete", "Update", "Cancel"], 
      flag: true, 
      pageOption: { 
        pageSize: 12 
      }, 
      editSettings: { 
        allowEditing: true, 
        allowAdding: true, 
        allowDeleting: true, 
        mode: "Batch" 
      } 
    }; 
  }, 
  methods: { 
    dataBound: function(args) { 
      var obj = {field: "ShipCountry", headerText: "Ship Country", width: "300"};    
      this.$refs.grid.ej2Instances.columns.push(obj); 
      if(pvt.key) {            // you need to push this new column to the grid’s columns property and call the refreshColumns method to achieve your requirement 
        pvt.key = false;     //It helps to prevent the recursive call 
        this.$refs.grid.ej2Instances.refreshColumns(); 
      } 
       
 
    }, 
  provide: { 
    grid: [Edit, Toolbar, Page] 
  } 
}; 
  
 
Sample: https://codesandbox.io/s/146774-dynamic-grid-modified-vycrq 
 
Regards, 
Balaji Sekar.

Marius Lian · Answer

Ok, thank!

Dhivya Rajendran · Answer

Hi Marius, 

Thanks for your update. Please get back to us if you need further assistance from us. 

Regards, 
R.Dhivya