How can I make 1 column with width auto and the rest be with maxWidth?

Question

The problem is that it doesn't recognize the maxWidth.I have this code:

Attached you find a picture with the result ... and what I would like to beAttachment: grid_syncfusion_65a1cfeb.zip

Dhivya Rajendran · Answer

Hi Pop, Greeting from Syncfusion support. Query: The problem is that it doesn't recognize the maxWidth. By default, maxWidth property is used to restrict the column resizing(only when enable resize feature) width in Grid. Please refer the below documentation for more information. Documentation: https://ej2.syncfusion.com/vue/documentation/grid/columns/?no-cache=1#min-and-max-width As per the provided information, we suspect that you want to apply width for 3 column and one column will be auto so we suggest you to use the below way to achieve your requirement. Here, we have apply width for the column and for OrderID we did not specify the width so it will fill the remaining spaces(other than 3 columns) of Grid.

Sample : https://codesandbox.io/s/151398-single-click-change-c2cw2 Please get back to us if you need further assistance on this. Regards, R.Dhivya

Pop Alex · Answer

If I do so, in responsive the OrderId column is no longer visible. i want the column to have a minWidth too

Dhivya Rajendran · Answer

Hi Pop, 

Thanks for your update. 

As per your requirement, we have created a sample. In the below sample, we have bind window resize event and based on the condition(static width 130+150+190+80(min width)= 550) we have applied width for the OrderID column(auto). Please refer the below code example and sample for more information. 





created() { 
  window.addEventListener("resize", args => { 
    if (args.target.innerWidth < 550) { 
      if (minum && this.$refs.grid) { 
        this.$refs.grid.ej2Instances.getColumns()[0].width = "80"; // you can apply width based on your requirement for that (width)auto column 
        this.$refs.grid.ej2Instances.refreshColumns(); 
        minum = false; max= true;  
      } 
    } else { 
      if (max && this.$refs.grid) { 
        this.$refs.grid.ej2Instances.getColumns()[0].width = undefined; 
        this.$refs.grid.ej2Instances.refreshColumns(); 
        max = false; minum = true; 
      } 
    } 
  }); 
} 


Sample : https://codesandbox.io/s/151398-single-click-change-nnl4z 

Regards, 
R.Dhivya