Columns under the stacked Header seem to fail to respect autoResize/maxWidth

[Arvin Staff]

Hi,

I'm not sure which version introduces this issue. ButColumns under the stacked header (I.e.,  It can be done by setting the columns->columns property.) cannot respect autoFit/maxWidth.

Could you confirm this issue?

Regards,

Arvin

P.S.

autoFit: true,

headerTextAlign: "Left",

maxWidth: 200,

minWidth: 50,

textAlign: e.data.global.SF_ALIGN_RIGHT,

type: "number",

width: 50,

[Vinitha Balasubramanian]

Hi Customer,

Currently we are working your query and we will update further details on June 29, 2022.

until then we appreciate your patience.

Regards,

Vinitha Balasubramanian

[Nithya Sivaprakasam]

Hi Arvin,

Thanks for the patience.

Query:” Columns under the stacked Header seem to fail to respect autoResize/maxWidth”

Based on your query, we checked the sample with the stacked header feature at our end. It was working fine. Columns are set with respect to the min-width correctly when we resize the column. Kindly check the below code and screenshot for your reference.

#Sample code

App.vue

 

<template>

<div class="col-lg-12 control-section">

    <div>

        <ejs-grid :dataSource="data" :allowPaging='true' :allowResizing='true'>

            <e-columns>

                <e-column field='OrderID' headerText='Order ID' width='120' textAlign="Center" minWidth='10'></e-column>

                <e-column headerText='Order Details' :columns='orderColumns'></e-column>

                <e-column headerText='Ship Details' :columns='shipColumns'></e-column>

            </e-columns>

        </ejs-grid>

    </div>

 

 

</div>

</template>

<script lang="ts">

import Vue from 'vue';

import { GridPlugin, Page, Resize } from '@syncfusion/ej2-vue-grids';

import { orderDetails } from './data-source';

 

Vue.use(GridPlugin);

 

export default Vue.extend({

  data: () => {

      return {

        data: orderDetails,

        orderColumns: [

            {

                field: 'OrderDate',

                headerText: 'Order Date',

                format: 'yMd',

                width: 130,

                textAlign: 'Right',

                minWidth: 10

            },

            {

                field: 'Freight',

                headerText: 'Freight ($)',

                width: 120,

                format: 'C1',

                textAlign: 'Right',

                minWidth: 10

            }

        ],

        shipColumns: [

            {

                field: 'ShippedDate',

                headerText: 'Shipped Date',

                format: 'yMd',

                textAlign: 'Right',

                width: 150,

                minWidth: 10

            },

            {

               field: 'ShipCountry',

                headerText: 'Ship Country',

                width: 150,

                minWidth: 10

            }

        ]

        }

  },

  provide: {

      grid: [Page, Resize]

  }

})

</script>

#Screenshot

Please check the attached video demonstration for your reference.

If you still face any issues, kindly share the following details that will be very useful for us to validate further.

1. Kindly share the syncfusion package version.
2. Please share the video demonstration of the issue.

Regards,

Nithya Sivaprakasam.

Attachment: stackedHeader_44ede4ed.zip