1. Home
  2. Forum
  3. Vue
  4. Grid column width not working on page refresh

Grid column width not working on page refresh

Hi there,

I have a grid defined with a width of 100% and width or maxWidth directives on the e-column entries to enable horizontal scrolling. When I drag the window wider or narrower it all works as expected. The problem is that when I refresh the browser page, the widths aren't applied. Once I drag the window wider or narrower again, it corrects and displays the columns properly. Is there a way to force the grid to size the columns correctly after the refresh? Here's my code for the grid. I use a custom DataManager but that shouldn't impact anything here.

<template>
  <div>
    <ejs-grid id="MemberGrid" ref="grid" width="100%" :dataSource="dataSource" :allowPaging="true" :allowSorting="true" :allowSearch="true" :pageSettings="pageSettings" :searchSettings="searchSettings" :toolbar="toolbar"
      :dataBound="dataBound" :rowSelected="onRowSelected">
      <e-columns>
        <e-column field="lastName" headerText="LAST NAME" :customAttributes="{ class: 'priority-column' }" minWidth="150"></e-column>
        <e-column field="firstName" headerText="FIRST NAME" :customAttributes="{ class: 'priority-column' }" minWidth="150"></e-column>
        <e-column field="memberNo" headerText="VIP MEMBER ID" minWidth="150"></e-column>
        <e-column field="region" headerText="REGION" minWidth="150"></e-column>
        <e-column field="paid" headerText="PAID" width="80"></e-column>
        <e-column field="membershipTier" headerText="MEMBERSHIP TIER" minWidth="190"></e-column>
        <e-column field="status" headerText="STATUS" width="110"></e-column>
        <e-column field="email" headerText="EMAIL" :template="emailTemplate" minWidth="200"></e-column>
      </e-columns>
    </ejs-grid>
  </div>
</template>

<script>
import Vue from 'vue';
import { Page, Sort, Toolbar, Resize } from '@syncfusion/ej2-vue-grids';
import DataManager from '@/util/dataManager';

export default {
  name: 'Members',
  provide: {
    grid: [Page, Sort, Toolbar, Resize]
  },
  data: () => {
    return {
      toolbar: ['Search'],
      pageSettings: { pageSize: 10, pageSizes: true },
      searchSettings: { fields: ['lastName', 'firstName', 'memberNo', 'membershipTier', 'email'] },
      emailTemplate: function() {
        return { 
          template: Vue.component('emailTemplate', {
            template: `<a class="text-secondary font-bold" :rel='nofollow' href="'mailto:' + data.email">{{ data.email }}</a>`
          })
        }
      },
    }
  },
  computed: {
    dataSource() {
      return DataManager.create('members/indexdatatable', this);
    }
  },
  methods: {
    dataBound: function() {
      this.$refs.grid.autoFitColumns(['paid', 'status', 'memberNo']);
    },
  }
};
</script>

Thanks,
Jason

6 Replies 1 reply marked as answer
RS Rajapandiyan Settu Syncfusion Team February 23, 2021 01:31 PM UTC

Hi Jason, 
 
Currently, we are validating the reported behavior with the current Grid architecture. So, we will update the further details on Feb 25th, 2021. 
 
Until then, we appreciated your patience. 

Regards, 
Rajapandiyan S 


RS Rajapandiyan Settu Syncfusion Team February 25, 2021 12:33 PM UTC

Hi Jason, 

We greatly appreciated your patience.  

Query: I have a grid defined with a width of 100% and width or maxWidth directives on the e-column entries to enable horizontal scrolling. When I drag the window wider or narrower it all works as expected. The problem is that when I refresh the browser page, the widths aren't applied. Once I drag the window wider or narrower again, it corrects and displays the columns properly. Is there a way to force the grid to size the columns correctly after the refresh? 

You can resolve the reported behavior by using following code example in the dataBound event of Grid. 


[APP.Vue] 

 
    dataBound: function () { 
      var tgridWidth = this.$refs.grid.ej2Instances.widthService.getTableWidth(this.$refs.grid.getColumns()); 
      this.$refs.grid.ej2Instances.widthService.setMinwidthBycalculation(tgridWidth); 
    } 
 

Find the below sample for your reference. 


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

Regards, 
Rajapandiyan S 


Marked as answer
JA Jason February 25, 2021 08:30 PM UTC

Great, thanks, that works like a charm! I had implemented my own workaround:

dataBound: function() {
  window.dispatchEvent(new Event('resize'));  // Workaround for column width issue on small screens
},

But I'll implement yours throughout now.

Jason

RS Rajapandiyan Settu Syncfusion Team February 26, 2021 04:02 AM UTC

Hi Jason, 

We are glad that you have resolved your requirement with the provided solution. 

Regards, 
Rajapandiyan S 


PO Pooja_Patra February 13, 2023 05:21 PM UTC

Can you please share the solution using React js?



RS Rajapandiyan Settu Syncfusion Team February 15, 2023 02:42 PM UTC

Hi Pooja,


Thanks for contacting Syncfusion support.


As you have requested, we have prepared the sample in React JS.

Sample: https://stackblitz.com/edit/react-eebegg?file=index.js


Regards,

Rajapandiyan S


Loader.
Up arrow icon