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. Image for the cookie policy date

X-Overflow on column header and rows

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

1 Reply

PS Pavithra Subramaniyam Syncfusion Team 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. 


Loader.
Live Chat Icon For mobile
Up arrow icon