Dropdownlist in cell - not displaying displayMember - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: Display member, displayfield, DropDownList, grid cell

This topic contains 3 replies, has 2 voices, and was last updated by Peter Stoev 5 years, 2 months ago.

Viewing 4 posts - 1 through 4 (of 4 total)

Author

Dropdownlist in cell – not displaying displayMember Posts

October 3, 2019 at 12:59 pm Dropdownlist in cell – not displaying displayMember #106924

alastairwalker

Participant

I am trying to get a dropdownlist working in a grid cell.

I have set up two different examples, one that has no value member, and the second that has a value member.

The first DDL displays correctly, but I cannot seem to get the display value to appear in the second DDL example (row_status).

Clearly, I am missing something.


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
    <title id='Description'>In this sample is illustrated how to create custom editors for jqxGrid.'
    </title>
    <link rel="stylesheet" href="libraries/jqwidgetslibrary/jqwidgets/styles/jqx.base.css" type="text/css" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />	
    <script type="text/javascript" src="libraries/jqwidgetslibrary/jqwidgets/scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="libraries/jqwidgetslibrary/jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="libraries/jqwidgetslibrary/jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="libraries/jqwidgetslibrary/jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="libraries/jqwidgetslibrary/jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="libraries/jqwidgetslibrary/jqwidgets/jqxdatatable.js"></script>
    <script type="text/javascript" src="libraries/jqwidgetslibrary/jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="libraries/jqwidgetslibrary/jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="libraries/jqwidgetslibrary/jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="libraries/jqwidgetslibrary/jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="libraries/jqwidgetslibrary/jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="libraries/jqwidgetslibrary/jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="libraries/jqwidgetslibrary/jqwidgets/jqxinput.js"></script>
    <script type="text/javascript" src="libraries/jqwidgetslibrary/jqwidgets/jqxslider.js"></script>
    <script type="text/javascript">
        jQuery(document).ready(function () {
            var data = [
                {"id": "1", "name": "Corporate Headquarters","row_status": "-1"},
                {"id": "2", "name": "Finance Division", "row_status": "1"}
            ];
            var source =
             {
                 dataType: "json",
                 dataFields: [
                 	  { name: "id", type: "number" },
                      { name: "name", type: "string" },
                      { name: "row_status", type: "number" }
                 ],
                 localData: data,
                 id: "id"
             };

            var dataAdapter = new jQuery.jqx.dataAdapter(source, {loadComplete: function () {}});

			var rowstatus = [
			{primaryindex:"-1", label:"Unrated"}, 
			{primaryindex:"1", label:"Unconfirmed"}, 
			{primaryindex:"2", label:"Suspect"}, 
			{primaryindex:"3", label:"Confirmed"}, 
			{primaryindex:"4", label:"Obsolete"}, 
			{primaryindex:"5", label:"Changed"}, 
			{primaryindex:"6", label:"New"}, 
			{primaryindex:"7", label:"Baseline"}];

			var source = ["Corporate Headquarters", "Finance Division", "Accounting Department", "Investment Department",
            "Banking Office", "Bonds Office", "Operations Division", "Manufacturing Department", 
            "Public Relations Department", "Sales Department", "Research Division"];

           jQuery("#grid").jqxGrid(
           {
              width: 900,
              source: dataAdapter,

              editable: true,
              columns: [
               { text: 'ID', editable: false, dataField: 'id', width: 150 },
               {
                   text: 'Name', 
                   dataField: 'name', 
                   width: 250, 
                   columnType: "dropdownlist",
                   createEditor: function (row, cellvalue, editor, cellText, width, height) 
                   {
                       editor.jqxDropDownList({autoDropDownHeight: true, source: source });
                   }
               },
               { text: 'Row Status', 
               dataField: 'row_status', 
               displayfield:"row_status",
                 columnType: "dropdownlist",
                 createEditor: function (row, cellvalue, editor, cellText, width, height) 
                   {
                       editor.jqxDropDownList({autoDropDownHeight: true, source: rowstatus, valueMember: 'primaryindex',displayMember: 'label' });
                   }
                }
              ]
          });
        });
    </script>
</head>
<body class='default'>
    <div id="grid"></div>
</body>
</html>

Any help in getting the proper display member to appear as the row_status value will be appreciated!

Many thanks!
Alastair

October 3, 2019 at 5:38 pm Dropdownlist in cell – not displaying displayMember #106930

Peter Stoev

Keymaster

Hi Alastair,

To make it work, we need to implement the initeditor, geteditorvalue and cellsrenderer functions of the Grid.

   var data = [
                {"id": "1", "name": "Corporate Headquarters","row_status": "-1"},
                {"id": "2", "name": "Finance Division", "row_status": "1"}
            ];
            var source =
             {
                 dataType: "json",
                 dataFields: [
                 	  { name: "id", type: "number" },
                      { name: "name", type: "string" },
                      { name: "row_status", type: "number" }
                 ],
                 localData: data,
                 id: "id"
             };

            var dataAdapter = new jQuery.jqx.dataAdapter(source, {loadComplete: function () {}});

			var rowstatus = [
			{primaryindex:"-1", label:"Unrated"}, 
			{primaryindex:"1", label:"Unconfirmed"}, 
			{primaryindex:"2", label:"Suspect"}, 
			{primaryindex:"3", label:"Confirmed"}, 
			{primaryindex:"4", label:"Obsolete"}, 
			{primaryindex:"5", label:"Changed"}, 
			{primaryindex:"6", label:"New"}, 
			{primaryindex:"7", label:"Baseline"}];

			var source = ["Corporate Headquarters", "Finance Division", "Accounting Department", "Investment Department",
            "Banking Office", "Bonds Office", "Operations Division", "Manufacturing Department", 
            "Public Relations Department", "Sales Department", "Research Division"];

           jQuery("#grid").jqxGrid(
           {
              width: 900,
              source: dataAdapter,

              editable: true,
              columns: [
               { text: 'ID', editable: false, dataField: 'id', width: 150 },
               {
                   text: 'Name', 
                   dataField: 'name', 
                   width: 250, 
                   columnType: "dropdownlist",
                   createEditor: function (row, cellvalue, editor, cellText, width, height) 
                   {
                       editor.jqxDropDownList({autoDropDownHeight: true, source: source });
                   }
               },
               { text: 'Row Status', 
               datafield: 'row_status', 
               cellsrenderer: function(row, column, value) {
              	   var primaryindex = '' + value;
                   var primaryitem = rowstatus.find((item) => {
                        return item.primaryindex == primaryindex ? true : false;
                   });
                   
                   if (primaryitem) {
                   	   return '<div style="margin: 7px;">' + primaryitem.label + '</div>';
                   }
                   
                   return '';
               },
                 columnType: "dropdownlist",
                 initeditor: function(row, value, editor) {
                           editor.val(value);
               },
                 createEditor: function (row, cellvalue, editor, cellText, width, height) 
                   {
                       editor.jqxDropDownList({autoDropDownHeight: true, source: rowstatus, valueMember: 'primaryindex',displayMember: 'label' });
                   },
                       geteditorvalue: function (row, cellvalue, editor) {
                          // return the editor's value.
                          return editor.val();
                      }
                }
              ]
          });

Sample: http://jsfiddle.net/ej1d65t4/.

Hope this helps.
Best wishes,
Peter Stoev

jQWidgets Team
https://www.jqwidgets.com

October 4, 2019 at 1:31 pm Dropdownlist in cell – not displaying displayMember #106940

alastairwalker

Participant

Thank you for your help! It is really appreciated!

Alastair

October 7, 2019 at 8:05 am Dropdownlist in cell – not displaying displayMember #106947

Peter Stoev

Keymaster

Hi Alastair,