Customize JqGrid Edit/Delete button CSS style

Within my JQGrid, I have successfully implemented Edit and Delete buttons that redirect users to another page for editing or deleting specific records. However, I am facing a CSS issue with the styling of these buttons. How can I override the current style of the buttons?

Below is a snippet from my MVC View:

<title>jqGrid for ASP.NET MVC - Demo</title>
    <link rel="stylesheet" type="text/css" media="screen" href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.10.0/themes/redmond/jquery-ui.css" />
    <link rel="stylesheet" type="text/css" href="../../Content/themes/ui.jqgrid.css" />
    <script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.9.0.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="../../Scripts/trirand/i18n/grid.locale-en.js"></script>
    <script type="text/javascript" src="../../Scripts/trirand/jquery.jqGrid.min.js"></script>  
    <link rel="stylesheet" type="text/css" href="../../Content/MyStyle.css" />

    <script type="text/javascript">
        var myGrid = $('#list');
        $(function () {
            $("#list").jqGrid({
                url: '/JqGridClients/DynamicGridData/',
                datatype: 'json',
                mtype: 'GET',

                colNames: ['ClientID', 'Address', 'Company', 'Name'],
                colModel: [
          { name: 'ClientID', index: 'ClientID', search: false,  align: 'left', formatter: PKId_formatter },
          { name: 'Address', index: 'Address', search: true, sortable: true, align: 'left' },
          { name: 'Company', index: 'Company', search: true, align: 'left', stype: 'select' },
          { name: 'Name', index: 'Name', search: true, sortable: true, align: 'left', searchoptions: { sopt: ['cn' ,'eq', 'ne']}}],
                pager: jQuery('#pager'),
                rowNum: 10,
                 width: '100%',
                height: '100%',
                rowList: [5, 10, 20, 50],
                sortname: 'ClientID',
                sortorder: "desc",
                viewrecords: true,
                loadonce: true,
                caption: 'Clients',

            }).navGrid('#pager', { search: true, edit: true, add: false, del: true, searchtext: "Search" });

              $("#list").jqGrid('filterToolbar', { stringResult: true, searchOnEnter: false, defaultSearch: 'cn' });

              $("#list").setGridParam({data: results.rows, localReader: reader}).trigger('reloadGrid');
        });

       function PKId_formatter(cellvalue, options, rowObject) {
    return '<a href="Client/Edit?id=' + cellvalue + '" class="ui-icon ui-icon-pencil" ></a> <a href="Client/Delete?id=' + cellvalue + '" class="ui-icon ui-icon-trash" ></a>';
}

  </script>  

    <h2>Index</h2>

<table id="list" class="scroll" cellpadding="0" cellspacing="0"></table>
<div id="pager" class="scroll" style="text-align:center;"></div>

asp.netcssasp.net-mvcjqgridstyles

Answer №1

The class ui-icon is used for <a> tags within the PKId_formatter function, causing them to have a CSS style of display: block. There are various ways to resolve this issue, such as adding style="display:inline-block" to the <a> tags.

It is advisable to consider using formatter: "actions" (refer to this link for an example) instead of creating a custom formatter.

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

Steps to trigger a Bootstrap modal when the user clicks anywhere on the webpage

I need assistance with setting up a Bootstrap dialogue modal to open at the clicked position on a mousedown event when a user interacts with the page. Despite my attempts, the dialogue modal is not opening where it should be. Here's what I've tri ...

javascriptjquerycsstwitter-bootstrap-3modal-dialog

Guide on setting a value in $(document).ready using code behind

I am currently working on a .NET application with the use of Twitter Bootstrap. My main challenge right now is retrieving data from a .aspx.cs page to a .aspx page. Here's a look at my code: strObject.cs public class strObject { public string Nam ...

javascriptc#jqueryasp.nettwitter-bootstrap

There is a lack of CSS import in the HTML document

I have organized my files in the following structure: - index.html - css/styles.css This is the HTML code I am using: <!DOCTYPE html> <html lang="en> <head> <title>Bootstrap Case</title> <meta charset="utf-8"> & ...

jqueryhtmlcsstwitter-bootstrap

Manipulating the distinct look of the final element in an *ngFor loop

I am trying to enhance the appearance of the last line of controls generated by an iterator by making it disabled and somewhat invisible. Currently, my code is functioning well, as shown below. <div *ngFor="let item of data; let last = last;"> &l ...

htmlcssangular

What is the best way to ensure that a Flex div and its child images stay confined within the boundaries of its parent container?

I'm struggling to create a responsive grid of images. I can't get the images to be both responsive with max-height and max-width, while also making sure the parent div takes up their full width. On the other hand, if I make the parent div the cor ...

htmlcssflexbox

Create a stylish navigation dropdown with MaterializeCSS

Incorporating the materializecss dropdown menu feature, I encountered an issue where only two out of four dropdown menu items were visible. Here is the HTML code snippet in question: <nav class="white blue-text"> <div class="navbar-wrapper con ...

javascripthtmlcssmaterialize

`How to perfectly place multiple text blocks and images using CSS`

Check out this screenshot to see the issue I'm facing: Here is the HTML code: <div class="parent_process"> <div class="first_process"><img src="images/exprimer-besoin-telephonie.png"/><span style="width:18%">You fi ...

htmlcss

Trick for hiding CSS elements when input field is vacant

Is there a way to hide the search result when the input is empty? While everything is functioning correctly, I would like to prevent the search result from remaining visible after clearing the input field. For example, if you type 'A' and then d ...

htmlcss

Items are overflowing the flex container, exceeding its boundaries

I've experimented with the width property, flex, flex-basis, and flex-shrink, but so far nothing seems to be working. I can't seem to pinpoint where the mistake lies in the code. I wanted to include the code snippet here, but it's throwing ...

htmlcssflexbox

Retrieving data from an HTML Table using Javascript

I am in the process of designing a dynamic web form that populates from a stored procedure. The form consists of a table with a dropdown list, a text box, and a label. While I can successfully retrieve data from the dropdown and text box, I am facing diffi ...

javascriptc#htmlasp.nethtml-table

Tips on transferring a parameter from one partial view to another

I am working on a partial view that displays users with shop details. To enhance the functionality, I have implemented a partial modal to flag users as sick. Here's a snippet of my partial view for the users: @model Shop <div class="mb-3 d-fl ...

asp.net.netasp.net-mvc

Position a <div> element in the center of another <div> element

Link to code: https://jsfiddle.net/z4udfg3o/ My goal is to center the "caixa" divs within the "produtos" div. Initially, I achieved this by using exact values with margin-left. However, I now want it to be responsive across different screen sizes, so I ha ...

htmlcss

Issue with mobile flipcard: Initial tap is unresponsive

Currently debugging the mobile version of a site built with Next.js. Encountering an issue where the first flip-card tapped on mobile refuses to flip properly. Instead, it selects the text on the opposite side of the card when tapped multiple times. The ...

cssmobiletransformnext.jstransition

Formatting tabular rows to appear as headers

I am currently developing a mobile website that is specifically designed for older phones with minimal CSS and HTML support. Due to these limitations, I have decided to utilize tables in my design. My goal on a certain page is to create a table row with a ...

htmlcsshtml-table

The React modal refuses to disappear, stubbornly clinging to the original component it sprang from

Hey there, I'm a beginner in learning React and I'm encountering an issue with my popup modal component. Even after showing the modal, I can still interact with and click on the main UI elements. Can anyone assist me with this problem? https://i ...

cssreactjsstyled-components

Guide to turning off the Facebook iframe page plugin

I am facing a challenge with embedding a facebook iframe on my website. I want to disable it once the screen width reaches a specific point, but I am struggling to make the iframe disappear properly. Here is how I have attempted to implement this: window.o ...

javascripthtmlcss

Why isn't my data appearing when using $http.get in AngularJS?

I'm encountering an issue where my bar graph doesn't display data when using $http.get. However, if I eliminate $http.get and directly call the URL, the data shows up perfectly. Any suggestions on what might be causing this problem? AngularJS v ...

jsonasp.net-mvcangularjs

Create a canvas and include input boxes in an HTML document

I'm attempting to create a canvas line diagonally above two textboxes that are also positioned diagonally (similar to Samsung's pattern passcode) when a button is clicked, but I am facing difficulties in achieving this. I have attempted to solve ...

javascripthtmlcss

Calling a JavaScript function from server-side code (without using startup scripts)

In essence, my objective is as follows: Initiate deletion of a record upon button click. Delete the record only if a specific column (Location) is null (working perfectly). If the specific column is not null, prompt the user for confirmation before proce ...

javascriptc#jqueryajaxasp.net-mvc

How should one correctly align various classes in a cascading manner within CSS?

Here is an interesting challenge - I want each of these buttons to have their background image change when hovered over. However, I'm struggling with the class setup in my code. I've been trying to understand how to distinguish between divs and c ...

htmlcss