Template style formatting in a single line when display layout is shrinked

[pooja kalegowda]

Hi,

I am working on Treegrid where in I have used a fixed template for one column in which I have placed 2 icons at the end, I notice the issue when the width of the column is less than the column text the icons will appear wrapped below, but I want it to be in straight line and the text should show some characters and after which it can show "...". But sometimes if the width is not mentioned then the text only shows "..." if it is too big for display.

PFB the screenshot and my template implementation, the icon '+' and menu button for child of PM019 is showing in the second line

My Template implementation:

<div class="control_wrapper">

    <ejs-treegrid [dataSource]='data' #treegrid [treeColumnIndex]='1' id="default"

        parentIdMapping='{{treeConfiguration.pidAttribute}}' idMapping='{{treeConfiguration.idAttribute}}'

        (dataBound)='onDataBound()'   [editSettings]='editSettings'  [allowFiltering]="true"  [toolbar]='toolbarOption' [allowSorting]="true" [filterSettings]="filterSettings" 

        (rowSelected)="rowselected($event)" (rowDataBound)='rowBound($event)'  (dataBound)="onTreeReady()"  [allowRowDragAndDrop]='true'>

        <e-columns>

<e-column field='ID' headerText='Node ID' width='100' isPrimaryKey='true' [visible]='false' ></e-column>

            <e-column field='Name' headerText='Name' width='300' >

                <ng-template #template let-data="">

                        <i class="{{ data['iconClass'] }}" id="icontooltip"

                            title="{{data[treeConfiguration.tooltiptext.icon]}}"></i>&nbsp;

                        <span class="treeName" id="nodetooltip"

                            title="{{data[treeConfiguration.tooltiptext.node]}}">{{data[treeConfiguration.displayAttribute]}}</span>

 <div class="nodeicon">

                        <span class="e-icons e-add" (click)="addItem(data)"></span>&nbsp;&nbsp;&nbsp;

                        <span class="e-icons e-menu" (click)="btnclick($event)"></span>

                    </div>

                </ng-template>

            </e-column>

         <e-column field='Description' headerText='Description' width="200"></e-column>

        </e-columns>

    </ejs-treegrid>

    <ejs-contextmenu #contentmenutree id='contentmenutree' target='#default' [items]="menuItems" (beforeOpen)='beforeopen($event)' (select)='menuclick($event)'>

    </ejs-contextmenu>

    

</div>

<style>

.nodeicon {

  display: none;

     float: right; 

     margin-left: 4px; 

}

::ng-deep .e-treegrid .e-rowcell:hover .nodeicon {

    display: block;

}

</style>

Kindly let me know how to resolve this.

Thanks in Advance.

Regards,

Pooja K

[Pon Selva Jeganathan]

Hi Pooja,   

  

Query:Template style formatting in a single line when display layout is shrinked 

 

From your query, we suggest that you to use the following code snippet for style formatting to display Template in a single line. 

 

   

<e-column field='taskName' headerText='Task Name' width='300'> 

        <ng-template #template let-data> 

            <span> 

                <span class="e-icons e-update" (click)="addItem(data)"></span>&nbsp;&nbsp;&nbsp; 

                <span>{{data.taskName}}</span> 

                &nbsp;&nbsp;&nbsp; 

                <span class="nodeicon"> 

                    <span class="e-icons e-add" (click)="addItem(data)"></span> 

                    &nbsp;&nbsp;&nbsp; 

                    <span class="e-icons e-cancel" (click)="btnclick($event)"></span> 

                </span> 

            </span> 

 

        </ng-template> 

    </e-column> 

 

 

Query 2: the text should show some characters and after which it can show "..." 

 

By default, in TreeGrid we have ClipMode support. To overcome this problem, we suggest you to use the clip mode property as “Ellipsis”. It displays ellipsis when the cell content overflows its area. Please refer to the below code snippet, 

 

<e-columns> 

        <e-column field='taskID' headerText='Task ID' width='100' textAlign='Right'></e-column> 

 

         

        <e-column field='taskName' clipMode='Ellipsis' headerText='Task Name' width="100"> </e-column> 

        <e-column field='duration' headerText='Duration'></e-column> 

 

…. 

     

 

Please refer to the below sample, 

https://stackblitz.com/edit/angular-9knzee-tg9wik?file=app.component.html 

 

Please refer to the below documentation, 

https://ej2.syncfusion.com/angular/documentation/treegrid/cell/#clip-mode 

 

Please refer to the below API documentation, 

https://ej2.syncfusion.com/documentation/api/treegrid/column/#clipmode 

 

Kindly get back to us for further assistance. 

 

Regards,    

Pon selva