jQuery UI Widgets › Forums › Grid › spreadsheet cell load data
This topic contains 9 replies, has 2 voices, and was last updated by Dimitar 9 years, 11 months ago.
-
Author
-
hello I have 2 problem
1.How do I load data into cells,Can you give an example?
2.How can do I load data into left side?Hello mustafa,
- Here is how to populate the spreadsheet through data adapter:
<!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.11.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/jqxdata.export.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.edit.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.columnsresize.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.export.js"></script> <script type="text/javascript" src="../../scripts/demos.js"></script> <script type="text/javascript"> $(document).ready(function () { var sourceColumnsAB = [{ A: 'A1', B: 'B1' }, { A: 'A2', B: 'B2' }, { A: 'A3', B: 'B3' }, { A: 'A4', B: 'B4' }, { A: 'A5', B: 'B5' }, { A: 'A6', B: 'B6' }, { A: 'A7', B: 'B7' }, { A: 'A8', B: 'B8' }, { A: 'A9', B: 'B9' }, { A: 'A10', B: 'B10'}]; // renderer for grid cells. var numberrenderer = function (row, column, value) { return '<div style="text-align: center; margin-top: 5px;">' + (1 + value) + '</div>'; } // create Grid datafields and columns arrays. var datafields = []; var columns = []; for (var i = 0; i < 26; i++) { var text = String.fromCharCode(65 + i); if (i == 0) { var cssclass = 'jqx-widget-header'; if (theme != '') cssclass += ' jqx-widget-header-' + theme; columns[columns.length] = { pinned: true, exportable: false, text: "", columntype: 'number', cellclassname: cssclass, cellsrenderer: numberrenderer }; } datafields[datafields.length] = { name: text }; columns[columns.length] = { text: text, datafield: text, width: 60, align: 'center' }; } var source = { datafields: [ { name: 'A', type: 'string' }, { name: 'B', type: 'string' } ], localdata: sourceColumnsAB, updaterow: function (rowid, rowdata) { // synchronize with the server - send update command } }; var dataAdapter = new $.jqx.dataAdapter(source); // initialize jqxGrid $("#jqxgrid").jqxGrid( { width: 850, source: dataAdapter, editable: true, columnsresize: true, selectionmode: 'multiplecellsadvanced', columns: columns }); $("#excelExport").jqxButton({ theme: theme }); $("#excelExport").click(function () { $("#jqxgrid").jqxGrid('exportdata', 'xls', 'jqxGrid', false); }); }); </script> </head> <body class='default'> <div id='jqxWidget'> <div id="jqxgrid"> </div> <div style='margin-top: 20px;'> <div style='float: left;'> <input type="button" value="Export to Excel" id='excelExport' /> </div> </div> </div> </body> </html>
- What do you mean by “load data into left side”?
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/hello dimitar thank you for reply I will test
2.question
my vessel list data
[0] VesselID : 198 VesselName : OZAN4 [1] VesselID : 199 VesselName : ThunderBirth and my stock list data [0] StockID: 1 StockName: OIL [1] StockID: 2 StockName: OIL2
I show left the stock names? and if possible I can stock Id ?and question
3. this my user grid
window.GridUserDataSource = { datafields: [ { name: 'UserID', type: 'string' }, { name: 'Name', type: 'string' }, { name: 'Surname', type: 'string' }, { name: 'Email', type: 'string' }, { name: 'UserGroupName', type: 'string' }, { name: 'UserGroupID', type: 'string' }, { name: 'IsActive', type: 'bool' }, { name: 'Password', type: 'string' } ], addrow: function (rowid, rowdata, position, commit) { commit(true); }, deleterow: function (rowid, commit) { commit(true); }, updaterow: function (rowid, newdata, commit) { commit(true); }, localdata: GetUsers(), async: false, datatype: "array", id: 'UserID', } var dataAdapter = new $.jqx.dataAdapter(window.GridUserDataSource, { formatData: function (data) { data.name_startsWith = $("#searchField").val(); return data; } } ); $("#GridUser").jqxGrid( { width: '100%', source: dataAdapter, height: '700px', pagesize: 30, pagesizeoptions: [25, 50, 100], theme: "Web", editable: false, columns: [ { text: 'Name', datafield: 'Name', width: '20%', }, { text: 'Surname', datafield: 'Surname', width: '20%', }, { text: 'Email', datafield: 'Email', width: '20%', }, { text: 'User Group', datafield: 'UserGroupName', width: '20%' }, { text: 'Active', datafield: 'IsActive', width: '20%', threestatecheckbox: false, columntype: 'checkbox' }, ], });
I want to get the data like this
thank you very much
thanks
and
the data does not appear
Where am I doing wrong?
thank you// renderer for grid cells. var numberrenderer = function (row, column, value) { return '<div style="text-align: center; margin-top: 5px;">' + (1 + value) + '</div>'; } var sourceColumnsAB = [{ VesselID : '1',StockKG: '55'},{VesselID : '2', StockKG: '88'}]; var vessels= GetVessels(); var columns = []; var theme = ""; for (var i = 0; i < vessels.length; i++) { var VesselName = vessels[i].Name; var VesselID = vessels[i].VesselID; if (i == 0) { var cssclass = 'jqx-widget-header'; if (theme != '') cssclass += ' jqx-widget-header-' + "web"; columns[columns.length] = { pinned: true, exportable: false, text: "", columntype: 'number', cellclassname: cssclass, cellsrenderer: numberrenderer }; } datafields[datafields.length] = { name: VesselName, value: VesselID }; columns[columns.length] = { text: VesselName, datafield: VesselID, width: 60, align: 'center' }; } var source = { datafields: [ { name: 'StockKG', type: 'string' }, { name: 'VesselID', type: 'string' } ], localdata: sourceColumnsAB, updaterow: function (rowid, rowdata) { // synchronize with the server - send update command } }; var dataAdapter = new $.jqx.dataAdapter(source); $("#GridEstimation").jqxGrid( { width: 850, source: dataAdapter, editable: true, columnsresize: true, selectionmode: 'multiplecellsadvanced', columns: columns }); }
Hi mustafa,
- You have a cellsrenderer definition (numberrenderer), which positions the text in the center of the cell. Remove
text-align: center;
and it should be on the left. In cellsrenderer you can also modify what is displayed and include information from other datafields if you like. - Is your “user grid” not loaded correctly? Are you sure GetUsers() returns the correct data?
- Does the image correspond to the code sample underneath it? There is no “VesselName” column in the image. Please clarify how many different grids you have and what are the issues with each of them. If needed, create separate topics for the questions that are not related to populating a spreadsheet grid with data.
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/hello dimitar
I want to show you my problem step by stepfirst 1
var stocks= GetStocks(); var numberrenderer = function (row, column, value) { return '<div margin-top: 5px;">' + (stocks[row].Name) + '</div>'; } var theme = ""; var datafields = []; var columns = []; for (var i = 0; i < data.length; i++) { var text = String.fromCharCode(65 + i); if (i == 0) { var cssclass = 'jqx-widget-header'; if (theme != '') cssclass += ' jqx-widget-header-' + theme; columns[columns.length] = { pinned: true, exportable: false, text: "", columntype: 'number', cellclassname: cssclass, cellsrenderer: numberrenderer }; } datafields[datafields.length] = { name: text }; columns[columns.length] = { text: text, datafield: text, width: 60, align: 'center' };
All does not appear
Which should I modified the css?2
example bind data
// renderer for grid cells. var numberrenderer = function (row, column, value) { return '<div style="text-align: center; margin-top: 5px;">' + (1 + value) + '</div>'; } var sourceColumnsAB = [{ VesselID : '1',StockKG: '55'},{VesselID : '2', StockKG: '88'}]; var vessels= GetVessels(); var columns = []; var theme = ""; for (var i = 0; i < vessels.length; i++) { var VesselName = vessels[i].Name; var VesselID = vessels[i].VesselID; if (i == 0) { var cssclass = 'jqx-widget-header'; if (theme != '') cssclass += ' jqx-widget-header-' + "web"; columns[columns.length] = { pinned: true, exportable: false, text: "", columntype: 'number', cellclassname: cssclass, cellsrenderer: numberrenderer }; } datafields[datafields.length] = { name: VesselName, value: VesselID }; columns[columns.length] = { text: VesselName, datafield: VesselID, width: 60, align: 'center' }; } var source = { datafields: [ { name: 'StockKG', type: 'string' }, { name: 'VesselID', type: 'string' } ], localdata: sourceColumnsAB, updaterow: function (rowid, rowdata) { // synchronize with the server - send update command } }; var dataAdapter = new $.jqx.dataAdapter(source); $("#GridEstimation").jqxGrid( { width: 850, source: dataAdapter, editable: true, columnsresize: true, selectionmode: 'multiplecellsadvanced', columns: columns }); }
hi dimitar
No need to answer the first questionShip names seems (headers)
But the knowledge of each vessel does not appear
examplevar sourceColumnsAB = [{ MasterID:1, VesselID : ‘1453’,StockKG: ’55’},{MasterID:2, VesselID : ‘1455’, StockKG: ’88’}];
Hi mustafa,
Your data is suitable for the following structure:
_____________________________ | | VesselName | VesselID| |1 | Name1 | ID1 | |2 | Name2 | ID2 | |...
and not:
_____________________________ | | Name1 | Name2 | ... |1 | | |
The issue comes from the fact that you are setting each VesselID value as a datafield, but you should be setting ‘VesselID’ (string) to achieve the first type of table.
If, however, it is indeed the second structure you wish to have, you can do the following to populate it:
$("#GridEstimation").jqxGrid({ width: 850, source: dataAdapter, editable: true, columnsresize: true, selectionmode: 'multiplecellsadvanced', columns: columns, ready: function() { for (var i = 0; i < vessels.length; i++) { var VesselID = vessels[i].VesselID; $("#GridEstimation").jqxGrid('setcellvalue', 0, VesselID, VesselID); } } });
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/ - Here is how to populate the spreadsheet through data adapter:
-
AuthorPosts
You must be logged in to reply to this topic.