DropDownList column display text instead of value

[Catalin]

Hi, I am trying to use a dropdownlist column inside a grid. The dropdown has items with text and numeric value (IDs) I want the grid to display the text, while sending the id to the server when edited. here is the grid initialization: 

$("#table").ejGrid(

    {

        toolbarSettings: { showToolbar: true, toolbarItems: ["search", "add", "edit", "delete"] },

        allowPaging: true,

        allowSearching: true,

        allowSorting: true,

        editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true, editMode: "dialog", showDeleteConfirmDialog: true },

        dataSource: ej.DataManager({

            url: "/actions/crew.php?id=" + id,

            crudUrl: "/actions/crew_crud.php?id=" + id,

            adaptor: "UrlAdaptor"

        }),

        columns: [

            { field: "id", visible: false, headerText: "ID", isPrimaryKey: true },

            { field: "employee", headerText: "Name", editType: "dropdownedit",

               dataSource: employees },

            {

                field: "status", headerText: "Status",

                editType: ej.Grid.EditingType.Dropdown,

                dataSource:

                    [

                        { text: "Unconfirmed", value: "Unconfirmed" },

                        { text: "Emailed", value: "Emailed" },

                        { text: "Booked", value: "Booked" },

                        { text: "Not Available", value: "Not Available" }

                    ]

            },

        ]

    }

);

and this is the content of the employees variable, json-stringified: 

[{"text":"John Doe","value":"1"},{"text":"Nick Halden","value":"2"},{"text":"James Coleman","value":"3"}]

I want the grid to display the names, but to send the id values to the server. Right now it shows the numbers instead of the names.

[Prasanna Kumar Viswanathan]

Hi Catalin, 

Thanks for using Syncfusion products. 

We have analyzed your query and we suspect your requirement is similar to ForeignKey column feature of our Grid Control.  

In this we can able to bind the datasource for the foreign key column. In the foreignKey field we have to mention the field(value) and in the ForeignKey value we have to mention the text(text). When the grid is not in edit mode, it displays the text value. After editing the record, when we saving to the database the value can be saved and text will be shown in grid. 

Refer the below code example 

<script type="text/javascript"> 

$(function () { 

  var Data = [{ "text": "John Doe", "value": "1" }, { "text": "Nick Halden", "value": "2" }, { "text": "James Coleman", "value": "3" }]; 

 

            $(function () { 

        $("#Grid").ejGrid({ 

            dataSource: ej.DataManager({ 

                url: "/Grid/UrlDataSource", 

                insertUrl: "/Grid/Insert", 

                updateUrl: "/Grid/Update", 

                removeUrl:  "/Grid/Delete", 

                adaptor: "UrlAdaptor" 

            }),            

.                        .                              .                       .                  . 

                    { field: "EmployeeID", headerText: 'Employee ID', editType: ej.Grid.EditingType.Dropdown, foreignKeyField: "value", foreignKeyValue: "text", textAlign: ej.TextAlign.Right, width: 80, dataSource: Data }, 

, 

.                .                      .                    .                     .  

            ] 

        }); 

    });    </script> 

   

Refer the below screenshot for the output 

 

Note: While saving the EmployeeID column will display text but while saving in the server its value will be saved. 

For your convenience we have prepared a sample which can be downloaded from below link 

Sample: http://www.syncfusion.com/downloads/support/forum/139038/7z/SyncfusionMvcApplication401563563541.7z  

Refer our help documentation for your reference 

https://help.syncfusion.com/js/grid/columns#foreign-key-column  

Regards, 

Prasanna Kumar N.S.V