Why am I getting error while creating dropdownlist in one column of jqxgird?

Question

I have created one grid using jqWidget. I'm trying to put the drop-down list in the 7th column of jqxgrid. My code is as follows. I can't get the expected output.

// Data which I want to get in dropdownlist
var drpSource = [
        { id: 1, name: "Edit" },
        { id: 2, name: "SendMail" }
];

// This is particular 'column' part of my grid
 columns: [
                { dataField: 'user_name', text: 'Username', },
                { dataField: 'first_name', text: 'First Name', },
                { dataField: 'last_name', text: 'Last Name', },
                { dataField: 'email', text: 'Email', width: 300 },
                { dataField: 'register_dt', text: 'Registered Date', cellsformat: 'MM/dd/yyyy', },
                { dataField: 'expiration_dt', text: 'Expiry Date', cellsformat: 'MM/dd/yyyy', },
                {
                    width: 100, autoshowfiltericon: false, dataField: 'drpfunction',  text: "Function", columntype: 'dropdownlist',
                    createeditor: function (row, cellvalue, editor) {
                            editor.jqxDropDownList({
                            source: drpSource,
                            displayMember: 'name',
                            valueMember: 'id',
                            filterable: false,
                            placeHolder: 'Choose…',
                            autoDropDownHeight: true
                        });
                    },
                     initeditor: function (row, cellvalue, editor) { 
                         editor.jqxDropDownList('selectItem', cellvalue);
                     }
                 }

Am I missing anything?

Note: Column has been created successfully, Although it's blank.

Answer 1

You didn't mentioned what is your expected output and what error you received. I can't help you more without more info. Your code seems fine to me except you need to add cellvaluechanging event in order to change the id number displayed after you select the option in jqxDropDownList.

Also I think is good to mention that you need to double click the cell in column 7 in order to trigger the jqxDropDownList.

Example: https://jsfiddle.net/f0szowah/ (You need to modify it to fit your case!)

html code:

<div id="jqxgrid"></div>

JavaScript + jQuery code:

$(document).ready(function () {
    // Data which I want to get in dropdownlist
    var drpSource = [
        { id: 1, name: "Edit" },
        { id: 2, name: "SendMail" }
    ];
    
    var data = [
        { user_name: "User1", first_name: "First1", last_name: "Last1", email: "[email protected]", register_dt: "01/01/2024", expiration_dt: "01/01/2025", drpfunction: 1 },
        { user_name: "User2", first_name: "First2", last_name: "Last2", email: "[email protected]", register_dt: "02/01/2024", expiration_dt: "02/01/2025", drpfunction: 2 },
        // Add more data as needed
    ];

    var source =
    {
        localdata: data,
        datatype: "array"
    };

    var dataAdapter = new $.jqx.dataAdapter(source);

    // This is particular 'column' part of my grid
    $("#jqxgrid").jqxGrid({
        width: 850,
        source: dataAdapter,
        pageable: true,
        autoheight: true,
        sortable: true,
        altrows: true,
        enabletooltips: true,
        editable: true,
        selectionmode: 'multiplecellsadvanced',
        columns: [
            { text: 'Username', datafield: 'user_name', width: 60 },
            { text: 'First Name', datafield: 'first_name', width: 80 },
            { text: 'Last Name', datafield: 'last_name', width: 80 },
            { text: 'Email', datafield: 'email', width: 150 },
            { text: 'Registered Date', datafield: 'register_dt', cellsformat: 'MM/dd/yyyy', width: 90 },
            { text: 'Expiry Date', datafield: 'expiration_dt', cellsformat: 'MM/dd/yyyy', width: 90 },
            { text: "Function", datafield: 'drpfunction', width: 80, columntype: 'dropdownlist',
              createeditor: function (row, cellvalue, editor) {
                  editor.jqxDropDownList({
                      source: drpSource,
                      displayMember: 'name',
                      valueMember: 'id',
                      filterable: false,
                      placeHolder: 'Choose…',
                      autoDropDownHeight: true
                  });
              },
              initeditor: function (row, cellvalue, editor) { 
                  editor.jqxDropDownList('selectItem', cellvalue);
              },
              cellvaluechanging: function (row, datafield, columntype, oldvalue, newvalue) {
                  if (newvalue != oldvalue) {
                      var item = drpSource.find(function(element) {
                          return element.name == newvalue;
                      });
                      if (item) {
                          return item.id;
                      }
                  } else {
                      return oldvalue;
                  }
              }
           }
        ]
    });
});