X-Overflow on column header and rows

[Ash Niazi]

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]

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> 

 

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

                               https://ej2.syncfusion.com/vue/documentation/grid/scrolling/ 

 

Demo                  : https://ej2.syncfusion.com/vue/demos/#/material/grid/default.html 

 

Please get back to us if you need any further assistance on this. 

 

Regards, 

Pavithra S.