CRUD Action with sorted Dropdown field

[Arif Nurdiansyah]

Hello, any info how to sort dropdown?

Here's my grid

var jabatan = @Html.Raw(ViewData["jabatan"]);

        var jabatanList = new ej.data.DataManager(jabatan).executeLocal(new ej.data.Query().sortBy("ID"));

        console.log(jabatan);

        var grid = new ej.grids.Grid({

            dataSource: data,

            editSettings: {

                allowEditing: true,

                allowAdding: true,

                allowDeleting: true,

                mode: 'Dialog',

                showConfirmDialog: true,

                showDeleteConfirmDialog: true,

                allowSorting: true

            },

            allowPaging: true,

            toolbar: ['Add', 'Edit', 'Delete', 'Search'],

            height: 500,

            columns: [

                { type: 'checkbox', field: 'CheckBox', width: 10 },

                { field: 'id', isPrimaryKey: true, visible: false, headerText: 'id', textAlign: 'Right', width: 10, type: 'number' },

                {

                    field: 'jabatanID', headerText: 'Jabatan', width: 80, validationRules: { required: true },

                    foreignKeyField: 'ID', foreignKeyValue: 'JabatanName', dataSource: jabatanList

                },

                { field: 'peraturanPerusahaanId', visible: false, headerText: 'peraturanPerusahaanId', textAlign: 'Right', width: 10, type: 'number' },

                

            ],  

            pageSettings: { pageCount: 2, pageSizes: true },

        });

        grid.appendTo('#Grid');

I try to sort it from the data source, but nothing happen, when i try to add/delete the dropdown still sorted from name not id

[Hariharan J V]

Hi Arif, 

 

Thanks for contacting Syncfusion support. 

 

Query: any info how to sort dropdown? I try to sort it from the data source, but nothing happen 

 

We have validated your query and you can achieve your requirement by using below method. Here, we have achieved your requirement by using editParams. Please find the below code example for your reference. 

 

[code example] 

    var grid = new ej.grids.Grid({ 

        ... 

        ... 

       columns: [ 

            ... 

            ... 

           { 

                field: 'CustomerID', foreignKeyField: 'CustomerID', foreignKeyValue: 'ContactName', dataSource: window.customerData, 

                width: 150, headerText: 'Customer Name', validationRules: { required: true }, editType: 'dropdownedit', edit: { params: { sortOrder: 'Ascending' } }       //sort dropdown dataSource either ascending or descending 

            },                               //for descending put Descending instead of Ascending 

            ... 

            ... 

       ] 

    } 

    ); 

    grid.appendTo('#Grid'); 

 

 

We have prepared a simple sample based on your requirement. Please find the sample in below link. 

 

Sample Link: https://stackblitz.com/edit/xhtice?file=index.js 

Please get back to us if you need further assistance on this. 

Regards, 

Hariharan 

[Arif Nurdiansyah]

How about if i want to order by id and sort it?

[Hariharan J V]

Hi Arif, 

 

Query: How about if i want to order by id and sort it? 

 

We have validated your query and you can achieve your requirement by using below way. Here, we have sort the dataSource based on OrderID column and assigned in dropdown dataSource. Please find the below code example for your reference. 

 

[code example] 

 

    var dt = new ej.data.DataManager(window.stringData).executeLocal(new ej.data.Query().sortByDesc("OrderID"));   //sort by OrderID 

 

    var grid = new ej.grids.Grid({ 

        dataSource: window.stringData, 

        ... 

        ... 

       columns: [ 

            ... 

            ... 

           { 

                field: 'CustomerID', foreignKeyField: 'CustomerID', foreignKeyValue: 'ContactName', dataSource: window.stringData, 

                width: 150, headerText: 'Customer Name', validationRules: { required: true }, editType: 'dropdownedit', edit: { params: { dataSource: dt, sortOrder: 'None' } }        //assign sorted data and prevent sorting for default(customerID) column 

            }, 

            ... 

            ... 

       ] 

    } 

    ); 

    grid.appendTo('#Grid'); 

 

We have prepared a simple sample based on your requirement. Please find the sample in below link. 

 

Sample link: https://stackblitz.com/edit/xhtice-gbzn6e?file=index.js 

Please get back to us if you need further assistance on this. 

Regards, 

Hariharan