AllowRowSelect Row Click Ambiguity

[Gotcha]

I have a grid Control where I have a client side ajax handler on a row click... but also in the row i have 2 controls which are buttons (LinkButtons) which calls a different method and I do not want the ajax handler on those.

The problem i'm having is that the row click always trigger the client side ajax... even if I've only clicked on the button controls.

I was able to get the behaviour I want with a different button (Image)
Here's the code to demonstrate the problem

<ClientSettings>
    <Selecting AllowRowSelect="True" />
    <Scrolling AllowScroll="True" UseStaticHeaders="True" />
    <ClientEvents OnRowClick="SelectShoppingList_RowClick" /> <% This triggers an Ajax Call on Row Click %>
</ClientSettings>
<MasterTableView DataKeyNames="Account_ID, List_ID" ClientDataKeyNames="Account_ID, List_ID">
    <Columns>
        <telerik:GridButtonColumn ButtonType="ImageButton" CommandName="SelectList" CommandArgument="Account_ID, List_ID"
            ImageUrl="../Images/btSelectCharcoal.gif" Visible="false" UniqueName="SelectColumn">
        </telerik:GridButtonColumn>
        <telerik:GridTemplateColumn UniqueName="TemplateColumn" ItemStyle-Width="400px">
            <ItemTemplate>
                <asp:Label ID="lblTemplateName" runat="server" CssClass="slListName"> <%# DataBinder.Eval(Container.DataItem, "List_Name")%></asp:Label><br />
                <asp:Label ID="lblLastUpdated" runat="server" CssClass="slDetailLine"> <%# DataBinder.Eval(Container.DataItem, "Detail_Line")%></asp:Label>
            </ItemTemplate>
        </telerik:GridTemplateColumn>
        <telerik:GridBoundColumn UniqueName="ItemsColumn" DataField="Item_Count_Display"
            ItemStyle-Width="80px" ItemStyle-CssClass="slItemCount">
        </telerik:GridBoundColumn>
        <telerik:GridTemplateColumn UniqueName="CommandsColumn">
            <ItemTemplate>
                <telerik:RadButton ID="btnRename" runat="server" CommandName="RenameList" CommandArgument="Account_ID, List_ID"
                    Text="Rename" UniqueName="RenameColumn" ButtonType="LinkButton" BorderWidth="0"
                    Font-Underline="true" BackColor="#063648" ForeColor="White">
                </telerik:RadButton> <%OnClick on this button always triggers the Ajax Call which I do not want %>
                <br />
                <telerik:RadButton ID="btnDelete" runat="server" CommandName="DeleteList" CommandArgument="Account_ID, List_ID"
                    Text="Delete" UniqueName="DeleteColumn" ButtonType="LinkButton" BorderWidth="0"
                    Font-Underline="true" BackColor="#063648" ForeColor="White">
                </telerik:RadButton><%OnClick on this button always triggers the Ajax Call which I do not want %>

                <telerik:RadButton ID="btnCancel" runat="server" Width="72"
                    Height="31">
                    <Image ImageUrl="../Images/btCancelCharcoal.gif" />
                </telerik:RadButton><% This button does not trigger the AJAX call which is what i want%>

            </ItemTemplate>
        </telerik:GridTemplateColumn>
        <telerik:GridButtonColumn FilterControlAltText="Filter DeleteCol column" UniqueName="DeleteCol"
            ButtonType="ImageButton" CommandName="DeleteItemFromShoppingList" CommandArgument="Account_ID,List_ID"
            ConfirmText="Are you sure you want to delete this item from the list ?" ConfirmTitle="Delete List"
            ImageUrl="..\Images\icoDeleteRedX.gif" ItemStyle-HorizontalAlign="Left"> ><% Similarly This button does not trigger the AJAX call which is what i want%>
        </telerik:GridButtonColumn>
    </Columns>
</MasterTableView>

Why Can't i have the same rowclick to be ignored on the LinkButtons as I have in the Image Buttons?

Thanks

[Radoslav]

Hi Gotcha,

To achieve the desired functionality you could try performing check into you SelectShoppingList_RowClick if the source element which is clicked is a span element of the RadButton. For example:

<telerik:RadCodeBlock runat="server">
        <script type="text/javascript">
            function SelectShoppingList_RowClick(sender, eventArgs) {
                var e = event || window.event;
                if (e.srcElement.tagName.toUpperCase() == "SPAN") {
                }
                else {
                   // ajax call
                }
            }
        </script>
    </telerik:RadCodeBlock>

Additionally I am sending you a simple example based on your code, which demonstrates how to achieve the desired functionality. Please check it out and let me know if it helps you.

Looking forward for your reply.

Kind regards,
Radoslav
the Telerik team

[Gotcha]

 Almost ...  the problem with introducing this JS check breaks the RowClick ( ie when I want it to select the Row) in the following condition:
 When there is a descriptive databound column where there is text, When i mouse over the text and click on it ( i expect it to select the row) but this falls since the text is also wrapped around the "SPAN" ...just as the RadButton link...which is correctly filtered out to avoid the Ajax Call for the RowSelect.

My solution was to have an OnClientClicking on the Button and Cancel the event to handle the Rad Buttons...
Not sure if there is a better way of doing it... but yours seems ok only if i can differentiate between a SPAN from a databound column and a SPAN  from the Colulmn Template...if you can think of a way ... ill be interested in changing it...

Also another problem i read about checking the e.srcElement ... but im not sure becuase i read it somewhere that it may not be compatible for all browsers

thx

[Veli]

Hi Cyril,

You can try checking for the rbText CSS class in your span. RadButton uses this class name in the span element when ButtonType="LinkButton". Thus, you can identify between spans in RadButton and spans in other cells:

<telerik:RadCodeBlock runat="server">
    <script type="text/javascript">
        function SelectShoppingList_RowClick(sender, eventArgs) {
            var evt = eventArgs.get_domEvent();
            var target = evt.target || evt.srcElement;

            if (target.tagName.toUpperCase() == "SPAN" &&
                target.className === "rbText") {
                //this is a span element inside RadButton
            }
            else {
                // ajax call
            }
        }
    </script>
</telerik:RadCodeBlock>

The above javascript will prevent AJAX when you click on the RadButton span element. Also, note how we retrieve the DOM event object and the target element. The srcElement property is IE-specific, others use e.target. We check for both.

Radoslav

the Telerik team

[Gotcha]

Thanks,

i'll keep this bookmarked for the next one. It looks like this will work since it differentiates between the 2 types Databound and ButtonBound columns.