Select Event Handler with TreeView

[Margaret]

Hello,

When using the select event handler, I need to capture the id of the item that was clicked on, allow the user to click on a spot on the canvas (a different vendor's tool), and then draw the shape that the user chose at that location. Getting the id of the item is fine and the correct shape is drawn on the canvas. However, this happens when the item in the tree view is selected instead of when the user clicks on the canvas. I attached an event listener to the canvas using getElementById, but listener is triggered when the tree view item is selected and I'm not sure how to ensure that it only fires after the user clicks on the canvas.

function onSelect(e) {
        // this refers to the TreeView object

        var dataItem = this.dataItem(e.node);
         document.getElementById("canvas").addEventListener("click", drawShape(dataItem.id), false);
}

function drawShape(shape)
{
   var x = event.clientX;
   var y = event.clientY;
   //draw correct shape at target location
}

 

Any suggestions?

Thanks in advance.

[Dimitar]

Hello,

The described scenario is not very clear to me. If you would like to prevent the TreeView node from selection, you may use the preventDefault method of the event argument - e.preventDefault();
And in addition, why you are adding an event listener to the canvas inside the handler of the TreeView. It will be added on every node selection. You could add outside this handler. And inside the handler, you may trigger a click event for the canvas, which will execute the added canvas click handler.

Regards,
Dimitar
Telerik by Progress