Swapping out an ImageButton for a custom-styled icon

I am in need of replacing an ImageButton within a GridView ItemTemplate with an icon that is defined in a CSS style.

My usual approach would be to replace the ImageButton with a hidden button and then use JQuery to trigger a click event on the hidden button. Here's an example:

<a class="btn" href="#" onclick="Utils.ClickButton('<%= btnTest.ClientID %>');"><i class="icon"> </i>Download to Excel</a>
                <asp:Button ID="btnTest" CssClass="btn" ToolTip="Download to Excel" runat="server" />

However, this method does not seem to work for ImageButtons that have a command argument to put the grid into edit mode. When I try to implement the above solution, I receive a runtime error stating that btnTest cannot be found.

Therefore, what I require is:

<asp:ImageButton ID="btnDelete" CommandArgument='<%#Eval("ID")%>' ToolTip="Delete" runat="server" CommandName="Delete"
                                ImageUrl="/images/delete.png" />

To appear like so:

<a class="btn" href="#" onclick="Utils.ClickButton('<%= btnTest.ClientID %>');"><i class="icon"> </i></a>
jquerycssasp.netgridview

Answer №1

To accomplish this task, utilize the LinkButton component

<asp:LinkButton runat="server" CommandName="Delete" CommandArgument='<%#Eval("ID")%>' CssClass="btn">
     <i class="icon">&nbsp;</i>
</asp:LinkButton>

The LinkButton click event can be managed in the RowCommand event of the GridView

protected void gvList_RowCommand(object sender, GridViewCommandEventArgs e)
{
    if (e.CommandName == "Delete")
    {
       //Execute Delete Command
    }                     
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Ensuring Proper Validation: Verifying Email and Username Availability via Server-side Django Using Jquery

Seeking assistance with validating a registration form for email and username availability using server-side programming with Django. I encountered a 403 forbidden error - CSRF verification failed when trying to implement a solution using the jQuery Valida ...

jquerypythondjangojquery-pluginsjquery-validate

The options in Bootstrap select are not visible because the select element is too large

I am encountering an issue with a populated bootstrap select tag. Initially, it looks like this: https://i.sstatic.net/1PWOf.png It is working perfectly fine, displaying all items for selection. However, when I decrease the height of the select using CS ...

jqueryhtmlcssangularjstwitter-bootstrap

Learn the art of animating "basic jQuery filtering" exclusively with CSS

Does anyone have suggestions on how to animate elements when filtered by JavaScript? The code I've tried so far doesn't seem to be working. Here's what I currently have: http://jsfiddle.net/ejkim2000/J7TF4/ $("#ourHolder").css("animation", ...

javascriptcsssortinganimationfiltering

Are certain countries legally requiring website accessibility? What are the repercussions for not meeting accessibility standards?

Are there countries with mandatory requirements for website accessibility? What are the consequences if a website is not made accessible in a country with such rules? Can the government take action like removing or blocking the IP address if a site ...

cssxhtmlaccessibilityweb-standardsscreen-readers

Managing the hierarchy of controllers in CodeIgniter

I've been looking everywhere to find an example in Codeigniter on how to build a tree structure like the one below. If anyone can provide me with some assistance, it would be greatly appreciated. Specifically, when I click on child node 2, I want to ...

phpjqueryajaxcodeigniter

Sending a variable using the onchange function in jQuery

I have written a script to toggle the visibility of different divs based on selection var folder; $(function() { $('#teamleag').change(function() { if ($('#teamleag').val() == 'footballal') { $('# ...

javascriptjquery

Can Socket.IO Event Handling be set up in a similar way to declaring event handling for AJAX calls?

When making an AJAX call using jQuery, we typically structure it like this: $.ajax({ url: 'http://localhost/url', type: 'GET', dataType: "json", data: {name : "data"}, beforeSend : function(){ ... ...

javascriptjquerysocketssocket.io-1.0

How come I am unable to alter the border color in the input field of material-ui?

My goal is to change the input border color to white regardless of whether it is focused, hovered, or just by default. I have attempted to create a theme using makeStyles for the text and input fields but it does not seem to be working. Here is my code: c ...

javascripthtmlcssreactjsmaterial-ui

What could be causing my bounce animation to begin 50 pixels higher than its intended starting point?

Trying to create a bouncing effect on text Check out my attempt here. It seems like the bug is in this area. @keyframes bounce{ 0%, 40%{ transform:scale(2,.5) translate(0,100px); } 45%,55%{ transform:translate(0,-50px); } 55%, 100%{ ...

javascripthtmlcssanimation

The Bootstrap navigation bar drop-down feature is not displaying the menu

After skimming through various threads on stackoverflow regarding the dropdown box in the navigation bar, none of the solutions seem to address my issue. Utilizing bootstrap version 3, I've implemented the provided navbar example from the official si ...

javascriptjqueryhtmlcsstwitter-bootstrap

Achieving consistent outcomes across various devices: What's the secret?

Hey there, I am facing an issue with my form page that I created using HTML, CSS, and Javascript. It looks good on my computer but appears messy on a mobile phone. The elements are getting out of the white box (div) making the entire page look chaotic. Sin ...

javascripthtmlcss

Automatically adjust the image size in CSS to fit the screen when the iPhone is rotated from portrait to landscape

I am trying to create a responsive design where an image will fit the screen without being cropped in both portrait and landscape mode. I have attempted the following code: <!doctype html> <html> <head> <style> img { max-height ...

htmlioscssiphone

Is there a way to dynamically replace a section of a link with the current URL using JavaScript or jQuery?

I have a link that appears on multiple pages, and I want to dynamically change part of the link based on the current URL* of the page being visited. (*current URL refers to the web address shown in the browser's address bar) How can I use JavaScript ...

javascriptjquery

Implementing Materialize CSS functionality for deleting chips

I've been attempting to extract the tag of a deleted chip from the div within the Materialize chips class, but I'm hitting roadblocks. My failed attempts so far: $('.chips').on('chip.delete', function(e, chip){ console.lo ...

javascriptjqueryhtmlcssmaterialize

Mobile browsers consistently display a horizontal scroll bar

My website is displaying a horizontal scrollbar on Android devices in browsers like Chrome, Firefox, and Opera Mini. It does not show correctly on the Android Default browser, appearing broken. In contrast, when comparing my site to the full desktop versi ...

htmlcss

Loading tab content on click using jQuery

These tabs have a chrome-like appearance. When the first tab (Facebook) is clicked, it shows Facebook content. Clicking on the second tab (Twitter) displays the content of the first tab. Tabs three, four, and five show their respective contents without any ...

javascriptjqueryhtmlruby-on-railstabs

Tips for disabling scrolling on touch screens for input elements

I am facing an issue with a modal that is positioned on top of a scrollable document body. I am trying to prevent the scrolling of the document when I swipe my finger on the modal. $(document).on('touchstart touchmove', function(e){ e.preventDef ...

javascriptjquerymodal-dialogmobile-safari

Show the correct URL address in the browser's address bar

My website utilizes Jquery/Ajax to dynamically load html pages into a specific div. By clicking on links with a certain class, the content opens up in this designated div, while the URL displayed in the address bar remains www.example.com. This setup allow ...

javascriptjqueryajax

Validating jQuery with an array key that is unknown

After reviewing the documentation at this link: http://docs.jquery.com/Plugins/Validation/Reference#Fields_with_complex_names_.28brackets.2C_dots.29, I noticed that the syntax for attaching rules to input arrays is as follows: rules: { "user[email]": "ema ...

jqueryjquery-validate

Different ways to make jQuery attr() method include the attribute by using single quotation marks

I start by creating a div in memory: var video_div = document.createElement('div'); video_div.className = "vidinfo-inline"; Next, I define some variables: var key = "data-video-srcs"; var value = '{"video1":"http://www.youtube.com/watch?v ...

javascriptjqueryhtmljson