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

[Pop Alex]

The problem is that it doesn't recognize the maxWidth.

I have this code:

<ejs-grid :ref='"grid_" + stage.id' :id='"gridId" + stage.id' :dataSource="stage.tasks" :allowSorting='true' v-if="stage.tasks.length">

<e-columns>

     <e-column :headerText="__('general.task')" :template='taskTemplate' field='name' width=100% minWidth=300px clipMode='EllipsisWithTooltip'></e-column>

     <e-column :headerText="__('general.responsible')" field='responsible' width=150px minWidth=150px maxWidth=150px></e-column>

     <e-column :headerText="__('general.deadline')" field='deadline' :template='deadlineTemplate' width=130px minWidth=130px maxWidth=130px></e-column>

     <e-column :headerText="__('general.actions')" :template='buttonsTemplate' width=190px minWidth=190px maxWidth="190px" textAlign="Right"></e-column>

</e-columns>

</ejs-grid>

Attached you find a picture with the result ... and what I would like to be

Attachment: grid_syncfusion_65a1cfeb.zip

[Dhivya Rajendran]

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. 

<ejs-grid id="Grid" ref="grid" :dataSource="data"> 

      <e-columns> 

        <e-column field="OrderID" headerText="Order ID"></e-column> 

        <e-column field="CustomerID" headerText="Customer ID" width="150"></e-column> 

        <e-column field="ShipCity" headerText="Ship City" width="130"></e-column> 

        <e-column field="ShipName" headerText="Ship Name" width="190"></e-column> 

      </e-columns> 

    </ejs-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]

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

[Dhivya Rajendran]

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