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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

responsive columns

Thread ID:

Created:

Updated:

Platform:

Replies:

143989 Apr 12,2019 03:54 PM UTC Mar 2,2020 01:21 PM UTC Vue 6
loading
Tags: Data Grid
sundar sambandam
Asked On April 12, 2019 03:54 PM UTC

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 [Syncfusion]
Replied On April 15, 2019 10:26 AM UTC

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, 
 
We also suggest you to refer to the below documentation to know about setting responsive columns in Grid. 

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
Replied On April 18, 2019 09:44 AM UTC

Thank you .
That will do for me..

Dhivya Rajendran [Syncfusion]
Replied On April 19, 2019 12:20 PM UTC

Hi Sundar, 

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

Regards, 
R.Dhivya 


Gangabharathy Murugasen [Syncfusion]
Replied On April 22, 2019 04:12 AM UTC

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
Replied On February 27, 2020 12:17 PM UTC

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 [Syncfusion]
Replied On March 2, 2020 01:21 PM UTC

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


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