jQuery UI Widgets Forums Grid Dropdownlist in cell – not displaying displayMember

This topic contains 3 replies, has 2 voices, and was last updated by  Peter Stoev 1 year, 8 months ago.

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

  • 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


    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


    alastairwalker
    Participant

    Thank you for your help! It is really appreciated!

    Alastair


    Peter Stoev
    Keymaster

    Hi Alastair,

    Thank you for choosing jQWidgets!

    Best wishes,
    Peter Stoev

    jQWidgets Team
    https://www.jqwidgets.com

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

You must be logged in to reply to this topic.