jQuery UI Widgets Forums Grid Data Export Issue in Grid having Cascading Dropdown lists

This topic contains 3 replies, has 2 voices, and was last updated by  Rehan 6 years, 2 months ago.

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

  • Rehan
    Participant

    I have a grid which contains four columns, two of which are drop down lists
    1. Department
    2. Sub Department

    Values in Sub-department are dependent on the selection made in Department dropdown. Further, both the dropdown have their own data sources. Every thing is working fine, but when I try to export data of the grid, values in second dropdown (i.e.Subdepartment) are not exported (i.e. blank values).

    Code to reproduce the scenario is given under:

    
    {
    <!DOCTYPE html>
    
    <html>
    <head>
        <title>Demo</title>
        <link rel="stylesheet" href="jqwidgets/jqwidgets/styles/jqx.base.css" type="text/css" />
        <link rel="stylesheet" href="jqwidgets/jqwidgets/styles/jqx.metro.css" type="text/css" />
        <link rel="stylesheet" href="jqwidgets/jqwidgets/styles/jqx.office.css" type="text/css" />
        <link rel="stylesheet" href="jqwidgets/jqwidgets/styles/jqx.energyblue.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/jqwidgets/jqxcore.js"></script>
        <script type="text/javascript" src="jqwidgets/jqwidgets/jqxdata.js"></script>
        <script type="text/javascript" src="jqwidgets/jqwidgets/jqxbuttons.js"></script>
        <script type="text/javascript" src="jqwidgets/jqwidgets/jqxscrollbar.js"></script>
        <script type="text/javascript" src="jqwidgets/jqwidgets/jqxmenu.js"></script>
        <script type="text/javascript" src="jqwidgets/jqwidgets/jqxgrid.js"></script>
        <script type="text/javascript" src="jqwidgets/jqwidgets/jqxgrid.selection.js"></script>
        <script type="text/javascript" src="jqwidgets/jqwidgets/jqxgrid.edit.js"></script>
        <script type="text/javascript" src="jqwidgets/jqwidgets/jqxgrid.sort.js"></script>
        <script type="text/javascript" src="jqwidgets/jqwidgets/jqxgrid.columnsresize.js"></script>
        <script type="text/javascript" src="jqwidgets/jqwidgets/jqxlistbox.js"></script>
        <script type="text/javascript" src="jqwidgets/jqwidgets/jqxdropdownlist.js"></script>
        <script type="text/javascript" src="jqwidgets/jqwidgets/jqxgrid.filter.js"></script>
        <script type="text/javascript" src="jqwidgets/jqwidgets/jqxlistbox.js"></script>
        <script type="text/javascript" src="jqwidgets/jqwidgets/jqxcombobox.js"></script>
        <script type="text/javascript" src="jqwidgets/jqwidgets/jqxgrid.pager.js"></script>
        <script type="text/javascript" src="jqwidgets/jqwidgets/jqxdata.export.js"></script>
        <script type="text/javascript" src="jqwidgets/jqwidgets/jqxgrid.export.js"></script>
    </head>
    <body>
        <style>
            .green {
                color: black !important;
                background-color: #b6ff00 !important;
            }
        </style>
        <div>
            <button onclick="exportdata();">Export to CSV</button>
            <br />
        </div>
        <div id="mgrid"></div>
        <script type="text/javascript">
            var core;
            var deptlist = [];
            var subdeptlist = [];
            var studentlist = [];
            var observablearray;
            var editedrowidx = [];
    
            $(document).ready(function () { InitData();});
    
            function InitData() {
                //alert("InitLoad");
                var std = {};
                std.id = 218;
                std.nm = "Student 1";
                std.dp = 1;
                std.subdep = "B";
                studentlist.push(std);
    
                std = {};
                std.id = 219;
                std.nm = "Student 2";
                std.dp = 2;
                std.subdep = "C";
                studentlist.push(std);
    
                std = {};
                std.id = 219;
                std.nm = "Student 3";
                std.dp = 20;
                std.subdep = "C";
                studentlist.push(std);
    
                var dept = {};
                dept.id = 1;
                dept.dnm = "Computer";
                deptlist.push(dept);
    
                dept = {};
                dept.id = 2;
                dept.dnm = "Electronics";
                deptlist.push(dept);
    
                dept = {};
                dept.id = 3;
                dept.dnm = "Electrical";
                deptlist.push(dept);
    
                dept = {};
                dept.id = 4;
                dept.dnm = "Civil";
                deptlist.push(dept);
    
                var subdep = {};
                subdep.pdid = 1;
                subdep.sdid = "A";
                subdep.sdnm = "Computer 1";
                subdeptlist.push(subdep);
    
                subdep = {};
                subdep.pdid = 1;
                subdep.sdid = "B";
                subdep.sdnm = "Computer 2";
                subdeptlist.push(subdep);
    
                subdep = {};
                subdep.pdid = 2;
                subdep.sdid = "C";
                subdep.sdnm = "Electronics 1";
                subdeptlist.push(subdep);
    
                subdep = {};
                subdep.pdid = 0;
                subdep.sdid = "P";
                subdep.sdnm = "------";
                subdeptlist.push(subdep);
    
                creategrid();
    
            }
    
            function exportdata() {
                //$("#mgrid").jqxGrid('exportdata', 'xls', 'jqxGrid');
                var exportInfo = $("#mgrid").jqxGrid('exportdata', 'csv');
                var i;
                i = 0;
                console.log(exportInfo);
            }
    
            function creategrid() {
                editedrowidx = []; //initialize
                observablearray = new $.jqx.observableArray(studentlist, function (changed) {
                    // updateLog(this);
                    var x; //do nothing for now
                    x = 0;
                });
                var temp = 1;
    
                var srcDepartment =
    		    {
    		        localdata: deptlist,
    		        datatype: "array",
    		        datafields:
                    [
    				    { name: 'id', type: 'number' },
                        { name: 'dnm', type: 'string' }
                    ]
    		    };
    
                var departmentAdapter = new $.jqx.dataAdapter(srcDepartment, {
                    autoBind: true
                });
    
                var srcSubDepartment =
    		    {
    		        localdata: subdeptlist,
    		        datatype: "array",
    		        datafields:
                    [
    				    { name: 'pdid', type: 'number' },
                        { name: 'sdid', type: 'string' },
                        { name: 'sdnm', type: 'string' }
                    ]
    		    };
    
                var subdepartmentAdapter = new $.jqx.dataAdapter(srcSubDepartment, {
                    autoBind: true
                });
    
                var srcStudents =
                {
                    localdata: observablearray,
                    datatype: "obserableArray",
                    datafields:
                    [
                        { name: 'nm', type: 'string' },
                        { name: 'dp', type: 'number' },
                        { name: 'id', type: 'number' },
                        { name: 'xtest', value: 'dp', values: { source: departmentAdapter.records, value: 'id', name: 'dnm' } },
                        { name: 'subdep', type: 'string' },
                        { name: 'xtestsub', value: 'subdep', values: { source: subdepartmentAdapter.records, value: 'sdid', name: 'sdnm' } }
                    ]
                };
    
                var dataAdapter = new $.jqx.dataAdapter(srcStudents);
    
                $("#mgrid").jqxGrid(
                {
                    width: '500',
                    height: '600',
                    source: dataAdapter,
                    sortable: true,
                    columnsresize: true,
                    editable: true,
                    filterable: true,
                    pageable: false,
                    altrows: true,
                    editmode: 'click',
                    selectionmode: "multiplecellsadvanced",
                    theme: "office",
                    columns: [
                                {
                                    text: 'ID',
                                    datafield: 'id',
                                    width: 120,
                                    editable: false
                                },
                                {
                                    text: 'Name',
                                    datafield: 'nm',
                                    width: 120
                                },
                                {
                                    text: 'Department', datafield: 'dp', displayfield: 'xtest', columntype: 'dropdownlist',
                                    createeditor: function (row, value, editor) {
                                        editor.jqxDropDownList({ autoDropDownHeight: true, source: departmentAdapter, displayMember: 'dnm', valueMember: 'id' });
                                        editor.css({ 'background-color': '#F88379', 'color': '#FFFFFF' });
                                    },
                                    cellbeginedit: function (row, datafield, columntype, value) {
                                        console.log('BeginEdit: ' + value);
                                    },
                                    cellendedit: function (row, datafield, columntype, value) {
                                        console.log('EndEdit: ' + value);
                                    },
                                    cellvaluechanging: function (row, datafield, columntype, oldvalue, newvalue) {
                                        console.log("CellvalueChanging from " + oldvalue + " to " + newvalue.value);
                                        if (oldvalue != newvalue.value) {
                                            $("#mgrid").jqxGrid('setcellvalue', row, "subdep", "X");
                                            $("#mgrid").jqxGrid('setcellvalue', row, "xtestsub", "Please Choose:");
                                            // $("#mgrid").jqxGrid('updatebounddata');
                                            //$("#mgrid").jqxGrid('refresh');
                                        }
    
                                    }
                                },
                                {
                                    text: 'SubDepartment', datafield: 'subdep', displayfield: 'xtestsub', columntype: 'dropdownlist',
                                    cellclassname: function (row, columnfield, value) {
                                        if (value == "Please Choose:")
                                            return 'green';
                                    },
                                    initeditor: function (row, cellvalue, editor, celltext, cellwidth, cellheight) {
                                        var dept = $("#mgrid").jqxGrid('getcellvalue', row, 'dp');
                                        console.log("Department " + dept + " is selected");
                                        console.log("celltext: " + celltext);
                                        cascadesubdept = $.grep(subdeptlist, function (n, i) {
                                            return n.pdid == dept;
                                        });
    
                                        editor.jqxDropDownList({ autoDropDownHeight: true, source: cascadesubdept, displayMember: 'sdnm', valueMember: 'sdid' });
                                        if (celltext != "X") {
                                            var index = cascadesubdept.findIndex(p => p.sdid == celltext);
                                            editor.jqxDropDownList('selectIndex', index);
                                        }
                                    }
                                }
                    ]
                }
                                );
            }
    
        </script>
    
    </body>
    </html>
    
    }
    

    Any lead towards its solution will be highly appreciated. Thanks


    Rehan
    Participant

    Just an update…Different browsers, different behaviors.
    Export is working fine in Firefox, but the mentioned problem is occurring when I use Chrome.


    Stanislav
    Participant

    Hello Rehan,

    Here is an example of jqxGrid cascading comboboxes with export to CSV: Example

    Can you please send us a more clean and structured example for testing?

    Best Regards,
    Stanislav

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


    Rehan
    Participant

    Thanks for the reply.
    I have written the code in jsfiddle for the test. You can access it at Export Issue

    If you run it in Chrome and see output in console window, there will be no text for column Sub-Department, whereas other columns will be exported correctly.
    Please note I am using dropdownlist (not Combobox) and observable array in my test case.
    Thanks

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

You must be logged in to reply to this topic.