Column clicked

[Jon]

Hi,
I have a treelist within which I use a template column with a pencil icon that I assign an onclick event from the code behind.  The event simply calls a js function with the current row GUID.  This works well.

However with the recent release the OnItemClick client event can now be called and I use that to call a JS function that opens a popup page.

The issue that I have is that now both functions are called when the user clicks on the edit pencil so I get a details and an admin page being opened!  Is there a way to determine the column that was clicked from the OnItemClick event and thus exclude the column?

Regards,

Jon

[Jon]

bump

[Marin]

Hi Jon,

 This is expected behavior when you have both handler attached. Can you specify what exactly you need to achieve? Since you clicked the pencil icon the column that originated the event is the column holding that icon. If you need to get a reference to the item that was clicked you can get it from the event arguments if the event. Additionally if you need to cancel any of the events you can just return false from the event handler. More information on the TreeList can be found in this help topic.

Kind regards,
Marin
the Telerik team

[Jon]

Hi Marin,

The aim is that if a user clicks on the pencil a popup window with the formview set to Edit opens.  If the user clicks on other columns a popup window with the formview set to readonly opens. 

OK what I need to do then is remove my added event for the pencil but in the client clicked event handler I need to then work out which column was clicked, and then handle dependant on whether it was an edit or normal column.  

So, given that, the issue that i have now is that I can get the item with eventArgs.get_item() but then how from there do I work out which the clicked column was.  Once I know the column I can use get_uniqueName() to work out if it was the admin link column or not.

Regards,

Jon

[Marin]

Hi Jon,

 The OnItemClick event is fired when you click anywhere on a item, that is why it does not expose a property to distinguish separate columns that are being clicked inside the item. The event handler should contain common logic for all the columns of a specific item. If you need to have different behavior for some icons in the item you should assign separate event handlers for those buttons (e.g. the pencil icon) and then execute different logic according to the event handler. If you do not wish the event to bubble up in the hierarchy and to be caught by other handlers you can disable this be returning false from the event handler or calling the preventDefault method of the DOM event in case it has been fired before the client-side event of the treeList.

All the best,
Marin
the Telerik team

[Jon]

Hi Marin,
The Edit event handler does return false but the rowclick still gets processed.  I'm adding my abbreviated code below.

As you can see in the code behind I setup the image and cascade the returned value (always false) from the edit form.  That should stop the bubbling shouldn't it?

Could you take a look and suggest a work around based on what I have so far?

Many Thanks,

Jon


JS:

function ShowEditForm(id) {
    alert("edit" + id);
    return false;
}
function RowClick(sender, eventArgs) {
    alert("view" + eventArgs.get_item().get_dataKeyValue('ID'));
}

Grid:

<telerik:TreeListTemplateColumn UniqueName="TemplateEditColumn" >

    <ItemTemplate>

        <asp:HyperLink ID="EditLink" runat="server" Text="" ImageUrl=""></asp:HyperLink>

    </ItemTemplate>

</telerik:TreeListTemplateColumn>


<ClientSettings>
<ClientEvents OnItemClick="RowClick" />
</ClientSettings>


VB Codebehind

Private Sub uxRadTreeList_ItemDataBound(ByVal sender As Object, ByVal e As Telerik.Web.UI.TreeListItemDataBoundEventArgs) Handles uxRadTreeList.ItemDataBound
            If TypeOf e.Item Is TreeListDataItem Then
                Dim treeListDataItem As TreeListDataItem = CType(e.Item, TreeListDataItem)
                Dim editLink As HyperLink = DirectCast(e.Item.FindControl("EditLink"), HyperLink)
                editLink.Attributes("href") = "#"
                editLink.Attributes("onclick") = [String].Format("return ShowEditForm('{0}');", DirectCast(DirectCast(treeListDataItem.DataItem, System.Data.DataRowView).Item("ID"), Guid).ToString())
                editLink.ImageUrl = GetStandardEditImage()
            End If
        End Sub

[Marin]

Hi Jon,

 You can try the following code to prevent bubbling of the event across all browsers:

function ShowEditForm(id, e)
            {
                alert("edit:" + id);
                //insure cross browser interoperability
                if (!e) var e = window.event;
                e.cancelBubble = true;
                if (e.stopPropagation) e.stopPropagation();
                if (e.preventDefault) e.preventDefault();

                return false;
            }

in code behind we pass the second argument to the ShowEditForm method in the following way:

editLink.Attributes("onclick") = [String].Format("return ShowEditForm('{0}', event);", DirectCast(DirectCast(treeListDataItem.DataItem, System.Data.DataRowView).Item("ID"), Guid).ToString())

Hope this helps.

Regards,
Marin
the Telerik team

[Jon]

Super, many thanks Marin.  The addition of event to the onclick in the codebehind was the key.  Can't believe that I didn't know how to do that till now :)

Thanks for your help,

Jon