Custom order for dropdown inside Grid

[Javier A Aguilera]

Good morning gentlemen,

I'm trying to put a dropdownlist inside a Grid (which is easy to do), the thing is that in this dropdown I need to put the elements in a specific order different than the alphabetical, can you help me please with this one?

The column for the dropdown is "Parentezco", and "Orden" is a field of the table that I'm trying to use to order the ViewBag content

In advance, thanks!

/////////MY GRID IN THE VIEW/////////////////////

<ejs-grid id="DetalleFormatoAltaGmmVidaApGrid" dataBound="dataBound" locale="es-MX" query="new ej.data.Query().addParams('FormatoID', '@Model.FormatoID')" toolbar="@(new List<string>() { "Cancel", "Update", "Add", "Delete" })">

        <e-data-manager id="dataManager" adaptor="UrlAdaptor" url="/Sistema/Formatos/DetalleFormatoAltaGmmVidaApGrid_Read/" crudUrl="/Sistema/Formatos/BeneficiariosAccidentesPersonalesGrupalGrid_CRUD" requestType="Post"></e-data-manager>

        <e-grid-editSettings allowDeleting="true" allowEditing="true" allowAdding="true" mode="Normal" showDeleteConfirmDialog="true"></e-grid-editSettings>

        <e-grid-columns>

            <e-grid-column field="DetalleID" isPrimaryKey="true" isIdentity="true" visible="false"></e-grid-column>

            

            <e-grid-column field="Parentezco" headerText="Parentezco" foreignKeyField="TipoParentezco" foreignKeyValue="Descripcion" dataSource="@ViewBag.TiposParentezco"></e-grid-column>

            

        </e-grid-columns>

    </ejs-grid>

///////////////////CONTROLLER SIDE///////////////////

ViewBag.TiposParentezco = _context.TiposParentezco.OrderBy(p => p.Orden).ToList();

[Ashokkumar Balasubramanian]

Hi Javier, 

 

Greetings from Syncfusion support. 

 

For this scenario, you can use our sortOrder property of DropdownList component to achieve it. Could you please check the below code block and sample? 

 

<ejs-grid id="Grid" dataSource="@ViewBag.datasource" height="315" allowPaging="true" toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel" })"> 

    <e-grid-editSettings allowAdding="true" allowDeleting="true" allowEditing="true"></e-grid-editSettings> 

    <e-grid-columns> 

        <e-grid-column field="OrderID" headerText="Order ID" isPrimaryKey="true" textAlign="Right" width="100"></e-grid-column> 

        <e-grid-column field="CustomerID" headerText="Customer ID" edit="@(new {create = "create", read = "read", destroy = "destroy", write = "write"})" type="string" width="120"></e-grid-column> 

 

        <e-grid-column field="Freight" headerText="Freight" textAlign="Right" format="C2" editType="numericedit" width="120"></e-grid-column> 

        <e-grid-column field="ShipCountry" headerText="Ship Country" width="150"></e-grid-column> 

    </e-grid-columns> 

</ejs-grid> 

 

<script> 

    var elem; 

    var drpObj; 

    function create(args) { 

        elem = document.createElement('input'); 

        return elem; 

    } 

 

    function write(args) { 

        var grid = document.getElementById('Grid')["ej2_instances"][0]; 

        var data = grid.dataSource; 

        drpObj = new ej.dropdowns.DropDownList({ 

            value: args.rowData[args.column.field], 

            dataSource: data, 

            fields: { text: 'CustomerID', value: 'CustomerID' }, 

            sortOrder: 'None' 

        }); 

        drpObj.appendTo(elem); 

    } 

 

    function destroy() { 

        drpObj.destroy(); 

    } 

 

    function read(args) { 

        return drpObj.value; 

    } 

</script> 

 

Sample: https://www.syncfusion.com/downloads/support/forum/147129/ze/WebApplication13-408191814.zip 

 

Documentation: https://ej2.syncfusion.com/aspnetcore/documentation/grid/edit/#cell-edit-template 

 

sortOrder: https://ej2.syncfusion.com/documentation/api/drop-down-list/#sortorder 

 

Please check the sample and get back to us, if you require any further assistance on this. 

 

Regards, 

Ashokkumar B.