jQWidgets Forums

Tagged: displayMember, DropDownList, treegrid, valueMember

This topic contains 4 replies, has 3 voices, and was last updated by alastairwalker 5 years, 7 months ago.

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

Author

treegrid with dropdownlist having value and display members Posts

September 4, 2019 at 9:06 am treegrid with dropdownlist having value and display members #106658

Participant

I am having problems in getting a dropdownlist to display correctly in treegrid, where the dropdownlist has value and display members.

I have based my code on the example given in this forum for displaying a DDL in the context of a treegrid.

I have adapted it to try to display an additional column, called ‘row_status’, of integer type.
The example code I am working with is:


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
    <title id='Description'>In this sample is illustrated how to create custom editors for jqxTreeGrid. The "Name" and "Budget" columns use the jqxDropDownList and jqxSlider widgets as a cell editors. 
    </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/jqxtreegrid.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", "budget": "1230000", "location": "Las Vegas","row_status": "-1",
                    "children":
                     [
                         {
                             "id": "2", "name": "Finance Division", "budget": "423000", "location": "San Antonio","row_status": "1",
                             "children":
                             [
                                 { "id": "3", "name": "Accounting Department", "budget": "113000", "location": "San Antonio","row_status": "2" },
                                 {
                                     "id": "4", "name": "Investment Department", "budget": "310000", "location": "San Antonio","row_status": "3",
                                     children:
                                     [
                                         { "id": "5", "name": "Banking Office", "budget": "240000", "location": "San Antonio","row_status": "4" },
                                         { "id": "6", "name": "Bonds Office", "budget": "70000", "location": "San Antonio","row_status": "5" },
                                     ]
                                 }
                             ]
                         },
                         {
                             "id": "7", "name": "Operations Division", "budget": "600000", "location": "Miami","row_status": "6",
                             "children":
                             [
                                 { "id": "8", "name": "Manufacturing Department", "budget": "300000", "location": "Miami","row_status": "7" },
                                 { "id": "9", "name": "Public Relations Department", "budget": "200000", "location": "Miami","row_status": "-1" },
                                 { "id": "10", "name": "Sales Department", "budget": "100000", "location": "Miami" ,"row_status": "1"}
                             ]
                         },
                         { "id": "11", "name": "Research Division", "budget": "200000", "location": "Boston","row_status": "2" }
                     ]
                }
            ];

            var source =
             {
                 dataType: "json",
                 dataFields: [
                      { name: "name", type: "string" },
                      { name: "budget", type: "number" },
                      { name: "id", type: "number" },
                      { name: "children", type: "array" },
                      { name: "location", type: "string" },
                      { name: "row_status", type: "number" }
                 ],
                 hierarchy:
                     {
                         root: "children"
                     },
                 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("#treegrid").jqxTreeGrid(
           {
              width: 900,
              source: dataAdapter,
              altRows: true,
              autoRowHeight: false,
              ready: function () {
                  // Expand rows with ID = 1, 2 and 7
                  jQuery("#treegrid").jqxTreeGrid('expandRow', 1);
                  jQuery("#treegrid").jqxTreeGrid('expandRow', 2);
                  jQuery("#treegrid").jqxTreeGrid('expandRow', 7);
              },
              editable: true,
              columns: [
               { text: 'ID', editable: false, dataField: 'id', width: 150 },
               {
                   text: 'Name', 
                   dataField: 'name', 
                   width: 250, 
                   columnType: "template",
                   createEditor: function (row, cellvalue, editor, cellText, width, height) 
                   {
                       editor.jqxDropDownList({autoDropDownHeight: true, source: source, width: '100%', height: '100%' });
                   },
                   initEditor: function (row, cellvalue, editor, celltext, width, height) {
                       // set the editor's current value. The callback is called each time the editor is displayed.
                       editor.jqxDropDownList('selectItem', cellvalue);
                   },
                   getEditorValue: function (row, cellvalue, editor) {
                       // return the editor's value.
                       return editor.val();
                   }
               },
               {
                   text: 'Budget', align: 'right', cellsAlign: 'right', cellsFormat: 'c2', columnType: "template", dataField: 'budget', width: 200,
                   createEditor: function (row, cellvalue, editor, cellText, width, height) {
                       // construct the editor. 
                       editor.jqxSlider({
                           showTicks: false, min: 0, max: 1250000, width: width, height: height, tooltip: true, tooltipFormatFunction: function (value) {
                               return jQuery.jqx.formatNumber(value, "c2");
                           }
                       });
                   },
                   initEditor: function (row, cellvalue, editor, celltext, width, height) {
                       // set the editor's current value. The callback is called each time the editor is displayed.
                       var value = parseInt(cellvalue);
                       if (isNaN(value)) value = 0;
                       editor.jqxSlider('setValue', value);
                   },
                   getEditorValue: function (row, cellvalue, editor) {
                       // return the editor's value.
                       return editor.val();
                   }
               },
               { text: 'Location', dataField: 'location' },
               { text: 'Row Status', dataField: 'row_status', 
                 columnType: "template",
                 createEditor: function (row, cellvalue, editor, cellText, width, height) 
                   {
                       editor.jqxDropDownList({autoDropDownHeight: true, source: rowstatus, valueMember: 'primaryindex',displayMember: 'label', width: '100%', height: '100%' });
                   },
                   initEditor: function (row, cellvalue, editor, celltext, width, height) 
                   {
                       editor.jqxDropDownList('selectItem', cellvalue);
                   },
                   getEditorValue: function (row, cellvalue, editor) {
                       return editor.val();
                   }
                }
              ]
          });
        });
    </script>
</head>
<body class='default'>
    <div id="treegrid"></div>
</body>
</html>

The specific steps I have taken is are follows:
a) I have extended the definition of the data array to also support row_status with integer values.
b) I have added rowstatus data for the dropdownlist values.
c) I have extended the dataFields definition to support the row_status item.
d) I have added createEditor, InitEditor and getEditorValue editors.

The specific problem I have is that when the fragment is displayed, the row_status values show up as integer values, i.e. the underlying data values in the data array. It should display the label values as in the rowstatus data array.

The strange thing is, is that this code works correctly in jqxGrid context, but I seem to have problems with it in the jqxTreegrid context.

Perhaps I am missing something?

Any guidance here will be really appreciated!

Alastair

September 11, 2019 at 9:25 am treegrid with dropdownlist having value and display members #106718

Hristo

Participant

Hello Alastair,

Please, take a look at this example:

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Data Filtering</title>
    <meta name="description" content="Filtering allows you to display a subset of the records in the data source that meet a particular criteria. When filtering is applied to a TreeGrid, displayed records are restricted to those that meet the current filter criteria.
        You can filter data against single or multiple columns. End-users can apply filtering by selecting a column's value from the filter dropdown, typing a filter value into the search field and clicking the search button.">
    <link rel="stylesheet" href="../../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="../../scripts/jquery-1.12.4.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdatatable.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxtreegrid.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script type="text/javascript">
        $(document).ready(function ()
        {
            var data = [
              {
                  "id": "1", "name": "Corporate Headquarters", "budget": "1230000", "location": "Las Vegas", "row_status": "-1",
                  "children":
                  [
                    {
                        "id": "2", "name": "Finance Division", "budget": "423000", "location": "San Antonio", "row_status": "1",
                        "children":
                        [
                          { "id": "3", "name": "Accounting Department", "budget": "113000", "location": "San Antonio", "row_status": "2" },
                          {
                              "id": "4", "name": "Investment Department", "budget": "310000", "location": "San Antonio", "row_status": "3",
                              children:
                              [
                                { "id": "5", "name": "Banking Office", "budget": "240000", "location": "San Antonio", "row_status": "4" },
                                { "id": "6", "name": "Bonds Office", "budget": "70000", "location": "San Antonio", "row_status": "5" },
                              ]
                          }
                        ]
                    },
                    {
                        "id": "7", "name": "Operations Division", "budget": "600000", "location": "Miami", "row_status": "6",
                        "children":
                        [
                          { "id": "8", "name": "Manufacturing Department", "budget": "300000", "location": "Miami", "row_status": "7" },
                          { "id": "9", "name": "Public Relations Department", "budget": "200000", "location": "Miami", "row_status": "-1" },
                          { "id": "10", "name": "Sales Department", "budget": "100000", "location": "Miami", "row_status": "1" }
                        ]
                    },
                    { "id": "11", "name": "Research Division", "budget": "200000", "location": "Boston", "row_status": "2" }
                  ]
              }
            ];

            var source =
                {
                    dataType: "json",
                    dataFields: [
                      { name: "name", type: "string" },
                      { name: "budget", type: "number" },
                      { name: "id", type: "number" },
                      { name: "children", type: "array" },
                      { name: "location", type: "string" },
                      { name: "row_status", type: "number" },
                      { name: "row_label", type: "string" }
                    ],
                    hierarchy:
                    {
                        root: "children"
                    },
                    localData: data,
                    id: "id"
                };

            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 getValueByKey = function (key)
            {
                for (let itemStatus of rowstatus) {
                    var currentKey = itemStatus.primaryindex;

                    if (currentKey == key) {
                        return itemStatus.label;
                    }
                }
            };

            var changeNestedRecords = function (records)
            {
                for (item of records) {
                    if (item.row_label == undefined) {
                        item.row_label = getValueByKey(item.row_status);
                    }

                    if (item.children) {
                        changeNestedRecords(item.children);
                    } else {
                        var status = item.row_status;
                        item.row_label = getValueByKey(item.row_status);
                    }

                }
            };

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

                    return records;
                }
            });
            
            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("#treegrid").jqxTreeGrid(
              {
                  width: 500,
                  source: dataAdapter,
                  altRows: true,
                  autoRowHeight: false,
                  ready: function ()
                  {
                      // Expand rows with ID = 1, 2 and 7
                      jQuery("#treegrid").jqxTreeGrid('expandRow', 1);
                      jQuery("#treegrid").jqxTreeGrid('expandRow', 2);
                      jQuery("#treegrid").jqxTreeGrid('expandRow', 7);
                  },
                  editable: true,
                  columns: [
                    { text: 'ID', editable: false, dataField: 'id', width: 65 },
                    {
                      text: 'Name',
                      dataField: 'name',
                      width: 110,
                      columnType: "template",
                      createEditor: function (row, cellvalue, editor, cellText, width, height)
                      {
                        editor.jqxDropDownList({autoDropDownHeight: true, source: source, width: '100%', height: '100%' });
                      },
                      initEditor: function (row, cellvalue, editor, celltext, width, height) {
                        // set the editor's current value. The callback is called each time the editor is displayed.
                        editor.jqxDropDownList('selectItem', cellvalue);
                      },
                      getEditorValue: function (row, cellvalue, editor) {
                        // return the editor's value.
                        return editor.val();
                      }
                    },
                    {
                      text: 'Budget', align: 'right', cellsAlign: 'right', cellsFormat: 'c2', columnType: "template", dataField: 'budget', width: 110,
                      createEditor: function (row, cellvalue, editor, cellText, width, height) {
                        // construct the editor.
                        editor.jqxSlider({
                          showTicks: false, min: 0, max: 1250000, width: width, height: height, tooltip: true, tooltipFormatFunction: function (value) {
                            return jQuery.jqx.formatNumber(value, "c2");
                          }
                        });
                      },
                      initEditor: function (row, cellvalue, editor, celltext, width, height) {
                        // set the editor's current value. The callback is called each time the editor is displayed.
                        var value = parseInt(cellvalue);
                        if (isNaN(value)) value = 0;
                        editor.jqxSlider('setValue', value);
                      },
                      getEditorValue: function (row, cellvalue, editor) {
                        // return the editor's value.
                        return editor.val();
                      }
                    },
                    { text: 'Location', dataField: 'location', width: 80 },
                    {
                        text: 'Row Status', dataField: 'row_status', displayField: "row_label",
                        columnType: "template",
                        createEditor: function (row, cellvalue, editor, cellText, width, height)
                        {
                            editor.jqxDropDownList({ autoDropDownHeight: true, source: rowstatus, valueMember: 'primaryindex', displayMember: 'label', width: '100%', height: '100%' });
                        },
                        initEditor: function (row, cellvalue, editor, celltext, width, height)
                        {
                            editor.jqxDropDownList('selectItem', cellvalue);
                        },
                        getEditorValue: function (row, cellvalue, editor)
                        {
                            var item = editor.jqxDropDownList('getSelectedItem');
                            console.log(item)
                            return item.label;
                        }
                    }
                  ]
              });

        });
    </script>
</head>
<body class='default'>
    <div id="treegrid"></div>
</body>
</html>

I hope this will help.

Best Regards,
Hristo Hristov

jQWidgets team
https://www.jqwidgets.com

September 11, 2019 at 12:07 pm treegrid with dropdownlist having value and display members #106724

alastairwalker

Participant

Thank you – Hristo, the revised fragment certainly works.

I am, however, curious, about this code fragment:


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

                        return records;
                    }
                });

I have looked at the API for the dataAdapter, but can find no reference the functions loadComplete, and beforeLoadComplete.

Can you point me to any documentation that supports this solution?

My concern is that I will have quite a few columns that need to be treated in the same way, so I will need to correctly understand the principle behind your solution.

Again, many thanks!

Alastair

September 12, 2019 at 7:14 am treegrid with dropdownlist having value and display members #106737

Peter Stoev

Keymaster

Hi Alastair,

Please, refer to https://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxdataadapter/jquery-data-adapter.htm. The functions are explained there.

Best Regards,
Peter

jQWidgets team
https://www.jqwidgets.com

September 12, 2019 at 2:06 pm treegrid with dropdownlist having value and display members #106745

alastairwalker

Participant