Column clicked

8 posts, 1 answers
  1. Jon
    Jon avatar
    813 posts
    Member since:
    Oct 2008

    Posted 19 Jul 2011 Link to this post

    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
  2. Jon
    Jon avatar
    813 posts
    Member since:
    Oct 2008

    Posted 20 Jul 2011 Link to this post

    bump
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Marin
    Admin
    Marin avatar
    1045 posts

    Posted 22 Jul 2011 Link to this post

    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

    Register for the Q2 2011 What's New Webinar Week. Mark your calendar for the week starting July 18th and book your seat for a walk through of all the exciting stuff we will ship with the new release!

  5. Jon
    Jon avatar
    813 posts
    Member since:
    Oct 2008

    Posted 22 Jul 2011 Link to this post

    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
  6. Marin
    Admin
    Marin avatar
    1045 posts

    Posted 25 Jul 2011 Link to this post

    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

    Register for the Q2 2011 What's New Webinar Week. Mark your calendar for the week starting July 18th and book your seat for a walk through of all the exciting stuff we will ship with the new release!

  7. Jon
    Jon avatar
    813 posts
    Member since:
    Oct 2008

    Posted 25 Jul 2011 Link to this post

    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







  8. Answer
    Marin
    Admin
    Marin avatar
    1045 posts

    Posted 26 Jul 2011 Link to this post

    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

    Register for the Q2 2011 What's New Webinar Week. Mark your calendar for the week starting July 18th and book your seat for a walk through of all the exciting stuff we will ship with the new release!

  9. Jon
    Jon avatar
    813 posts
    Member since:
    Oct 2008

    Posted 26 Jul 2011 Link to this post

    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
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017