AutoFit columns not working with templates

[Charles Eichelberger]

Hello,

We are using grids with column templates. While calling autofitcolumns does get the columns to resize, it cuts off some of the test. I was wondering if this is a limitation when using templates or is it suppose to work? Below is an example of what occurs.

thanks,

Charles Eichelberger

[Rajapandi Ravi]

Hi Charles, 

Based on your query we have prepared a sample with column template and tried to reproduce your reported problem, but it was unsuccessful. Please refer the below code example and sample for more information. 

 

<e-column field="Raci" headerText="RACI" width="150"> 

        <ng-template #template let-data> 

          <div class="image"> 

            <button>button</button><button>button</button><button>button</button 

            ><button>button</button><button>button</button> 

          </div> 

        </ng-template></e-column 

      > 

 

Sample: https://stackblitz.com/edit/angular-mcupqb-yzq1bc?file=app.component.html 

If you still face the issue, please share the below details that will be helpful for us to provide better solution 

1)         Please share your syncfusion package version. 

2)         Please share your complete Grid rendering code. 

3)         Share the issue replication procedure step by step. 

4)         Share the issue scenario in video demonstration format. 

5)         If possible, please share any issue reproducing sample or try to reproduce your problem with our above attached sample, that will be helpful for us to validate the problem.         

Regards, 

Rajapandi R 

[Charles Eichelberger]

Hi,

I have modified the example given and the issues now exists there. The first template column auto fits, but the second one does not

https://stackblitz.com/edit/angular-mcupqb-ymqsqd?file=app.component.html

[Rajapandi Ravi]

Hi Charles,

We have checked your shared sample and we found that you are using same field name for template columns. By default, all the Grid actions are performed based on the column field name.  So, the column field must be unique. Otherwise, all the actions will be affected only which is defined first in the column definition of duplicate columns.  So, we suggest you avoid the duplicate columns in the EJ2 Grid.

We have modified your shared sample and now it was working fine. Please refer to the below sample for more information

 

<ejs-grid

    #grid

    [dataSource]="data"

    height="350"

    (dataBound)="dataBound($event)"

  >

    <e-columns>

      <e-column

        field="OrderID"

        headerText="Order ID"

        width="120"

        textAlign="Right"

      ></e-column>

      <e-column field="Raci" headerText="RACI" width="150">

        <ng-template #template let-data>

          <div class="image">

            <button>button</button><button>button</button><button>button</button

            ><button>button</button><button>button</button>

          </div>

        </ng-template></e-column

      ><e-column field="Racitwo" headerText="RACI 2" width="150">

        <ng-template #template let-data>

          <div class="image">

            <button>button</button><button>button</button><button>button</button

            ><button>button</button><button>button</button>

          </div>

        </ng-template></e-column

      ><e-column field="Racithree" headerText="RACI 3" width="150">

        <ng-template #template let-data>

          <div class="image">

            <button>button</button><button>button</button><button>button</button

            ><button>button</button><button>button</button>

          </div>

        </ng-template></e-column

      ><e-column field="Racifour" headerText="RACI 4" width="150">

        <ng-template #template let-data>

          <div class="image">

            <button>button</button><button>button</button><button>button</button

            ><button>button</button><button>button</button>

          </div>

        </ng-template></e-column

      ><e-column field="Racifive" headerText="RACI 5">

        <ng-template #template let-data>

          <div class="image">

            <button>button</button><button>button</button><button>button</button

            ><button>button</button><button>button</button>

          </div>

        </ng-template></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-column field="ShipName" width="150"></e-column>

      <e-column field="CustomerName" width="150"></e-column>

      <e-column field="ShipRegion" width="150"></e-column>

      <e-column field="ShipAddress" width="150"></e-column>

    </e-columns>

  </ejs-grid>

 

Sample: https://stackblitz.com/edit/angular-mcupqb-psredp?file=app.component.html

Screenshot:

Regards,

Rajapandi R

[Charles Eichelberger]

HI,

The issue is when using inputs the input will not be wide enough for everything. Attached is an example.

https://stackblitz.com/edit/angular-mcupqb-y5cxfk?file=app.component.html

Thanks,

Charles

[Rajapandi Ravi]

Hi Charles,

In your query you have mentioned that “the input will not be wide enough for everything”, We need more information for our clarification. Please share the below details that will be helpful for us to provide better solution.

1)              Please share the video demonstration about the problem of “the input will not be wide enough for everything”.

Regards,

Rajapandi R

[Charles Eichelberger]

Hi,

In the demo the input column has some values that get cut off. Bellow is an image of the issue.

[Rajapandi Ravi]

Hi Charles,

Thanks for the update.

Currently, we are validating your query with your shared information, and we will update you the details on or before 5^th May 2022. Until then we appreciate your patience.

Regards,

Rajapandi R

[Rajapandi Ravi]

Hi Charles,

Thanks for the update.

In your query you have mentioned that “input column has some values that get cut off”. By default, if we contain large text in the input element, it will automatically cutoff. It was the default behavior of Html input element. Please refer the below simple HTML sample for more information.

HTML sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/htmlsample-725951059.zip

To overcome the problem, we suggest you use the TextArea instead of input element. Please refer the below code example and sample for more information.

 

<e-column field="Raci" headerText="RACI">

        <ng-template #template let-data>

          <textarea

          name="message"

          rows="2"

          [(ngModel)]="data.ShipAddress"

          #message='ngModel'

          ></textarea>

        </ng-template></e-column>

 

Sample: https://stackblitz.com/edit/angular-mcupqb-aztq54?file=app.component.html

Regards,

Rajapandi R