Jsgrid: multiple header grid

[bboydflo]

It would be nice to have a way to declare a multiple level header for a table grid in which the last level in the deaders determines the column type, and other options.

Thank you for your work!

[tabalinas]

Thank you for the valuable request!

[tabalinas]

BTW multiple row header is already possible to implement with headerRowRenderer:

    headerRowRenderer: function() {
        var $result = $("<tr>").height(0)
            .append($("<th>").width(200))
            .append($("<th>").width(300));

        $result = $result.add($("<tr>")
            .append($("<th>").attr("colspan", 2).text("Name")))

        return $result.add($("<tr>")
            .append($("<th>").width(200).text("First Name"))
            .append($("<th>").width(300).text("Last Name")));
    }

See the fiddle:
http://jsfiddle.net/tabalinas/k9935wn3/

[CrazyRedScorp]

Thank you, and sorry - but does not work sorting by columns.

[tabalinas]

You are right, in this case you have to call sort yourself. Like in the following fiddle http://jsfiddle.net/tabalinas/k9935wn3/3/

[CrazyRedScorp]

Thank you!!!

[CrazyRedScorp]

And again. Please see special case - http://jsfiddle.net/RedScorp/3q24e6fn/1/
Your example: full working.
My example: column "date" and "contacts" without sorting. I do not understand - how to add the right conditions.

[tabalinas]

It doesn't work in your case because you don't attach click handlers on <th> with rowspan.
Just attach click handlers on all <th> elements.

$("<th>").attr("rowspan", 2).text("Id").on("click", function() { grid.sort(index); });

[CrazyRedScorp]

Good morning.
I have added your line in "append" and received an error - variable "index" is not found.
Hmmm. Okey, I added index manually, and - It worked!

http://jsfiddle.net/RedScorp/3q24e6fn/3/

$result = $result.add($("<tr>")
  .append($("<th>").attr("rowspan", 2).text("Id").on("click", function() { grid.sort(0); }))
  .append($("<th>").attr("rowspan", 2).text("Date").on("click", function() { grid.sort(1); }))
  .append($("<th>").attr("colspan", 2).text("FullName"))
  .append($("<th>").attr("colspan", 2).text("ColAB"))
  .append($("<th>").attr("rowspan", 2).text("Contacts").on("click", function() { grid.sort(6); }))
);

Thank you! Thanks for your work!

[CrazyRedScorp]

And the next question: "sortDescClass" (.jsgrid-header-sort .jsgrid-header-sort-asc .jsgrid-header-sort-desc) is used for the first in a row, with a height of (0). How to move the class to the second row?
For example: http://jsfiddle.net/RedScorp/3e1vvhvb/1/
Thanks.

[tabalinas]

Good question. As this scenario is not build-in, you have to put a workaround:

Add _setSortingCss to the grid config:

    _setSortingCss: function() {
        var fieldIndex = $.inArray(this._sortField, this.fields); // this is how you know the sorting field index

        // add css class to the header cell. You can identify it by fieldIndex.
        $yourHeaderCell.addClass(this._sortOrder === "asc" ? this.sortAscClass : this.sortDescClass);
    },

To get access to the $yourHeaderCell save $header rows that you create in headerRowRenderer to this (in current case this is a grid).

[llopez91]

I have a question, does anyone know how to add rowspan to the rows of my table? Not to the header, if not to the rows, so that it has for years grouped a value and appears the combined cell.

Like this in the row 13 and 14

[tabalinas]

@llopez91, this can be achieve with rowRenderer.

[llopez91]

Hi tabalinas, can you show me how to do?, Thanks :)

[buckelieg]

This should be implemented as model configuration in the grid.
Thanx for this awesome grid!