jQuery UI Widgets › Forums › Grid › Nested Grid with inline data
This topic contains 2 replies, has 2 voices, and was last updated by ToddHaddaway 11 years ago.
-
Author
-
Greetings,
I’m new to jqwidgets and have found them very powerful and well documented. Thanks 🙂
For my application, I want a grid that contains a list of students. As a nested grid, I want to provided a list of their current classes. The examples of nested grids that I have seen make use of external files as the data source. What I would like to do is have my php code fetch the source data as the page is being built. So, with that said, I was wondering if there is an example of a nested grid where the data is provided “in-line” rather than referenced as an external file?
I have a drop down that I built with the data in-line (code below). I’m providing it as an example of what I mean.
Thanks for any input or direction 🙂
$(document).ready(function () {
var sourceMajor = [
“– Primary Major –“,
“Admin Sciences Acctng”,
“Africana Studies”,
“American Studies”,
“Ancient Studies”,
“Anthropology” ];
// Create a jqxDropDownList
$(“#jqxMajor”).jqxDropDownList({ source: sourceMajor, selectedIndex: 0, width: ‘300px’ });});
Hello ToddHaddaway,
Here is an example, based on the demo Nested Grids. The data for the nested grids is a local array.
<!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.2.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.filter.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.sort.js"></script> <script type="text/javascript" src="../../scripts/gettheme.js"></script> <script type="text/javascript"> $(document).ready(function () { var theme = ""; var url = "../sampledata/employees.xml"; var source = { datafields: [ { name: 'FirstName' }, { name: 'LastName' }, { name: 'Title' }, { name: 'Address' }, { name: 'City' } ], root: "Employees", record: "Employee", id: 'EmployeeID', datatype: "xml", async: false, url: url }; var employeesAdapter = new $.jqx.dataAdapter(source); // create nested grid. var initrowdetails = function (index, parentElement, gridElement, record) { var id = record.uid.toString(); var grid = $($(parentElement).children()[0]); var data = [ ["Maths", "Erwin Beurer"], ["Physics", "Robert Newman"], ["Phylosophy", "Eric Donovan"] ]; var inlineSource = { datafields: [ { name: 'class', type: 'string', map: '0' }, { name: 'teacher', type: 'string', map: '1' } ], id: 'id', localdata: data, datatype: 'array' }; if (grid != null) { grid.jqxGrid({ source: inlineSource, theme: theme, width: 600, autoheight: true, columns: [ { text: 'Class', datafield: 'class', width: "60%" }, { text: 'Teacher', datafield: 'teacher', width: "40%" } ] }); } } var photorenderer = function (row, column, value) { var name = $('#jqxgrid').jqxGrid('getrowdata', row).FirstName; var imgurl = '../../images/' + name.toLowerCase() + '.png'; var img = '<div style="background: white;"><img style="margin:2px; margin-left: 10px;" width="32" height="32" src="' + imgurl + '"></div>'; return img; } var renderer = function (row, column, value) { return '<span style="margin-left: 4px; margin-top: 9px; float: left;">' + value + '</span>'; } // creage jqxgrid $("#jqxgrid").jqxGrid( { width: 670, height: 365, source: source, theme: theme, rowdetails: true, rowsheight: 35, initrowdetails: initrowdetails, rowdetailstemplate: { rowdetails: "<div id='grid' style='margin: 10px;'></div>", rowdetailsheight: 120, rowdetailshidden: true }, ready: function () { $("#jqxgrid").jqxGrid('showrowdetails', 1); }, columns: [ { text: 'Photo', width: 50, cellsrenderer: photorenderer }, { text: 'First Name', datafield: 'FirstName', width: 100, cellsrenderer: renderer }, { text: 'Last Name', datafield: 'LastName', width: 100, cellsrenderer: renderer }, { text: 'Title', datafield: 'Title', width: 180, cellsrenderer: renderer }, { text: 'Address', datafield: 'Address', width: 300, cellsrenderer: renderer }, { text: 'City', datafield: 'City', width: 170, cellsrenderer: renderer } ] }); }); </script></head><body class='default'> <div id="jqxgrid"> </div></body></html>
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/Perfect! Thanks 🙂
-
AuthorPosts
You must be logged in to reply to this topic.