responsive columns

[sundar sambandam]

Hi there,

I am trying to create a syncfusion grid in vuejs application.

Grid columns are not automatically responsive.In small monitors i am getting horizontal bars

Even if there is no data in the grid I am getting horizontal bars.

I am attaching a video for your reference. 

Am I missing any CSS or I missing some settings 

Could you please guide me to rectify it?

Thanks

Sundar

Attachment: Search__Work_Allocation_(1)_919d5408.7z

[Thavasianand Sankaranarayanan]

Hi Sundar, 

Greetings from Syncfusion support. 

We would like to inform you that, by default EJ2 Grid is responsive. If the combined width provided for the Grid column exceeds the viewport, then by default a horizontal scrollbar will be rendered to show the exceeding columns. This is the default responsive behavior of EJ2 Grid. Even in a Grid with empty data, the columns will still be present in Grid, so to show the columns with that certain width the scroll bar will be shown. 

If you want to auto fit the columns based on content size then we suggest you to refer to the below documentation, 

Documentation : https://ej2.syncfusion.com/vue/documentation/grid/columns/#autofit-specific-columns 

 

We also suggest you to refer to the below documentation to know about setting responsive columns in Grid. 

Documentation : https://ej2.syncfusion.com/vue/documentation/grid/columns/#responsive-columns 

If you still face any difficulties, please get back to us with the following details, 

1. Share the full Grid code.
2. Share with us your complete requirement.

Please get back to us if you need further assistance. 

Regards, 

Thavasianand S. 

[sundar sambandam]

Thank you .

That will do for me..

[Dhivya Rajendran]

Hi Sundar, 

Thanks for the update. Please get back to us if you need further assistance on this. 

Regards, 

R.Dhivya 

[Gangabharathy Murugasen]

Hi there, 

 

Sorry, it is worked in small screen 1152 X 864 resolution but in better resolution I am able see blank space after my grid. 

How to make the grid columns to fill the parent div properly. That is columns equally fill the entire parent div. 

 

I have done the  following code as mentioned  documentation in AutoFit specific columns 

 

     dataBound: function() {

        this.$refs.grid.autoFitColumns(['OrderDate', 'CustomerID']); 

    } 

 

Higher resolution screen shot. 

 

 

 

 

Lower resolution screen shot 

 

 

 

 

Thanks 

Sundar  

[Joseph]

I am having a similar issue where is blank space after the grid when allowing databound to receive autoFitColumns, is there a way to allow the grid columns to auto fit to the full width of the grid?

An image demonstrating this:

I am aware I can not use autoFitColumns when the column size is so small, then it shall have the intended effect. Is there a way to do this without having to check if the table will overflow? (a Syncfusion specific solution)

Many thanks,
Joseph

[Balaji Sekar]

Hi Sundar, 

Grid autoFitColumns method is used to adjust width of the column based on the content width. If the Grid width is exceed the content width then Grid will display as blank for the remaining space. This is the default behavior of the autoFitColumns feature. If you want to remove this white space, you need to provide the content table width to Grid like as following code snippet, 

[App.Vue] 

 

    dataBound: function() { 

      let gridInstance = this.$refs.grid.ej2Instances; 

      gridInstance.autoFitColumns(["CustomerID"]); 

      gridInstance.width = gridInstance.getContentTable().offsetWidth; // Set Grid content width to Grid width  

    } 

 

 

Sample link: https://codesandbox.io/s/infallible-ramanujan-wqnyc 

 

Regards, 

Balaji Sekar.