How to display the select box text?

[luckduck]

Hi

I want to display the text of the selected option in the edit state when it is in the general grid state.
The options value is an array of associated value label pairs.

Code: [Select]

        var data = [
            { rank: 1, company: 'Exxon Mobil', revenues: 339938.0, profits: 36130.0 },
            { rank: 2, company: 'Wal-Mart Stores', revenues: 315654.0, profits: 11231.0 },
            { rank: 3, company: 'Royal Dutch Shell', revenues: 306731.0, profits: 25311.0 },
            { rank: 4, company: 'BP', revenues: 267600.0, profits: 22341.0 }
        ];

  var CM = [
                { title: "Rank", width: 100, dataIndx: "rank", editor: {type: "select", prepend: {"":""}, options: [{"1":"one"}, {"2": "two"}, {"3": "three"}, {"4": "four"}]} },
                { title: "Company", width: 200, dataType: "string", dataIndx: "company" },
                { title: "Revenues", width: 150, dataType: "float", dataIndx: "revenues", format: '#.0' },
                { title: "Profits", width: 150, dataType: "float", dataIndx: "profits", format: '#.0' }
            ];


Below is the link of the jsfiddle:

https://jsfiddle.net/54vucynL/

Thank you.

[paramvir]

you mean to display the text instead of value of selected option in the cell?

Code: [Select]

                  getData: function(ui){
                  return ui.$cell.find("option:selected").text()
                  }

https://jsfiddle.net/kebv58yj/

[luckduck]

Thank you for your reply.

When generating the grid, if the data ranks 1, I want to display it as one.

And when I save, I want to save 1, not one.

Is there any possible way?

[paramvir]

Yes, please use common data structure for both column.editor.options and column.render callback.

Code: [Select]

  var rank = [{
    "1": "one"
  }, {
    "2": "two"
  }, {
    "3": "three"
  }, {
    "4": "four"
  }];


Code: [Select]

      render: function(ui) {
        var obj = rank.find(function(obj) {
          return obj[ui.cellData] ? true : false;
        })
        return obj ? Object.values(obj)[0] : null;
      },


Code: [Select]

      editor: {
        type: "select",
        prepend: {
          "": ""
        },
        options: rank
      }

https://jsfiddle.net/qtypn8r0/