Grouping on a Composite field?

[Tim]

I have a grid that I am displaying a column that is a composite field/object.  The 'createdUser' field is an object with lastName and firstName properties (among others).  The column is displaying properly, combining the lastName and firstName into a single column.  

I would also like to group by that column.  How would I group by the composite column (using both lastName and firstName)?  Here is the column definition:

        <kendo-grid-column field="createdUser" title="Created By"
                           [style]="{'font-weight': 'bold', 'line-height': '1em'}"
                           [headerStyle]="{'line-height': '1em'}">
          <ng-template kendoGridGroupHeaderTemplate let-group let-field="field" let-value="value">
            {{value.lastName}},&nbsp;{{value.firstName}}
          </ng-template>
          <ng-template kendoGridCellTemplate let-dataItem>
            <span style="font-weight: bold;">{{ dataItem.createdUser.lastName }},&nbsp;{{ dataItem.createdUser.firstName}}</span>
          </ng-template>
        </kendo-grid-column>

This displays properly, but everything is in a single group (when grouping).  Probably due to the field='createdUser' being an object.

Any ideas on how to accomplish?

Thanks,

Tim

 

 

[Svet]

Hi Tim,

Thank you for the provided sample markup.

The grouping functionality, as well as the other data operations - sorting and filtering, depend on the value passed to the [field] property of the column. The field should correspond to a value of primitive type such as a string or number and not an object as otherwise the Grid won't be able to compare the values properly. This is why, what I can suggest is to combine the lastName and firstName in a single property and pass that property value to the column field. Such approach will ensure the grouping and other data operations to function as expected and won't require the usage of the kendoGridCellTemplate where the first and last names are displayed together:

          <ng-template kendoGridCellTemplate let-dataItem>
            <span style="font-weight: bold;">{{ dataItem.createdUser.lastName }},&nbsp;{{ dataItem.createdUser.firstName}}</span>
          </ng-template>

Please let me know in case any additional details or if further assistance is required for implementing the suggested approach. Thank you.

Regards,
Svetlin
Progress Telerik