1

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.

Community
  • 1
  • 1
Rekha
  • 45
  • 2
  • 8

1 Answers1

4

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");
Oleg
  • 220,925
  • 34
  • 403
  • 798
  • Thanks.. @Oleg For background color i made some changes... But it worked for me – Rekha Jul 31 '14 at 07:00
  • Just one question in your example... `$name.width() + $invdate.outerWidth()` Why you are using width() and outerWidth() two different properties to retrive the columns width? – Rekha Jul 31 '14 at 08:37
  • @Rekha: cells of grid have some borders which will be calculated by `.outerWidth()`. So I need to increase the width (without of border etc.) of visible cell with the **full width** of all cells which I make hidden. In the case the total `width` of new cell will have correct value. – Oleg Jul 31 '14 at 09:30