Grouped GridComponent Sort By Index or Value Other Than Column

[scott]

I would like to sort the months in the attached screen shots by the year number but display the text value for the year in the grid.  For example, I would like to see January, February, March, etc.  I attempted to update the caption using the captionTemplate from numerous samples.  However, the props.key value is always undefined and the caption is always blank with this approach.  Any guidance to accomplish the correct sort would be much appreciated.  I have also attached a code sample for your reference. 

Attachment: sample_c15b1635.zip

[Rajapandiyan Settu]

Hi Scott,

Thanks for contacting Syncfusion support.

By analyzing your query, we suspect that you want to display the month 1 as January, 2 as February and so on in the caption row. Is this your requirement? Kindly share the below details to proceed further.

1. Please confirm that are you want to access the grouped key inside the group CaptionTemplate function?
   Sample: https://stackblitz.com/edit/react-nwqpi2-lx8ord?file=index.js,package.json
2. Share the example dataSource (reportData) of the Grid.
3. Did the Year and Month column both contains the number type values in the dataSource?

Regards,

Rajapandiyan S

[scott]

That is not exactly what I was hoping to accomplish.  I have updated the two countries that you are displaying in your sample below adding a value for MonthDescription.  I also noticed that there is not value for the key in the console console.log('grouped Key', props.key);.  For some reason they key value is always undefined.

What I would like to display for the groups: 

Year 2022 - 2 Items

Month January - 1 Items

Month March - 1 Items

Month April - 1 Items

I want the months to be sorted/ordered by the Month: 1, Month: 3 value so that they display correctly and not sorted alphabetically by the MonthDescription which is the default option.

Here is a link to the updated sample adding the month description.

https://stackblitz.com/edit/react-nwqpi2-3l1aat

{

    OrderID: 10248,

    CustomerID: 'VINET',

    EmployeeID: 5,

    ShipCountry: 'France',

    Freight: 32.38,

    Year: 2022,

    Month: 1,

    Verified: !0,

    MonthDescription: 'January',

  },

  {

    OrderID: 10249,

    CustomerID: 'TOMSP',

    EmployeeID: 6,

    ShipCountry: 'Germany',

    Freight: 11.61,

    Year: 2022,

    Month: 3,

    Verified: !1,

    MonthDescription: 'March',

  },

[Rajapandiyan Settu]

Hi Scott,

Thanks for your update.

Based on your requirement, you want to sort the MonthDescription column in month-wise. You can achieve this by using sortComparer property of the column. In that event, you can perform your own sort actions with reference and comparer values. Find the below code example and sample for your reference.

sortComparer: https://ej2.syncfusion.com/react/documentation/grid/sorting/#custom-sort-comparer

[index.js]

const monthsDes = [

  'january',

  'february',

  'march',

  'april',

  'may',

  'june',

  'july',

  'august',

  'september',

  'october',

  'november',

  'december',

];

export class NormalEdit extends SampleBase {

  ----

  sortComparer(reference, comparer, refrenceObj, comparerObj) {

    // perform the sorting action as you need

    if (reference && comparer) {

      reference = monthsDes.indexOf(reference.toLowerCase()) + 1;

      comparer = monthsDes.indexOf(comparer.toLowerCase()) + 1;

    }

 

    if (reference < comparer || reference == undefined || reference == null) {

      return -1;

    }

    if (reference > comparer || comparer == undefined || comparer == null) {

      return 1;

    }

    return 0;

  }

 

  render() {

    return (

      <div>

        <GridComponent

          id="grid"

          ref={(g) => (this.grid = g)}

          dataSource={data}

        >

          <ColumnsDirective>

            <ColumnDirective

              field="MonthDescription"

              headerText="Month Description"

              width="120"

              sortComparer={this.sortComparer.bind(this)}

            />

          </ColumnsDirective>

          <Inject services={[Sort, ExcelExport, Aggregate, Toolbar, Group]} />

        </GridComponent>

      </div>

    );

  }

}

 

Sample: https://stackblitz.com/edit/react-nwqpi2-uzzhev?file=index.js

Please get back to us if you need further assistance.

Regards,

Rajapandiyan S

[scott]

Thanks that worked perfectly.

[Rajapandiyan Settu]

Hi Scott,

We are happy to hear that you have achieved your requirement with the solution provided.

Please get back to us if you need further assistance.

Regards,

Rajapandiyan S