Item Templating with JSX

[Ton That Hung]

Hi Syncfusion Team,

Hi Syncfusion Team, I'm using the  DropDownButton component and I want to customize the Popup items. In your documents, I saw that Popup items can be customized by using the beforeItemRender event but only using the HTML element. I want to use the JSX element as replace. 

How to implement that.

Thanks.

[YuvanShankar Arunagiri]

Hi Ton,

We have checked your reported query and prepared the sample based on your requirement. Please refer the below UG link and sample link. We have achieved your requirement by using Popup templating feature of the dropdown button.

UG link: https://ej2.syncfusion.com/react/documentation/drop-down-button/popup-items/#popup-templating

render() {

        return (<div className='control-pane'>

                <div className='control-section'>

                    <div id="target">

                        <ul>

                            <li>

                            <span className="e-ddb-icons e-paste e-align"></span>

                            <div className="e-div-align">

                                <b>Paste Text</b>

                                <div>Provides option to paste only the selected text.</div>

                            </div>

                            </li>

                        </ul>

                    </div>

                    <div className='dropdownbutton-section'>

                        <div id='dropdownbutton-control'>

                            <div className='row'>

                                <div className="col-xs-12 col-sm-12 col-lg-6 col-md-6">

                                    <DropDownButtonComponent target='#target'  iconCss='e-ddb-icons e-profile'>Paste</DropDownButtonComponent>

                                </div>

                            </div>

                        </div>

                    </div>

                </div>

            </div>);

    }

Sample link: https://stackblitz.com/edit/react-9fxjgn?file=index.js,index.css

Could you please check the above code and get back to us, if you need any further assistance on this. 

Regards,

YuvanShankar A

[Ton That Hung]

That's great. Thank you for your solution.

[YuvanShankar Arunagiri]

Hi Ton,

We are happy to hear that your requirement has been fulfilled. Please get back to us if you need any further assistance on this.

Regards,

YuvanShankar A

[Ton That Hung]

Hi YuvanShankar,

While I using the Popup templating feature of the dropdown button, the button on Popup doesn't trigger the onClick event.

Sample: https://stackblitz.com/edit/react-9fxjgn-mbcymw?file=index.js,index.css

[YuvanShankar Arunagiri]

Hi Ton,

We have validated your reported query and prepared the sample based on your requirement. Please use the Syncfusion button component to resolve your issue and refer the below code and sample link.

[index.js]:

render() {

    return (

      <div className="control-pane">

        {/* <ButtonComponent id="btn" cssClass='e-primary' created={this.btnCreated.bind(this)} >Click</ButtonComponent> */}

        <div className="control-section">

          <div id="target">

            <ul>

              <li>

                <div className="e-div-align">

                <ButtonComponent id="btn" cssClass='e-primary' created={this.btnCreated.bind(this)} >Click</ButtonComponent>

                  <div>Provides option to paste only the selected text.</div>

                </div>

              </li>

            </ul>

          </div>

          <div className="dropdownbutton-section">

            <div id="dropdownbutton-control">

              <div className="row">

                <div className="col-xs-12 col-sm-12 col-lg-6 col-md-6">

                  <DropDownButtonComponent

                    target="#target"

                    iconCss="e-ddb-icons e-profile"

                    beforeClose={(e) => (e.cancel = true)}

                  >

                    Paste

                  </DropDownButtonComponent>

                </div>

              </div>

            </div>

          </div>

        </div>

      </div>

    );

  }

Sample link: https://stackblitz.com/edit/react-9fxjgn-juvmhj?file=index.js

Could you please check the above sample and get back to us, if you need any further assistance on this. 

Regards,

YuvanShankar A

[Ton That Hung]

Well, thanks for your solution.

[YuvanShankar Arunagiri]

Hi Ton,

We are happy to hear that your requirement has been fulfilled. Please get back to us if you need any further assistance on this.

Regards,

YuvanShankar A

[Ton That Hung]

Hi YuvanShankar,

I have a problem when I use TextboxComponent on the Popup. I can't enter space character.

Link sample:https://stackblitz.com/edit/react-9fxjgn-3wgsdn?file=index.js,package.json

How can I config to fix this problem?

Thanks.

[YuvanShankar Arunagiri]

Hi Ton,

We have checked your reported query and to resolve this issue, kindly add the “e-edit-template” to input element which placed within the dropdown button popup element shown as below.

<TextBoxComponent ref={(scope) => textObj = scope} created={onCreated.bind(this)}/>

                  <br />

                  <input className="e-edit-template"/>

…….

function onCreated() {

      textObj.element.classList.add("e-edit-template");

    }

Sample link: https://stackblitz.com/edit/react-9fxjgn-clngfv?file=index.js

Get back to us if you need any further assistance on this. 

[Ton That Hung]

Thanks for your support.

It's work for me.

I have 2 questions about this solution:

1. why add class "e-edit-template" to the list, what is the mechanism behind it.
2. Later when I upgrade to higher versions of syncfusion, will this hotfix still work?

I'm a bit worried about this fix.

Thank you so much.





[YuvanShankar Arunagiri]

Ton,

 

Query: why add class "e-edit-template" to the list, what is the mechanism behind it?

In the source level, the space key action for text boxes is prevented by the dropdown button keyboard navigation action. If the target has an element with ‘e-edit-template’ class name, then we have prevented the dropdown button keyboard action and enabled the popup element key action.

Query: Later, when I upgrade to higher versions of syncfusion, will this hotfix still work?

Yes, it is a stable fix, and it is considered for all our higher/upcoming versions of Syncfusion packages.

Get back to us if you need any further assistance on this.

[Ton That Hung]

Thanks for your support.

[YuvanShankar Arunagiri]

You are welcome, Ton. Please get back to us if you need any further assistance on this.

If that post is helpful, please consider accepting it as the solution so that other members can locate it more quickly.