CODEWITHSUNDEEP
javascripthtmlcssjqgrid
Rekha
Rekha

Reputation: 45

How one can use colspan in the jqGrid footerData?

Want to create the jqgrid footer as described in below grid:

Jqgrid footer row with merged row

I want the footer in the jqgrid as shown in above jqGrid. I have set the footerrow:true and $self.jqGrid("footerData", "set", { Total: actualSum });, with this i am able to get the footerRow. And to add label to this as i mentioned 'Grand Total: ' i need to merge two columns Amount and Tax.. So, how can achieve these. I have gone through this. But the cellattr is used to merge the cells.. Incase of footer row i am not able to get this cellattr if there is way to use these approach. How can i fix my probelm using this?

I even gone through these answer. Here, just the the right border are made hidden conditionally but the colsapn is not used. So that too didn't help me to fix my problem.

Currently i am getting the footer like these: enter image description here

@Oleg can you just guide me how i can fix this issue and create the footer using the colspan as i described.

Upvotes: 1

Views: 4696

Answers (1)

Oleg
Oleg

Reputation: 221997

One can use colspan in the footer too. It's important to understand that jqGrid set the footer once during creating the grid and then just can change the width of columns on the footer if the user resized the column width.

To simplify the code I suggest to set resizable: false property on the columns where we use colspan. The demo demonstrates the solution:

enter image description here

In the demo I added resizable: false property in "Client" and "Date" columns ("name" and "invdate" columns) and used the following code after jqGrid is created:

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");

Upvotes: 4

Related Questions