Grid med dropdownlist from another array

[LeeParticipant]

Hi,

I need to create grid (with data from an array) with dropdownlist(for t.ex names, products fields) from a few another arrays for edit/create new row function. Is it possible? How?

Regards,
Lee

[Peter StoevKeymaster]

Hi Lee,

Here’s a sample which creates a DropDownList editor from another Array: http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/gridkeyvaluescolumnwitharray.htm?web

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[LeeParticipant]

Hi,

I cannot group the column with seperate datafield and displayfield t.ex. datafield: ‘countryCode’, displayfield: ‘Country’.
How to set data.groupcolumn.datafield??? Neither ‘countryCode’ nor ‘Country’ works. Thanks!

Best Regards,
Lee

[Peter StoevKeymaster]

Hi Lee,

Did you look at the posted sample? It has displayfield and datafield. However, in case you use old version, that functionality could be still not available.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

[LeeParticipant]

Hi Peter,

I did look at the posted sample and used lastest version. It display displayfield but that didnot work when I tried to group that column like this link

Best Regards,
Lee

[Peter StoevKeymaster]

Hi Lee,

Ok, then could you post a sample web page which demonstrates your scenario?

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

[LeeParticipant]

Hi Peter

Here is sample of code I used. Before I use datafield and displayfield, grouping function worked. But after that it doesn’t work for that column.

var groupsrenderer = function (text, group, expanded, data) {
                if (data.groupcolumn.datafield == 'date' || data.groupcolumn.datafield == 'staff' 
                    || data.groupcolumn.datafield == 'projectactivity' || data.groupcolumn.datafield == 'invoicedstatus' 
                    || data.groupcolumn.datafield == 'billable') {
                    if (data.subItems.length > 0) {
                        var aggregate = this.getcolumnaggregateddata("billablehours", ['sum'], true, data.subItems);
                    }
                    else {
                        var rows = new Array();
                        var getRows = function (group, rows) {
                            if (group.subGroups.length > 0) {
                                for (var i = 0; i < group.subGroups.length; i++) {
                                    getRows(group.subGroups[i], rows);
                                }
                            }
                            else {
                                for (var i = 0; i < group.subItems.length; i++) {
                                    rows.push(group.subItems[i]);
                                }
                            }
                        }
                        getRows(data, rows);
                        var aggregate = this.getcolumnaggregateddata("billablehours", ['sum'], true, rows);
                    }
                    
                    return '<div class="' + toThemeProperty('jqx-grid-groups-row') + '" style="position: absolute;"><span>' + text + ', </span>' + '<span class="' + toThemeProperty('jqx-grid-groups-row-details') + '">' + "Total" + ' (' + aggregate.sum + ')' + '</span></div>';
                }
                else {
                    return '<div class="' + toThemeProperty('jqx-grid-groups-row') + '" style="position: absolute;"><span>' + text + '</span>';
                }
            }
            
            // initialize jqxGrid
            $("#jqxgrid").jqxGrid(
            {
                width:1000,
                source: dataAdapter,
                theme: theme,
                groupable: true,
                groupsrenderer: groupsrenderer,
               // selectionmode: 'singlecell',
                showstatusbar: true,
                statusbarheight: 0,
                editable: true,
                filterable: true,
                sortable: true,
                altrows: true,             
                ready: function () {
                    addfilter();
                },
                autoshowfiltericon: true,
                showaggregates: true,
                
                columns: [
                  { text: 'Date', columntype: 'textbox', groupable: true, datafield: 'date', columntype: 'datetimeinput', cellsformat: 'yyyy.MM.dd', width: 120},
                  { text: 'Staff Name', groupable: true, datafield: 'staffid', displayfield:"staff", width: 150, columntype: 'dropdownlist', 
                        createeditor: function (row, value, editor) {
                            editor.jqxDropDownList({ source: staffnameList, displayMember: 'Name', valueMember: 'Id' });
                        } 
                    },
                  { text: 'Hours', groupable: true, datafield: 'billablehours', width: 120, cellsalign: 'center', cellsformat: 'n1', aggregates: ['sum', 'avg'], 
                    aggregatesrenderer: function (aggregates) {
                          var renderstring = "";
                          $.each(aggregates, function (key, value) {
                              var name = key == 'sum' ? 'Total' : 'Avg';
                              renderstring += '<div style="position: relative; margin: 4px; overflow: hidden;">' + name + ': ' + value +'</div>';
                          });
                          return renderstring;}},
                  { text: 'Billable', groupable: true, datafield: 'billable', width: 125, columntype: 'checkbox', 
                    aggregates: [{ 'Billable':
                          function (aggregatedValue, currentValue) {
                              if (currentValue) {
                                  return aggregatedValue + 1;
                              }
                              return aggregatedValue;
                          }
                      },
                      { 'Unbillable':
                          function (aggregatedValue, currentValue) {
                              if (!currentValue) {
                                  return aggregatedValue + 1;
                              }
                              return aggregatedValue;
                          }
                      }
                     ]
                  },
                  { text: 'Billable Des.', groupable: true, datafield: 'billabledescription', width: 150, columntype: 'textbox'},
                  { text: 'Project Activity', groupable: true, datafield: 'projectactivity', columntype: 'dropdownlist'},
                  
                ],
            });

Best regards,
Lee

[LeeParticipant]

HI,

Can you help me with group function doesn’t work with separate datafield and displayfield?

Best regards,
Lee

[Peter StoevKeymaster]

Hi,

The Grouping according to me works as expected for separate datafield and displayfield and below is a sample which demonstrates it:

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.10.1.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/jqxmenu.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.grouping.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcombobox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxpanel.js"></script>
    <script type="text/javascript" src="../../scripts/gettheme.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var theme = getDemoTheme();
            var employeesSource =
             {
                 datatype: "xml",
                 datafields: [
                     { name: 'FirstName', type: 'string' },
                     { name: 'LastName', type: 'string' }
                 ],
                 root: "Employees",
                 record: "Employee",
                 id: 'EmployeeID',
                 url: "../sampledata/employees.xml",
                 async: false
             };
             var employeesAdapter = new $.jqx.dataAdapter(employeesSource, {
                autoBind: true,
                beforeLoadComplete: function (records) {
                    var data = new Array();
                    // update the loaded records. Dynamically add EmployeeName and EmployeeID fields. 
                    for (var i = 0; i < records.length; i++) {
                        var employee = records[i];
                        employee.EmployeeName = employee.FirstName + " " + employee.LastName;
                        employee.EmployeeID = employee.uid;
                        data.push(employee);
                    }
                    return data;
                }
            });
            // prepare the data
            var ordersSource =
            {
                datatype: "xml",
                datafields: [
                    // name - determines the field's name.
                    // value - the field's value in the data source.
                    // values - specifies the field's values.
                    // values.source - specifies the foreign source. The expected value is an array.
                    // values.value - specifies the field's name in the foreign source. 
                    // values.name - specifies the field's value in the foreign source. 
                    // When the ordersAdapter is loaded, each record will have a field called "EmployeeName". The "EmployeeName" for each record comes from the employeesAdapter where the record's "EmployeeID" from orders.xml matches to the "EmployeeID" from employees.xml. 
                    { name: 'EmployeeName', value: 'EmployeeID', values: { source: employeesAdapter.records, value: 'EmployeeID', name: 'EmployeeName' } },
                    { name: 'EmployeeID', map: 'm\\:properties>d\\:EmployeeID' },
                    { name: 'ShippedDate', map: 'm\\:properties>d\\:ShippedDate', type: 'date' },
                    { name: 'Freight', map: 'm\\:properties>d\\:Freight', type: 'float' },
                    { name: 'ShipName', map: 'm\\:properties>d\\:ShipName' },
                    { name: 'ShipAddress', map: 'm\\:properties>d\\:ShipAddress' },
                    { name: 'ShipCity', map: 'm\\:properties>d\\:ShipCity' },
                    { name: 'ShipCountry', map: 'm\\:properties>d\\:ShipCountry' }
                ],
                root: "entry",
                record: "content",
                id: 'm\\:properties>d\\:OrderID',
                url: "../sampledata/orders.xml",
                pager: function (pagenum, pagesize, oldpagenum) {
                    // callback called when a page or page size is changed.
                }
            };
            var ordersAdapter = new $.jqx.dataAdapter(ordersSource);
            $("#jqxgrid").jqxGrid(
            {
                width: 670,
                source: ordersAdapter,
                theme: theme,
                selectionmode: 'singlecell',
                pageable: true,
                autoheight: true,
                groupable: true,
                groups: ['EmployeeName'],
                columns: [
                    { text: 'Employee Name', datafield: 'EmployeeID', displayfield: 'EmployeeName', editable: false, width: 150},
                    { text: 'Ship City', datafield: 'ShipCity', width: 150},
                    { text: 'Ship Country', datafield: 'ShipCountry', width: 150 },
                    { text: 'Ship Name', datafield: 'ShipName'}
                ]
            });
            $("#jqxgrid").on('cellselect', function (event) {
                var column = $("#jqxgrid").jqxGrid('getcolumn', event.args.datafield);
                var value = $("#jqxgrid").jqxGrid('getcellvalue', event.args.rowindex, column.datafield);
                var displayValue = $("#jqxgrid").jqxGrid('getcellvalue', event.args.rowindex, column.displayfield);
                $("#eventLog").html("<div>Selected Cell<br/>Row: " + event.args.rowindex + ", Column: " + column.text + ", Value: " + value + ", Label: " + displayValue + "</div>");
            });
            $("#jqxgrid").on('cellendedit', function (event) {
                var column = $("#jqxgrid").jqxGrid('getcolumn', event.args.datafield);
                if (column.displayfield != column.datafield) {
                    $("#eventLog").html("<div>Cell Edited:<br/>Index: " + event.args.rowindex + ", Column: " + column.text + "<br/>Value: " + event.args.value.value + ", Label: " + event.args.value.label
                        + "<br/>Old Value: " + event.args.oldvalue.value + ", Old Label: " + event.args.oldvalue.label + "</div>"
                        );
                }
                else {
                    $("#eventLog").html("<div>Cell Edited:<br/>Row: " + event.args.rowindex + ", Column: " + column.text + "<br/>Value: " + event.args.value
                        + "<br/>Old Value: " + event.args.oldvalue + "</div>"
                        );
                }
            });
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget'>
        <div id="jqxgrid">
        </div>
        <div style="font-size: 13px; "margin-top: 20px; font-family: Verdana, Geneva, 'DejaVu Sans', sans-serif;" id="eventLog"></div>
    </div>
</body>
</html>

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

[LeeParticipant]

Hi Peter,

Have you example using array. I used datafield and datadisplay but it doesn’t work for me

Best regards
Lee

[Author]

Posts