Sort a column that was created with valueAccessor value

[William Morgenweck]

I've attached my datasource

I have a valueAccessor that creates the value in the last_name column
    lastname: function(field, data, column){

          if(data["principal_investigators"] !=""){
          let aux = data["principal_investigators"]
          return aux[0]["last_name"]
          } else {
            return ""
          }
       },

So you can see that the field is being created with one of the JSON objects.

On the datasource there is an object of fiscal_year that is one of the root columns.  What I would like to do is sort by year and then by last_name.  Is that possible?

  sortOptions: { columns: [{ field: 'fiscal_year', direction: 'Descending' }, { field: 'last_name', direction: 'Descending' } ] },

Does not work since the column is not a root datasource value.  If I use a sort comparer how would I include the last_name?

  Thanks

Attachment: syncfusion_cf793489.zip

[Rajapandi Ravi]

Hi William, 

Greetings from Syncfusion support 

We have checked your shared information and we found that you trying to sort a column which was displayed by using value accessor. Before we start proceeding query, we would like to share the default of behavior of Value Accessor. 

By default, the valueAccessor is used to access/manipulate the value of display data. You can achieve custom value formatting by using valueAccessor. The return type of the valueAccessor must be always `string` data type. It is used to update the values of the column only on the UI level. It does not affect the data in the dataSource. 

All the actions of the grid like Sorting, Filtering, etc. will be performed based on the Grid dataSource value. Since your dataSource having list of arrays of objects, you can achieve your requirement by setting complex field. Please refer the below code example, sample and documentation for more information. 

 

<ejs-grid 

      ref="grid" 

      :dataSource="data" 

      :allowSorting="true" 

      :sortSettings="sortOptions" 

      width="500" 

    > 

      <e-columns> 

        <e-column field="appl_id" headerText="appl_id" width="100"></e-column> 

        <e-column 

          field="fiscal_year" 

          headerText="fiscal_year" 

          width="100" 

        ></e-column> 

        <e-column 

          field="principal_investigators.0.last_name" 

          headerText="Last_Name" 

          width="100" 

        ></e-column> 

      </e-columns> 

    </ejs-grid> 

Sample: https://codesandbox.io/s/vue-template-forked-ro4myo?file=/src/App.vue 

Documentation: https://ej2.syncfusion.com/vue/documentation/grid/how-to/list-of-array-of-objects/#complex-data-binding-with-list-of-array-of-objects 

Regards, 

Rajapandi R