There seems to be a problem with grid column resizing.

[TaeWook Kang]

hi, syncfusion teams.

i think,  There seems to be a problem with grid column resizing.

Let me explain the situation

1. There are two grids on a page composed of tabs.

2. Both grids have "allowResize='true'" applied.

3. Resize is applied to the first grid.

4. If you go to the second tab and check the grid, the resize does not work.

5. Go back to the first tab and try to manipulate the grid column. It doesn't work.

6. Strangely, "allowTextWrap = 'true'" is applied, so it resizes.

I think this is a bug.

I put the code below, so please check it.

And I have a question for you.

Column resize and Row also want to resize. can i do it??

Any help would be greatly appreciated.

thanks.

<div class="container-fluid">
    <div class="row" style="height:50px;">
        <div class="col-12">
            <label style="margin-right: 5px; font-size:14px; margin-bottom:0px;">REV NO.</label>
            <ejs-dropdownlist id="REV_NO" dataSource="RevData" placeholder="Select a Revision" popupHeight="220px" width="90px" change="revChange" index="int.Parse(RevNo)" actionComplete="actionComplete"></ejs-dropdownlist>
        </div>
    </div>


        <div class="row">
            <div class="col-12">
                <ejs-tab id="defaultTab" created="tabCreated" selecting="tabChange">
                    <e-tab-tabitems>
                        <e-tab-tabitem header="@ViewBag.headerTextZero" content="#Content0"></e-tab-tabitem>
                        <e-tab-tabitem header="@ViewBag.headerTextOne" content="#Content1"></e-tab-tabitem>
                    </e-tab-tabitems>
                </ejs-tab>
            </div>
        </div>
    </div>


<div id="Content0" style="display:none; height: auto; margin-top: 10px;">
    <ejs-grid id="GeneralGrid" gridLines="Both" rowHeight="30" height="700" frozenColumns="6" allowResizing="true" dataSource="bomList" allowTextWrap="true" >
        <e-grid-columns>
            <e-grid-column field="DESCRIPTION" headerText="DESCRIPTION" width="350" headerTextAlign="Center" textAlign="Left" disableHtmlEncode="false"></e-grid-column>
            <e-grid-column field="DETAIL" headerText="DETAIL DESCRIPTION" width="110" headerTextAlign="Center" textAlign="Right"></e-grid-column>


            <e-grid-column headerText="CAPACITY / DIMENSION" headerTextAlign="Center" textAlign="Center"
                               columns="@(new List<Syncfusion.EJ2.Grids.GridColumn>() {
                    new Syncfusion.EJ2.Grids.GridColumn { Field ="DIM_1"     , Width ="62" , Visible = true, HeaderText ="TITLE/DIM1",
                        DefaultValue ="" , HeaderTextAlign = Syncfusion.EJ2.Grids.TextAlign.Center, TextAlign = Syncfusion.EJ2.Grids.TextAlign.Right, ValidationRules = new { number=true }},
                    new Syncfusion.EJ2.Grids.GridColumn { Field ="DIM_2"     , Width ="68" , Visible = true, HeaderText ="VALUE/DIM2",
                        DefaultValue ="" , HeaderTextAlign = Syncfusion.EJ2.Grids.TextAlign.Center, TextAlign = Syncfusion.EJ2.Grids.TextAlign.Right, ValidationRules = new { number=true }},
                    new Syncfusion.EJ2.Grids.GridColumn { Field ="DIM_3"     , Width ="65" , Visible = true, HeaderText ="UNIT/DIM3" ,
                        DefaultValue ="" , HeaderTextAlign = Syncfusion.EJ2.Grids.TextAlign.Center, TextAlign = Syncfusion.EJ2.Grids.TextAlign.Right, ValidationRules = new { number=true }}})">
            </e-grid-column>
            <e-grid-column field="UNIT" headerText="UNIT" width="100" headerTextAlign="Center" textAlign="Center"></e-grid-column>


            @for (int i = 0; i < list.Count; i++)
            {
                <e-grid-column headerText="@list[i].BLDG_NO.ToString()" headerTextAlign="Center" textAlign="Center"
                                columns="@(new List<Syncfusion.EJ2.Grids.GridColumn>() {
                            new Syncfusion.EJ2.Grids.GridColumn { Field ="BLDG_COL_" + (i+1).ToString(), Width ="80" ,HeaderText = list[i].BLDG_NM.ToString() , DefaultValue ="" ,
                                HeaderTextAlign = Syncfusion.EJ2.Grids.TextAlign.Center, TextAlign = Syncfusion.EJ2.Grids.TextAlign.Right }})">
                </e-grid-column>
            }
            <e-grid-column field="TOTAL_QTY" headerText="TOTAL Q'TY" width="100" headerTextAlign="Center" textAlign="Center"></e-grid-column>
            <e-grid-column field="REMARK" headerText="REMARK" headerTextAlign="Center" textAlign="Center"></e-grid-column>
        </e-grid-columns>


    </ejs-grid>
</div>


<div id="Content1" style="display: none; height: auto; margin-top: 10px;">
    <ejs-grid id="HvacEqTree" height="700" frozenColumns="11" gridLines="Both" allowResizing="true" allowTextWrap="true" >
        <e-data-manager url="/BOM/EQUIP_URL?JobNo=@JobNo&RevNo=@RevNo" adaptor="UrlAdaptor"></e-data-manager>
        <e-grid-columns>
            <e-grid-column field="MAIN_NO" visible="false" isPrimaryKey="true" defaultValue="@empty"></e-grid-column>
            <e-grid-column headerText="SER. NO." headerTextAlign="Center" textAlign="Center"
                                columns="@(new List<Syncfusion.EJ2.Grids.GridColumn>() {
                new Syncfusion.EJ2.Grids.GridColumn { Field ="SNO"      , HeaderText ="MAIN", Width ="50",
                    DefaultValue ="", HeaderTextAlign = Syncfusion.EJ2.Grids.TextAlign.Center, TextAlign = Syncfusion.EJ2.Grids.TextAlign.Right},
                new Syncfusion.EJ2.Grids.GridColumn { Field ="SUB_NO"   , HeaderText ="SUB" , Width ="50",
                    DefaultValue ="", HeaderTextAlign = Syncfusion.EJ2.Grids.TextAlign.Center, TextAlign = Syncfusion.EJ2.Grids.TextAlign.Right}})">
            </e-grid-column>
            <e-grid-column field="SYSTEM" headerText="SYSTEM" width="103" defaultValue="@empty" headerTextAlign="Center" textAlign="Left"></e-grid-column>
            <e-grid-column field="DESCRIPTION" headerText="DESCRIPTION" width="120" defaultValue="@empty" headerTextAlign="Center" textAlign="Left"></e-grid-column>
            <e-grid-column field="TAG_NO" headerText="TAG NO." width="152" defaultValue="@empty" headerTextAlign="Center" textAlign="Left"></e-grid-column>
            <e-grid-column field="DETAIL" headerText="DETAIL DESCRIPTION" width="200" defaultValue="@empty" headerTextAlign="Center" textAlign="Left" disableHtmlEncode="false"></e-grid-column>
            <e-grid-column headerText="CAPACITY / DIMENSION" headerTextAlign="Center" textAlign="Center"
                                columns="@(new List<Syncfusion.EJ2.Grids.GridColumn>() {
                    new Syncfusion.EJ2.Grids.GridColumn { Field ="DIM_1"     , Width ="62" , Visible = true, HeaderText ="TITLE/DIM1",
                        DefaultValue ="" , HeaderTextAlign = Syncfusion.EJ2.Grids.TextAlign.Center, TextAlign = Syncfusion.EJ2.Grids.TextAlign.Right, ValidationRules = new { number=true }},
                    new Syncfusion.EJ2.Grids.GridColumn { Field ="DIM_2"     , Width ="68" , Visible = true, HeaderText ="VALUE/DIM2",
                        DefaultValue ="" , HeaderTextAlign = Syncfusion.EJ2.Grids.TextAlign.Center, TextAlign = Syncfusion.EJ2.Grids.TextAlign.Right, ValidationRules = new { number=true }},
                    new Syncfusion.EJ2.Grids.GridColumn { Field ="DIM_3"     , Width ="65" , Visible = true, HeaderText ="UNIT/DIM3" ,
                        DefaultValue ="" , HeaderTextAlign = Syncfusion.EJ2.Grids.TextAlign.Center, TextAlign = Syncfusion.EJ2.Grids.TextAlign.Right, ValidationRules = new { number=true }}})">
            </e-grid-column>


            <e-grid-column field="UNIT" headerText="UNIT" width="60" defaultValue="@empty" headerTextAlign="Center" textAlign="Center"></e-grid-column>


            @for (int i = 0; i < list.Count; i++)
             {
                <e-grid-column headerText="@list[i].BLDG_NO.ToString()" headerTextAlign="Center" textAlign="Center"
                                    columns="@(new List<Syncfusion.EJ2.Grids.GridColumn>() {
                            new Syncfusion.EJ2.Grids.GridColumn { Field = list[i].BLDG_NO.ToString(), Width ="80" ,HeaderText = list[i].BLDG_NM.ToString() , DefaultValue ="" ,
                                HeaderTextAlign = Syncfusion.EJ2.Grids.TextAlign.Center, TextAlign = Syncfusion.EJ2.Grids.TextAlign.Right }})">
                </e-grid-column>
             }
            <e-grid-column field="TOTAL_QTY" headerText="TOTAL Q'TY" width="80" defaultValue="@empty" headerTextAlign="Center" textAlign="Left"></e-grid-column>
            <e-grid-column field="REMARK" headerText="REMARK" width="100" defaultValue="@empty" headerTextAlign="Center" textAlign="Left"></e-grid-column>


        </e-grid-columns>
    </ejs-grid>
</div>

[Pavithra Subramaniyam]

Hi TaeWook,

Thanks for contacting Syncfusion support.

Query#1: i think,  There seems to be a problem with grid column resizing.

The reported issue occurs only while Grid has the frozen columns. You can overcome this by refreshing the Grid header while selecting the tab. Please refer to the below code example and API link for more information.

<ejs-tab id="ej2Tab" selected="tabSelected">

    .  .  .

</ejs-tab>

 

<script>

    function tabSelected(e) {

        var grid = e.selectedContent.querySelector('.e-grid').ej2_instances[0];

        if (grid) {

            grid.refreshHeader();

        }

    }

</script>

https://ej2.syncfusion.com/documentation/api/tab/#selected

https://ej2.syncfusion.com/documentation/api/grid/#refreshheader

Query#2: Column resize and Row also want to resize. can i do it??

We couldn’t resize the rows with the EJ2 Grid. However, you can dynamically change the row Height by using the “rowHeight” property. Please refer to the below demo link for more information.

https://ej2.syncfusion.com/aspnetcore/Grid/RowHeight#/fluent

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

Regards,

Pavithra S