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

X-Overflow on column header and rows

Thread ID:

Created:

Updated:

Platform:

Replies:

146724 Aug 15,2019 08:11 PM UTC Aug 19,2019 12:20 PM UTC Vue 1
loading
Tags: Data Grid
Ash Niazi
Asked On August 15, 2019 08:11 PM UTC

Hi,

What is the best way to ensure there is horizontal overflow occuring on smaller displays? Currently on the mobile breakpoint, the data grid table doesn't allow the user to slide left or right to see the grid, but instead it compressed everything on each row with loss of readability:



Thank you

Pavithra Subramaniyam [Syncfusion]
Replied On August 19, 2019 12:20 PM UTC

Hi Ash Niazi, 
 
Greetings from Syncfusion support. 
 
By default, horizontal scrollbar will be rendered in EJ2 Grid when the total column width is greater than the Grid width. So we suggest you to set a static width to the Grid columns or auto fit the columns inside the dataBound event to achieve your requirement. Please refer to the below code example, documentation link and demo link for more information. 
 
[App.Vue] 
<template> 
<div class="col-lg-12 control-section"> 
    <div> 
        <ejs-grid :dataSource="data" :dataBound='dataBound'> 
            <e-columns> 
                <e-column field='OrderID' headerText='Order ID' width='120' textAlign='Right'></e-column> 
                <e-column field='CustomerName' headerText='Customer Name' width='150'></e-column> 
                <e-column field='OrderDate' headerText='Order Date' width='130' format="yMd" textAlign='Right'></e-column> 
                <e-column field='Freight' headerText='Freight' width='120' format='C2' textAlign='Right'></e-column> 
                <e-column field='ShippedDate' headerText='Shipped Date' width='130' format="yMd" textAlign='Right'></e-column> 
                <e-column field='ShipCountry' headerText='Ship Country' width='150'></e-column> 
            </e-columns> 
        </ejs-grid> 
    </div> 
 
 
</div> 
</template> 
<script lang="ts"> 
import Vue from "vue"; 
import { GridPlugin , Resize } from "@syncfusion/ej2-vue-grids"; 
import { orderDetails } from "./data-source"; 
 
Vue.use(GridPlugin); 
 
export default Vue.extend({ 
  data: () => { 
    return { 
      data: orderDetails.slice(0, 12) 
    }; 
  }, 
methods: { 
    dataBound: function() { 
// or you can autofit the Grid columns as below 
this.$refs.grid.ej2Instances.autoFitColumns([]); 
    } 
}, 
  provide: { 
      grid: [Resize] 
  } 
 
}); 
</script> 
 
                               https://ej2.syncfusion.com/vue/documentation/grid/scrolling/ 
 
 
Please get back to us if you need any further assistance on this. 
 
Regards, 
Pavithra S. 


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