jQuery UI Widgets › Forums › Grid › Data Export Issue in Grid having Cascading Dropdown lists
Tagged: datagrid, DropDownList, export
This topic contains 3 replies, has 2 voices, and was last updated by Rehan 6 years, 11 months ago.
-
Author
-
I have a grid which contains four columns, two of which are drop down lists
1. Department
2. Sub DepartmentValues 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
Just an update…Different browsers, different behaviors.
Export is working fine in Firefox, but the mentioned problem is occurring when I use Chrome.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,
StanislavjQWidgets Team
http://www.jqwidgets.com/Thanks for the reply.
I have written the code in jsfiddle for the test. You can access it at Export IssueIf 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 -
AuthorPosts
You must be logged in to reply to this topic.