We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Can we have customize actions when mouse hover in the Gantt chart grid and that action should be interact with remote server .

Thread ID:

Created:

Updated:

Platform:

Replies:

146585 Aug 9,2019 05:15 AM UTC Aug 13,2019 01:48 PM UTC React - EJ 2 3
loading
Tags: Gantt Chart
Sudhanshu Jain
Asked On August 9, 2019 05:15 AM UTC

Can we populate action in Gantt chart Grid on mouse hover?.

Pooja Priya Krishna Moorthy [Syncfusion]
Replied On August 12, 2019 11:32 AM UTC

Hi Sudhanshu, 
 
Currently we don’t have any event for mouseHover action. We logged a feature request for this. We will implement and include in any of our upcoming releases. You can track its status from below feedback link. 
Please cast your vote to make it count. We will prioritize the features for every release based on demands. 
 
Now, we have achieved this by some work-around. We can bind the mouse over event in dataBound event using javascript addEventListener method. Please find the below code example. 
 
 
export class Default extends SampleBase { 
            //... 
           dataBound(args) { 
               document.getElementById('treeGridDefault_gridcontrol').addEventListener('mouseover', function () { 
                    //... 
                }); 
            }            render() { 
                return (<div className='control-pane'> 
                       <GanttComponent id='Editing' dataSource={editingData} 
                            dataBound ={this.dataBound.bind(this)}> 
                        //... 
                        </GanttComponent> 
               </div>); 
            } 
        } 
 
Please find the below sample link. 
 
Regards, 
Pooja Priya K. 


Sudhanshu Jain
Replied On August 12, 2019 11:48 AM UTC

Actually i was asking about how actions is appearing in attached screen shot.Can we have populate icons in Gantt chart grid on mouse hover .Please refer icons in attached screen shot.Can you please let me know is it CSS change required ?


Attachment: Action_on_Mouse_hover_7bfef246.zip

Gurunathan A [Syncfusion]
Replied On August 13, 2019 01:48 PM UTC

Hi Sudhanshu, 
 
By using column template, we can customize the cell element. We have rendered edit and delete icon on mouse hover action by using this template property of the columns. We used the JavaScript addEventListener method to bind the mouse hover action in order to render the icons on mouse move in dataBound event. 
Please find the below code example. 
 
 
  export default class App extends React.Component { 
            constructor() { 
                //... 
                this.template = this.ganttTemplate; 
            } 
            ganttTemplate(props) { 
                var edit = 'edit' + props.TaskID; 
                var del = 'delete' + props.TaskID; 
                return (<div className="e-customhover"> 
                    <span id={edit} className="e-icons e-edit e-customEdit" onClick={function () { alert('Edit Clicked for   =' + props.TaskID) }}></span> 
                    <span id={del} className="e-icons e-delete e-customDelete" onClick={function () { alert('Delete Clicked for   =' + props.TaskID) }} style={{ marginLeft: '20px' }}></span> 
                </div>); 
            }; 
            dataBound(args) { 
                document.getElementById('treeGridGantt_gridcontrol').addEventListener('mouseover', function (e) { 
                    if (e.target.classList.contains('e-templatecell')) { 
                        var element = e.target.children[0]; 
                        element.classList.remove("e-customhover"); 
                    } 
 
                }); 
                var ele = document.getElementsByClassName('e-rowcell'); 
                for (var i = 0; i < ele.length; i++) { 
                    ele[i].addEventListener('mouseleave', function (e) { 
                        var parentElement = e.target.parentElement.getElementsByClassName('e-rowcell e-templatecell'); 
                        if (parentElement.length) { 
                            var element = parentElement[0].children[0]; 
                            element.classList.add("e-customhover"); 
                        } 
                    }); 
                } 
            } 
            queryCellInfo(args) { 
                if (args.column.field == "Custom") { 
                    args.column.allowEditing = false; 
                } 
            } 
            render() { 
                return (<GanttComponent id='Gantt' 
                    //... 
                    dataBound={this.dataBound.bind(this)} queryCellInfo={this.queryCellInfo.bind(this)}> 
                    <ColumnsDirective> 
                        //... 
                        <ColumnDirective field='Custom' headerText='Custom' width='250' template={this.template}></ColumnDirective> 
                    </ColumnsDirective> 
                </GanttComponent>); 
            } 
        } 
 
Please find the below sample and UG link. 
 
Regards, 
Gurunathan 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon