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.
|
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>);
}
} |
|
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>);
}
} |
