BuyLog In
Ticket T1257784
Visible to All Users

DataGrid - Customize other cell templates while in Grid mode

created 6 months ago

Hey,

since English is not my first language, I will try to keep things very simple and explain my train of thoughts.

We have a devextreme-angular DataGrid
example:
Clipboard-File-1.png

Ultimate goal:

  • Group the columns by a single column and add custom values to different columns

Example:
Clipboard-File-2.png

currently we are using a data grid and we allow users to group by "nationality".

This works fine and we get the default group header, which contains:

  1. the button to collapse/expand the group
  2. default text + "Nationality" + count of it
  3. for every column with type of number, we get the sum of it

The first step was to change the text(Nr.2), which was perfectly done by using the groupCellTemplate

HTML
<dxi-column
  [caption]="'some-caption'"
  dataField="nationality"
  dataType="string"
  groupCellTemplate="nationalityGroupTemplate"
>
  <div *dxTemplate="let data of 'nationalityGroupTemplate'">
    {{ doSomething(data) }}
  </div>
</dxi-column>

which results to the follwing grid:
Clipboard-File-3.png

However after a lot of research, I couldn't figure out a way to either add or modify the values of the other columns.
I tried to add multiple groupCellTemplates for each of the column, but they wont be triggered, if it is not grouped by that specific column.
I also tried to manipulate the data object in the above dxTemplate hoping to access the row/header columns, that didn't work either.

Is there a way to modify multiple columns in a group row/header if the state of the grid is "grouped".

I know it is an odd thing to do, but it is a necessary feature requested by the customer. I would appreciate your help or any kind of suggestions.

Devextreme version: 23.1.6
Angular version: 17.3.2

Sign in to comment on this post

Answers approved by DevExpress Support

created 6 months ago

Hello,

Thank you for the images.

To accomplish this task, use Group Summaries. Implement a custom aggregate function to show custom content in these group summaries (see Custom Aggregate Function). You don't need to implement groupCellTemplate in this case.

Please let me know if you need further assistance.

    Show previous comments (2)
    T T
    TJami 6 months ago

      Hello Mark,
      thank you for your explanation and the CodeSandBox.
      At first it didn't work in my code base, even tho everything seemed to be the same, but then I figured out, you didn't set any remoteOperations.

      So I tried out to configure the remote operations a bit.

      I had the following remoteOperations for my DxDataGrid

      TypeScript
      readonly remoteOperations = {
    paging: true,
    filtering: true,
    sorting: true,
    grouping: true,
    summary: false,
    groupPaging: false
  }
      HTML
      <dx-data-grid
  #grid
  [dataSource]="dataSourceSignal()"
  [repaintChangesOnly]="true"
  [allowColumnReordering]="true"
  [remoteOperations]="remoteOperations"
  [wordWrapEnabled]="true"
  [rowAlternationEnabled]="true"
  (onRowDblClick)="handleRowDblClick($event)"
  (onExporting)="exportDataGridAsExcel($event)"
>

      The remote operations I used initially was based on the Client-Side Data Aggregation Docs (Step 1) I set the remoteOperations.summary and remoteOperations.groupPaging to false, but somehow options.value was undefined and the calculateCustomSummary function never had the calculation step in options.summaryProcess.

      So after testing the other operations, I figured I had to set remoteOperations.grouping to false as well, in order to get into the calculation step and therefore get the options.value in my function.

      Was this intended? if so, maybe the docs should be updated or have a note on it?

      Thank you for your support!

      Mark Ramirez (DevExpress Support) 6 months ago

        Hello,

        Thank you for your response.

        If remoteOperations.grouping is enabled, summary calculation should be executed on the server. See remoteOperations.

        If you want client-side summaries, remoteOperations.grouping should be disabled. I will forward this use case to our technical writers. We'll check how we can improve the relevant help topic: Client-Side Data Aggregation.

        If you need to enable remoteOperations.grouping, implement server-side custom summaries. Refer to the following help topic to learn how to implement this: Server-Side Data Aggregation.

        Please let me know if you have further questions.

        T T
        TJami 6 months ago

          Hello,
          thank you for the further Explanation.
          This makes sense now!

          Sign in to comment on this post

          Disclaimer: The information provided on DevExpress.com and affiliated web properties (including the DevExpress Support Center) is provided "as is" without warranty of any kind. Developer Express Inc disclaims all warranties, either express or implied, including the warranties of merchantability and fitness for a particular purpose. Please refer to the DevExpress.com Website Terms of Use for more information in this regard.

          Confidential Information: Developer Express Inc does not wish to receive, will not act to procure, nor will it solicit, confidential or proprietary materials and information from you through the DevExpress Support Center or its web properties. Any and all materials or information divulged during chats, email communications, online discussions, Support Center tickets, or made available to Developer Express Inc in any manner will be deemed NOT to be confidential by Developer Express Inc. Please refer to the DevExpress.com Website Terms of Use for more information in this regard.