Sorting grouped columns with multi-value cels

[info]

We are trying to implement the Kendo grid to replace our previous framework tool (c1).

Now I am stuck on creating a particular grid. The grid has a group header over 2 columns. In a row, the data of a property is represented as a cell (span) over 2 columns. Below this span are 2 properties in their own cell. This almost succeeds me with a ClientTemplate. However, I do not know how to use the properties from the row data.
When the group header is clicked the first propery sorts. The headers of 2 other columns sort their own property (column). 
In the picture, "naam" is the groups head. "Adres" and "Plaats" are the subcolumns.

How can I make this with the Kendo grid? I am mainly concerned with sorting the data behind the group header.

[Ivan Danchev]

Hello,

The Grid's built-in sorting is ascending or descending and it is done on the field the column is bound to. If the column is bound to Property1 the sorting will be done based on Property1. The ClientTemplate and HeaderTemplate configurations are simply options to show more data in the cells and in the header, but the sorting logic does not change. Because the template can contain all kinds of arbitrary text, Html, multiple property values, etc. So when sorting the column, the Grid does not take into account the arbitrary cell and header content. It sorts based on the field the column is bound to.

If you want to implement some kind of custom sorting, where the data will be sorted over two fields at the same time, see this forum thread, in which custom sorting is discussed: https://www.telerik.com/forums/custom-sort-compare-function-for-single-column-in-grid-with-many-columns

Regards,
Ivan Danchev
Progress Telerik

[info]

Thanks for your response Ivan.

I do understand the sorting. I've got that part working ok. I have a column group header with 3 columns underneath. The first has a template with an columspan of 3. The next 2 are hidden. This almost works.

<columns>
    <column field="rel_kode" title="Code" width="80" />
    <column field="rel_naam_zoek" title="Relatie">
        <columns>
            <column field="rel_naam_zoek" title="Naam" html-attributes-handler="collspanHandler" template="#:rel_naam_zoek#</br>#:rel_aflever_adres_volledig# #:rel_aflever_plaats#" />
            <column field="rel_aflever_adres_volledig" title="Adres" html-attributes-handler="hiddenHandler" />
            <column field="rel_aflever_plaats" title="Plaats" html-attributes-handler="hiddenHandler" />
        </columns>
    </column>
    <column title="Gegevens">
        <columns>
            <column field="datumtijd_aflevering" title="Datum" width="100" min-resizable-width="90" format="{0:dd-MM-yyyy}" />
            <column field="melk_kg" title="Melk (kg)" width="90" min-resizable-width="90" format="{0:0}" html-attributes-handler="rightalignHandler" />
            <column field="vet_perc" title="Vet (%)" width="90" min-resizable-width="90" format="{0:0.00}" html-attributes-handler="rightalignHandler" />
            <column field="eiwit_perc" title="Eiwit (%)" width="90" min-resizable-width="90" format="{0:0.00}" html-attributes-handler="rightalignHandler" />
            <column field="ureum_geh" title="Ureum (geh)" width="90" min-resizable-width="90" format="{0:0}" html-attributes-handler="rightalignHandler" />
            <column field="lactose_perc" title="Lactose (%)" width="90" min-resizable-width="90" format="{0:0.00}" html-attributes-handler="rightalignHandler" />
        </columns>
    </column>
</columns>

If the sorting is always done on data the columns is bound to, it should sort on 'rel_naam_zoek' when the column group header is click. But it doesn't. Is it even possible to do it this way? It looks like the field setting of the column group header is ignored?

In this case i can sort on the column sub header of the 'rel_naam_zoek'. But this is not exactly what i wanted.

[Ivan Danchev]

I've tested the column configuration you posted and at my end clicking on the rel_naam_zoek column header sorts the column as expected. See the attached short video. The sample project I tested it in is also attached.