multiple header grid about jsgrid HOT 14 OPEN

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/

from jsgrid.

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

from jsgrid.

Thank you for the valuable request!

from jsgrid.

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

from jsgrid.

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

from jsgrid.

Thank you!!!

from jsgrid.

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.

from jsgrid.

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

from jsgrid.

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!

from jsgrid.

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.

from jsgrid.

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).

from jsgrid.

@llopez91, this can be achieve with rowRenderer.

from jsgrid.

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

from jsgrid.

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

from jsgrid.