Sorting of dataSource in foreign key column

[ThreeGo]

I saw the following demo site.

https://ej2.syncfusion.com/vue/demos/#/fluent2/grid/foreign-key.html

<e-column field='CustomerID' headerText='Customer Name' width='150' :validationRules='customeridrules'

                foreignKeyValue='ContactName' foreignKeyField='CustomerID' :dataSource='customerData'></e-column>

The foreign key column is sorted in ascending order, unlike the data source( customerData ) specified.

I think it should be displayed basically as the data source provided.

How can I do that?

[Aishwarya Rameshbabu]

Hi ThreeGo,

Greetings from Syncfusion support.

Based on the provided information, it has been observed that you wanted to display the dataSource of the DropDownList rendered in the edit form of a foreign key column of the Grid in its original order. By default, in the Syncfusion Grid, the DropDownList in the edit form displays the data in ascending order. To change this order, you can modify the sortOrder of the DropDownList to 'None' within the actionComplete event of the Grid. Please refer to the following code example, sample, and screenshot for further details.

App.vue

<template>

<div class="col-lg-12 control-section">

    <div>

        <ejs-grid ref="grid" :dataSource="data" :allowPaging='true' :pageSettings="pageSettings" :allowFiltering='true' :filterSettings="filterSettings"

    :editSettings='editOptions' :toolbar='toolbarItems' :allowSorting='true' :actionComplete='actionComplete'>

            <e-columns>

                <e-column field='OrderID' headerText='Order ID' width='120' textAlign='Right' :validationRules='orderidrules' :isPrimaryKey='true'></e-column>

                <e-column field='CustomerID' headerText='Customer Name' width='150' :validationRules='customeridrules'

                foreignKeyValue='ContactName' foreignKeyField='CustomerID' :dataSource='customerData'></e-column>

                <e-column field='Freight' headerText='Freight' width='150' format='C2' textAlign='Right' editType='numericedit'></e-column>

                <e-column field='ShipName' headerText='Ship Name' width='170'></e-column>

                <e-column field='ShipCountry' headerText='Ship Country' width='150' editType='dropdownedit'></e-column>

            </e-columns>

        </ejs-grid>

    </div>

</div>

</template>

 

 methods: {

    actionComplete: function (args:any) {

      if (args.requestType === 'beginEdit' || args.requestType === 'add') 

      {

      let foreignKeyField = 'CustomerID';

      let ddInstance = args.form.elements.namedItem(foreignKeyField)[1].ej2_instances[0]

      ddInstance.sortOrder = 'None';

    }

  },

 

Sample: Nochaa (forked) - StackBlitz

Screenshot:

API References:

actionComplete

sortOrder

If you need any other assistance or have additional questions, please feel free to contact us.

Regards

Aishwarya R

[ThreeGo]

Thank you,  Aishwarya R.

I saw the sample you sent me.

But, I cannot apply it because I am using it in batch mode.(Because the actionComplete event does not occur even during editing)

Is there another way?

[Aishwarya Rameshbabu]

Hi ThreeGo,

Upon examining your query, we observed that you are utilizing the 'Batch' mode of editing and wanted to display data in the DropDownList within the edit form of the Grid in its original order. For batch editing, you can use the internal event 'batcheditform-rendered' to modify the sortOrder of the DropDownList. Please refer to the code example and sample provided below for further information, where we triggered the 'batcheditform-rendered' event during the Grid’s initial load.

App.Vue

  <ejs-grid ref="grid" :dataSource="data" :allowPaging='true' :pageSettings="pageSettings" :allowFiltering='true' :filterSettings="filterSettings"

    :editSettings='editOptions' :toolbar='toolbarItems' :allowSorting='true' :load='load'> 

            <e-columns>

                <e-column field='OrderID' headerText='Order ID' width='120' textAlign='Right' :validationRules='orderidrules' :isPrimaryKey='true'></e-column>

                <e-column field='CustomerID' headerText='Customer Name' width='150' :validationRules='customeridrules'

                foreignKeyValue='ContactName' foreignKeyField='CustomerID' :dataSource='customerData'></e-column>

                <e-column field='Freight' headerText='Freight' width='150' format='C2' textAlign='Right' editType='numericedit'></e-column>

                <e-column field='ShipName' headerText='Ship Name' width='170'></e-column>

                <e-column field='ShipCountry' headerText='Ship Country' width='150' editType='dropdownedit'></e-column>

            </e-columns>

        </ejs-grid>

 

  methods: {

    load: function (args: any) {

      var grid = this.$refs.grid.$el.ej2_instances[0];

      grid.on('batcheditform-rendered', function(args: any) { 

        var dropdownElement = args.cell.querySelector('.e-dropdownlist');

        if (dropdownElement) {

          dropdownElement.ej2_instances[0].sortOrder = 'None';

        }

      }); 

    } 

  },

 

Updated Sample: Nochaa (forked) - StackBlitz

Please get back to us if you need any other assistance.

Regards

Aishwarya R

[ThreeGo]

Hi,  Aishwarya R.

Thanks for your support, I got it working the way I wanted.

[Aishwarya Rameshbabu]

Hi ThreeGo,

You’re most welcome. We are happy to hear that the provided solution was helpful. Please get back to us if you need any other assistance.

Regards

Aishwarya R