How to use material-ui Menu component inside column template?

[ameya kelkar]

Hi, 

  I'm trying to add Material-UI Menu component inside custom column template but its not displaying the menu. How to display that menu ? Attaching screenshot for the same, please let me know if anyone knows how to display material-ui menu.

Attachment: Query_7f5ae108.zip

[Monisha Sivanthilingam]

Hi Ameya, 

 

Thank you for contacting Syncfusion support. 

 

We have analyzed your query and have prepared sample achieving your requirements using column menu. We have rendered a material-ui menu using column template in the Task Name column. The following code snippets demonstrate the solution. 

 

Index.js 

columnTemplate(props) { 

    return ( 

      <div className="columnTemplate"> 

        <div> 

          {props.TaskName + "  "} 

          <MuiThemeProvider> 

            <RaisedButton onClick={this.handleTouchTap} label="Click me" /> 

            <Popover 

              open={this.state.test} 

              anchorEl={this.state.anchorEl} 

              anchorOrigin={{ horizontal: "left", vertical: "bottom" }} 

              targetOrigin={{ horizontal: "left", vertical: "top" }} 

              onRequestClose={this.handleRequestClose} 

            > 

              <Menu> 

                <MenuItem primaryText="Refresh" /> 

                <MenuItem primaryText="Help &amp; feedback" /> 

                <MenuItem primaryText="Settings" /> 

                <MenuItem primaryText="Sign out" /> 

              </Menu> 

            </Popover> 

          </MuiThemeProvider> 

        </div> 

      </div> 

    ); 

  } 

 

We have also prepared a sample for your reference. 

 

To learn more about column template in Syncfusion Gantt Chart, please refer our Online Documentation and Sample. 

 

Please contact us if you require any further assistance. 

 

Regards, 

Monisha.