[Solved] Image Buttons that call js or server code

[Boone]

Right now I have the below code:

<telerik:GridTemplateColumn UniqueName="DetailArrow" ItemStyle-Width="250">
    <ItemTemplate>
        <telerik:RadMenu ID="menuTools" runat="server" Flow="Horizontal" OnInit="menuTools_Init" OnItemClick="menuTools_Click" EnableEmbeddedSkins="true" EnableAjaxSkinRendering="true" CssClass="menuZ">
            <Items>
                <telerik:RadMenuItem Value="Edit" ImageUrl="/images/Edit.png" ToolTip="Edit this criteria" />
                <telerik:RadMenuItem Value="Delete" ImageUrl="/images/trash.png" ToolTip="Remove this criteria" />
                <telerik:RadMenuItem Value="Notify" ImageUrl="/images/NotifyOff.png" ToolTip="Turn the notify on" OnLoad="NotifyMenuItem_Init" />
            </Items>
        </telerik:RadMenu>
    </ItemTemplate>
</telerik:GridTemplateColumn>

I need to show Images in my grid row that performs the above functions (Edit, Delete, Notify) and some others that I took off to keep it short. What is the best way to do this?

Some of my buttons call JavaScript to open a radWindow. Some of them call a server method to delete or change the record somehow. To load a Radmenu on all of these records seem crazy.. Any ideas?

[Shinu]

Hi Boone,

You can use ImageButtons in GridTemoplateColumn instead of using RadMenu. You can use the table structure in order to set customize the appearance. Here is the example that I tried.

ASPX:

    <telerik:GridTemplateColumn>
        <ItemTemplate>
            <table>
                <tr>
                    <td>
                        <asp:ImageButton ID="ImageButton1" runat="server" ImageUrl="~/Images/Edit.gif" />
                    </td>
                    <td>
                        <asp:ImageButton ID="ImageButton2" runat="server" ImageUrl="~/Images/trash.gif" />
                    </td>
                    <td>
                        <asp:ImageButton ID="ImageButton3" runat="server" ImageUrl="~/Images/NotifyOff.gif" />
                    </td>
                </tr>
            </table>
        </ItemTemplate>
    </telerik:GridTemplateColumn>

Also you can attach server events to edit/delete or client events to open radwindow.

-Shinu.

[Boone]

That's all great but they don't do anything. I need button A to call a js method and button B to call a server method. See below. With this approach my 'edit' icon does not call the js method, it automatically does a postback.

    <telerik:RadScriptBlock ID="scriptBlock" runat="server">
    <script type="text/javascript">
    function Tools_ClientClick(sender, eventArgs)
        {
            alert("i made it");
            var rowElement = sender._element.parentNode.parentNode;
            alert(rowElement);
            var dataItemId = rowElement.id.split("__")[1];
            alert(dataItemId);
            var dataItem = $find('<%= Grid1.ClientID %>').get_masterTableView().get_dataItems()[dataItemId];
            alert(dataItem);
            var ID = dataItem.getDataKeyValue("CustomerID");
            alert(ID);

            var item = eventArgs.get_item();
        }
    </script>
    </telerik:RadScriptBlock>

         <telerik:RadGrid ID="Grid1" runat="server"
            DataSourceID="AccessDataSource1"
            PageSize="10"
            AllowPaging="true">
            <MasterTableView DataKeyNames="CustomerID" ClientDataKeyNames="CustomerID">
                <Columns>
                    <telerik:GridTemplateColumn>
                        <ItemTemplate>
                            <asp:ImageButton ID="edit" runat="server" ImageUrl="images/edit.png" OnClientClick="Tools_ClientClick" />
                            <asp:ImageButton ID="email" runat="server" ImageUrl="images/email.png" OnClick="Tools_Click" />
                        </ItemTemplate>
                    </telerik:GridTemplateColumn>
                </Columns>
            </MasterTableView>
        </telerik:RadGrid>

[Shinu]

Hi Boone,

When using standard ASP.NET controls, a method call requires brackets, even if there are no parameters. Aslo return false in the event handler in order to prevent postback. Try changing the code as shown in the example and see whether it is working fine.

ASPX:

<asp:ImageButton ID="ImageButton1" runat="server" OnClientClick="return Tools_ClientClick();" />

JavaScript:

<script type="text/javascript">
    function Tools_ClientClick(sender, eventArgs) {
        alert("i made it");
        // Your code
        return false;
    }
</script>

-Shinu.