We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Width Not Set When Defining Columns

Thread ID:

Created:

Updated:

Platform:

Replies:

150590 Jan 13,2020 05:12 AM UTC Jan 15,2020 10:55 AM UTC Vue 3
loading
Tags: Data Grid
Marius Lian
Asked On January 13, 2020 05:12 AM UTC

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 [Syncfusion]
Replied On January 13, 2020 11:57 AM UTC

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] 
  } 
}; 
 
 
 
 
Regards, 
Balaji Sekar. 


Marius Lian
Replied On January 14, 2020 04:35 AM UTC

Ok, thank!

Dhivya Rajendran [Syncfusion]
Replied On January 15, 2020 10:55 AM UTC

Hi Marius, 

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

Regards, 
R.Dhivya  


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon