Width Not Set When Defining Columns

[Marius Lian]

Hi Syncfusion,

I define columns programatically like this:

https://www.screencast.com/t/uYGSHUbbk

and setting columns properties like this:

https://www.screencast.com/t/agWpBJTw

Everything 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/jQtza7q21Ud

Why is width not applied to the grid?

Thanks,

Marius

[Balaji Sekar]

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]

Ok, thank!

[Dhivya Rajendran]

Hi Marius, 

Thanks for your update. Please get back to us if you need further assistance from us. 

Regards, 

R.Dhivya