AllowTextWrap in dropdownlist

[Toan Bui]

Hi, I want to warp dropdownlist in dropdownedit datagrid. Can you help me?

[Sujith Kumar Rajkumar]

Hi Toan, 

 

Greetings from Syncfusion support. 

 

We are not able to clearly understand your requirement from the provided information. Do you wish to customize the properties of the default edit dropdown in the Grid? If so, you can achieve it by using the cell edit params property of the column which allows to customize the behavior of the edit component. 

 

We have demonstrated this case in the below code snippet and sample prepared for your reference where, the clear button is enabled for the dropdown edit column, 

 

app.component.html 

<ejs-grid [dataSource]='data' ...> 

    <e-columns> 

        <e-column field='ShipCountry' editType='dropdownedit' [edit]='editparams'></e-column> 

    </e-columns> 

</ejs-grid> 

 

app.component.ts 

public ngOnInit(): void { 

    this.editparams = { params: { showClearButton: true } }; 

} 

 

Sample: https://stackblitz.com/edit/angular-slphlz?file=app.component.ts 

 

More details on cell edit params and the EJ2 dropdown component can be checked in the below documentation links, 

 

Documentation: https://ej2.syncfusion.com/angular/documentation/grid/edit/#cell-edit-type-and-its-params 

                               https://ej2.syncfusion.com/angular/documentation/drop-down-list/getting-started/ 

 

If this is not your requirement, then please elaborate on it in order to understand it better.  

 

Regards, 

Sujith R 

[Toan Bui]

Thanks for your answer. However, I need to custom my dropdown elements in the datagrid because they are too long. I want to break line it so users can see all information

The picture below is an example: the text can't be displayed at all

[Sujith Kumar Rajkumar]

Hi Toan, 

 

Since your requirement is to display the entire dropdown text values in place of the ellipsis, we suggest you to achieve the same by increasing the popup width with the popupWidth property using the cell edit params. 

 

This is demonstrated in the below code snippet, 

 

this.editparams = { params: { popupWidth: 200 } }; 

 

Please find the modified sample for your reference below, 

 

Sample: https://stackblitz.com/edit/angular-slphlz-s6feje?file=app.component.ts 

 

API link: https://ej2.syncfusion.com/angular/documentation/api/drop-down-list/#popupwidth 

 

If we misunderstood your query or if you require any further assistance with this, then please get back to us. 

 

Regards, 

Sujith R 

[Toan Bui]

my data is too long to display on the screen. Can I down the line of them?

[Sujith Kumar Rajkumar]

Hi Toan, 

 

For displaying long data in the dropdownlist item, we suggest you to use the EJ2 Tooltip component to display the item text on hovering the dropdown. This can be achieved by initializing the EJ2 Tooltip component by setting its target property value(target element where the tooltip needs to be displayed) as ‘e-list-item’(denotes the dropdown item element’s class) and append it to the body element. Now in the tooltip’s beforeRender event, the current target element’s inner text(list item text in this case) is set as the tooltip’s content property. 

 

This is demonstrated in the below code snippet, 

 

import { Tooltip, TooltipEventArgs } from '@syncfusion/ej2-popups'; 

 

ngAfterViewInit(){ 

    //Initialize Tooltip component 

    this.tooltip = new Tooltip({ 

        // set target element to tooltip 

        target: '.e-list-item', 

        // set position of tooltip 

        position: "TopCenter", 

        // Triggers before the tooltip is rendered 

        beforeRender: this.onBeforeRender.bind(this) 

    }); 

    this.tooltip.appendTo('body'); 

} 

 

// Tooltip’s beforeRender event handler 

onBeforeRender(args: TooltipEventArgs): void { 

    // The current target item element text is set as the tooltip content 

    this.tooltip.content = args.target.innerText; 

    // The tooltip is properly updated with the dynamically changed content 

    this.tooltip.dataBind(); 

} 

 

Finally, this tooltip is closed by calling its close event in the edit dropdown’s close event handler which is bound using the column edit params property. 

 

<e-column field='ShipCountry' editType='dropdownedit' [edit]='editParams'></e-column> 

 

public editParams = { params: { close: this.onClose.bind(this) } } 

 

// Edit dropdown’s close event handler 

onClose(args) { 

    this.tooltip.close(); 

} 

 

We have modified the previously shared sample based on this for your reference. You can find it below, 

 

Sample: https://stackblitz.com/edit/angular-slphlz-fgbzep?file=app.component.ts 

 

More details on this can be checked in the below links, 

 

Documentation: https://ej2.syncfusion.com/angular/documentation/tooltip/getting-started/ 

                               https://ej2.syncfusion.com/angular/documentation/drop-down-list/how-to/tooltip/ 

 

API link: https://ej2.syncfusion.com/angular/documentation/api/tooltip#beforerender 

                https://ej2.syncfusion.com/angular/documentation/api/tooltip#content 

                https://ej2.syncfusion.com/angular/documentation/api/drop-down-list#close 

 

Let us know if you have any concerns. 

 

Regards, 

Sujith R 

[Toan Bui]

I did it. Thank you so much!

[Sujith Kumar Rajkumar]

Hi Toan, 

 

You’re welcome. We are glad to hear that your query has been resolved. 

 

Regards, 

Sujith R