What is the proper method for utilizing colspan within the footerData of a jqGrid?

Are you looking to customize the footer of your jqgrid as shown in the example below?

I am trying to set up a custom footer for my jqgrid similar to the one displayed above. I have already enabled the footerrow:true option and used 

$self.jqGrid("footerData", "set", { Total: actualSum });
to display the footerRow successfully. However, I need to merge two columns (Amount and Tax) and add a label 'Grand Total:' to achieve the desired look. I have explored solutions like this, which suggest using cellattr to merge cells. Unfortunately, this approach doesn't seem to work with footer rows. Is there another way to implement this using cellattr?

I also found answers like these ones, where hiding right borders conditionally is discussed, but colspan isn't utilized. This method didn't solve my issue either.

Currently, my footer looks like this:

@Oleg, could you provide some guidance on how I can address this problem and create a footer that utilizes colspan as I have described?

javascripthtmlcssjqgrid

Answer №1

Utilizing the colspan feature in the footer is a useful technique in jqGrid. It's important to note that jqGrid initially sets the footer content during grid creation, and only adjusts column widths if the user resizes them.

A helpful tip to streamline the code is to set the resizable: false property on columns where colspan is used. You can view a demonstration of this solution in action here.

In the provided demo, I included the resizable: false property in the "Client" and "Date" columns ("name" and "invdate" columns), and applied the following code snippet after creating the jqGrid:

var $footRow = $("#list").closest(".ui-jqgrid-bdiv").next(".ui-jqgrid-sdiv").find(".footrow");

var $name = $footRow.find('>td[aria-describedby="list_name"]'),
    $invdate = $footRow.find('>td[aria-describedby="list_invdate"]'),
    width2 = $name.width() + $invdate.outerWidth();
$invdate.css("display", "none");
$name.attr("colspan", "2").width(width2);

$footRow.find('>td[aria-describedby="list_tax"]').css("border-right-color", "transparent");
$footRow.find('>td[aria-describedby="list_total"]').css("border-right-color", "transparent");
$footRow.find('>td[aria-describedby="list_closed"]').css("border-right-color", "transparent");
$footRow.find('>td[aria-describedby="list_ship_via"]').css("border-right-color", "transparent");

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

The dynamic text feature in my Angular Material gridlist functions perfectly in CodePen, however, it fails to work when

I have enhanced the Angular material gridlist demo by incorporating static and dynamic texts into the grid tiles. While this modification works flawlessly on Codepen (see my provided link), it does not function properly when deployed on my server. The sta ...

javascriptangularjsangular-material

Booking form pop-up appearing beneath the section

Currently, I am in the process of adding a booking form to the main page of . However, I seem to be encountering an issue where a popup appears below the section it is supposed to open within when selecting the number of persons. Despite adjusting the z ...

htmlcsswordpressdivi

Can you easily choose specific rows within a group in jqGrid?

Currently, I am working on customizing a jqGrid that is grouped based on the state or province. Each individual row within the group contains a checkbox. My goal is to insert a checkbox in the group header that will enable users to either select or deselec ...

jqueryjquery-selectorsjqgridcheckboxgrouping

Transmit information from the frontend to the backend using JavaScript and the Express framework

After creating a custom variable in my frontend to store data, I needed to access the same data in my Express backend. The JavaScript variable and the POST request code snippet are as follows: const dataPush = { urlSave: urlSave, ...

javascriptexpressfetch

What is the best way to display JSON data in a Listview control?

What is the best way to display JSON data in a list format? Currently, I am able to retrieve JSON data and display it in an alert dialog. The JSON data looks like this: [{"_id":"5449f20d88da65bb79a006e1","name":"name3","phone":"888888","service":"service ...

javascriptjqueryjsontitanium-mobile

I am attempting to swap values within table cells using AngularJS. Would it be recommended to utilize ngBind or ngModel, or is there another approach that would

How can I make a table cell clickable in AngularJS to switch the contents from one cell to another, creating a basic chess game? I want to use angular.element to access the clicked elements and set the second clicked square equal to the first clicked using ...

javascripthtmlangularjs

What is the best way to spy on a property being called within a function?

I am facing an issue where the 'offsetWidth' value is undefined and I need to spyOn it. The function getCurrentPage retrieves an element based on the id currentpage. Although spying on getCurrentPage works, I have been unable to declare the offs ...

javascriptangularjsunit-testingjasminekarma-jasmine

Tap on the screen to initiate a phone call using dompdf

I recently came across a recommendation to include the following code snippet to enable click-to-call functionality: <a href="tel:555-555-5555">555-555-5555</a> However, I encountered an issue when trying to implement this in dompdf. ...

phphtmlcodeigniterdompdf

There was a hiccup encountered while trying to follow the steps for creating a

Despite others' attempts to solve the errors quickly, the search continues and the symptoms persist. > <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="046c6168686b29766165677044342a352a34">[email protected]< ...

javascriptnode.jsreactjsnpm

The slider components have an endless loop feature that only runs once before coming to a

I'm working on creating an infinite slider that loops continuously without the need for navigation buttons. Instead, I plan to allow users to control the slider using touch gestures (although this functionality is not yet implemented in the code snipp ...

javascripthtmlcsssass

Passing an array of selected values from Vue.js to a text area and adding them to the existing content

I'm facing a situation and I could really use some assistance. The image shows that there is a multiple select box on the left with numbers, and a text box on the right. My goal is to allow users to click on the house numbers in the select box and hav ...

javascriptvue.jsvuejs2vue-component

Getting the scroll position of a Vuetify v-table: A guide

Utilizing the Vuetify v-table component to handle a large amount of data, I am seeking a way to read the current scroll position (both horizontally and vertically) of the table during certain actions. Here is what I have attempted thus far: Playground < ...

htmlvue.jsvuetify.js

Is it possible to use a shell script to replace the external CSS file link in an HTML file with the actual content of the CSS file

Seeking a solution for replacing external CSS and JS file links in an HTML document with the actual content of these files. The current structure of the HTML file is as follows: <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C ...

javascripthtmlcssawksed

Sending text content using AJAX

Recently, I've delved into the world of AJAX and JavaScript while working on a project in JSP. My goal is to submit text entered in a textarea using a JavaScript button. The first submit button worked fine initially, but upon posting, I ended up with ...

javascriptajaxjsppostsubmit-button

The properties of margin:auto and text-align:center are failing to function as expected

I'm facing an issue while creating a website. The 'margin: auto' and 'text-align: center' properties in my CSS code seem to not be functioning as expected. Can someone please review my code in inspect element and identify the probl ...

htmlcssmargintext-align

Ensuring the accuracy of a single field within a form containing multiple fields is made possible through the utilization of

I am facing an issue with my emailValidation method. Even though I want it to run when this.$refs.editUserForm.validate('email') returns true, it always seems to return false, especially when a valid email like <a href="/cdn-cgi/l/email-protec ...

javascriptvue.jsvalidationvuetify.js

Position a div relative to another div with a static position

I am attempting to create a site that is fullscreen and responsive, but I am having issues with elements in the container overflowing on smaller screens, causing it to not be 100% as desired. I have tried using: top:100%; position:relative; width:100%; he ...

javascriptjqueryhtmlcss

issue with the emit() and on() functions

While diving into my study of nodejs, I encountered a puzzling issue where emit() and on() were not recognized as functions. Let's take a look at my emitter.js file function Emitter(){ this.events = {}; } Emitter.prototype.on = function(ty ...

javascriptnode.js

What is the best way to send a string without using quotation marks as a parameter in a function?

If I have an API that takes the query as http://localhost:8000/api/v1/rental/?place__startswith=kathmandu, how can I implement a generic search in ReactJS? What I attempted to do is pass the default parameter as search(query=kathmandu) so that the result ...

javascriptajaxreactjstastypie

The intl-tel-input dropdown feature is malfunctioning on mobile browsers

Currently, I have integrated the intl-tel-input library into my project for selecting international telephone numbers from a dropdown menu. While accessing the application on a web browser, the country flags display correctly with the intended styling. Ho ...

cssangularjssassmobile-websiteintl-tel-input