Custom combobox display

I have a list of values that contains both a value and a display value that I want to display in a combobox. For example, I have a list of employees where the value is their id number, and the display is their name: (value: 90, displayValue: Kevin).
Is it possible, either through combobox or a custom editor, to have the display values shown, but the underlying value bound to something else?

Richselect and Combo controls work the same way as you described. But the names of properties are different:

  • id - the actual value
  • value - the value for display

For example:

view: "combo",
options:[ 
   ...
	{ id: 90, value: "Kevin" },
	{ id: 91, value: "Peter" }, 
   ...
],...

One more question regard this. I am using the combobox in a datatable. The values appear correctly in the combobox, but once I select the value and the editor closes, the datatable shows the id instead of the value (ex. 90 instead of Kevin). How can i get the datatable to show the display value instead of the id?

Did you use the same solution for editor configuring like in “combo” editor demo?

http://docs.webix.com/samples/15_datatable/04_editing/15_combo.html

Value (not id) is displayed in this case

{ id:"year",	editor:"combo", collection:years,
  header:"Released" , width:80},

collection attribute defines the options collection for the column. It will be used to translate ids to text values.

After going through my code, I found that the reason the id was showing and not the value is due to my code dynamically binding the combobox values on opening the editor, possibly incorrectly.

As the available combobox options are dependent on values in other cells, I’m currently trying to get the values with this code:

dataTable.attachEvent('onBeforeEditStart', function (eventInfo) {
var column = gridData.getColumnByName(eventInfo.column);
//getting row data

//get combobox values
   $.ajax({
	dataType: "json",
	url: "/timecard/GetCellPossibleValues",
	type: 'POST',
	contentType: 'application/json',
	data: rowData,
	success: function (response) {
        column.options = [];
	    $.each(response.PossibleValues, function (valueIndex, valueObj) {
	       column.collection.push({ id: valueObj.Value, value: valueObj.Label });
	    });
        }
  });
}

With my code, the combobox popup works normally, but shows the id upon close. How do I correctly redefine the options of a datatable combobox?

Try to configure collection like next

var data = new webix.DataCollection({});
webix.ui({
   view:"datatable",
   columns:[
      { id:"combo", options: data },
   /*other config*/
})

and to load options in the collection you can use
data.load("/timecard/GetCellP)ossibleValues");
or
data.add( in the loop

Hi, your suggestion worked and now my options are rebinding correctly. I do have one question though, is it possible to store separate options for each row?

For example given different lists of employees for company 1, 2, … etc., I want to show different combobox options in the Employee column for each row.

Currently I have options defined in the columns configuration, and I can only use one list at a time, and overwriting the options list makes values in other rows dissappear.

Check

You can use a select list with all possible options, but filter it just before editing to show only options that is related to the some other value in the same row.

Hi, thank you for that code sample, it has really helped. I just have one problem. The getPopup() function is throwing a “getPopup() is not a function” error when I try to call this.getEditor().getPopup().

I’m initializing the options with an empty Data Collection as previously suggested and I’m populating the values of the data collection in an “onBeforeEditStart” event.

Check http://webix.com/snippet/dc1cec32

It is the same snippet but with datacollection for options, and it works correctly for me.

If issue still occurs for you, please share a snippet or a demo link.

I’ve tried copying your code snippet directly into my code, and it still does not work on my end. Upon opening the subgroup combobox I get a “Uncaught TypeError: this.getEditor(…).getPopup is not a function” error. I can’t share a demo link, but here is that I have in my code right now.

The difference from your code snippet is that I am also using AngularJS with my code to place the table onto the page, and I am currently using the Combo editor with v.2.3.14 of the trial version of Webix.

hrimApp.directive('timecard', ['$http', '$rootScope', function ($http, $rootScope) {
	return {
	    template:
            '<div id="Timecard"></div>',
	    restrict: 'E',
	    replace: true,
	    link: function (scope, element, attrs, ctrl) {

	        $('#' + scope.crewTimecardId).html("<div style='width:500px; height: 500px'></div>");
	        var dc = new webix.DataCollection();

	        dataTable = webix.ui({
	            container: "Timecard",
	            id: "timecard",
	            rows: [
                  {
                      view: "datatable", columns: [
                      { id: "group", editor: "combo", options: dc },
                      {
                          id: "subgroup", editor: "combo", width: 200, options: [
                          { id: "a1", value: "Sub - Alpha 1", master: "Alfa" },
                          { id: "a2", value: "Sub - Alpha 1", master: "Alfa" },
                          { id: "b1", value: "Sub - Beta 1", master: "Beta" },
                          { id: "b2", value: "Sub - Beta 1", master: "Beta" },
                          { id: "c3", value: "Sub - Gamma 1", master: "Gamma" },
                          { id: "c4", value: "Sub - Gamma 1", master: "Gamma" }
                          ]
                      }
                      ], editable: true, data: [
                        { group: "Alfa", subgroup: "a1" }
                      ], on: {
                          onAfterEditStart: function (id) {
                              if (id.column === "subgroup") {
                                  this.getEditor().getPopup().getList().filter("master", this.getItem(id.row).group);
                              }
                          }
                      }
                  }
	            ],
	            height: 500,
                width: 500
	        });

	        dc.parse(["Alfa", "Beta", "Gamma"]);
	        
	    }
	}
}]);

Hi, I just noticed that if I take your code and change the items from richselect to combo on the snippet, that I run into the problem. In the snippet, subgroup does not work if it is set as a combo editor. Mainly, I need it to be a combo for the autocomplete functionality.

http://webix.com/snippet/af075a37

Check http://webix.com/snippet/df31f8b1

We will fix API of combo editor in the next update, so it will have the getPopup method, similar to a richselect

Thank you so much maksim. I finally got this working completely as needed.