jQWidgets Forums
Forum Replies Created
-
Author
-
Hi Peter,
Could you please respond on my last thread.
Thanks,
GauravHi Peter,
Thanks for pointing me out. This issue is now resolved by setting rowinfo.detailsHeight value of initRowDetails API.
I also need nested to nested grid which I am trying through below code but getting error
Uncaught Error: Invalid Selector! Please, check whether the used ID or CSS Class name is correct.
Code Example
<!DOCTYPE html> <html lang="en"> <head> <title id="Description">Data Binding to local data in jqxDataTable</title> <meta name="description" content="This sample demonstrates how we can bind jQWidgets DataTable widget to local Data by using jQWidgets DataAdapter plugin."> <link rel="stylesheet" href="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/styles/jqx.base.css" type="text/css" /> <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/scripts/jquery-1.11.1.min.js"></script> <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxdatatable.js"></script> <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/scripts/demos.js"></script> <script type="text/javascript"> $(document).ready(function () { // prepare the data var data = new Array(); var nestedTables = new Array(); var firstNames = [ "Andrew", "Nancy", "Shelley", "Regina", "Yoshi", "Antoni", "Mayumi", "Ian", "Peter", "Lars", "Petra", "Martin", "Sven", "Elio", "Beate", "Cheryl", "Michael", "Guylene" ]; var lastNames = [ "Fuller", "Davolio", "Burke", "Murphy", "Nagase", "Saavedra", "Ohno", "Devling", "Wilson", "Peterson", "Winkler", "Bein", "Petersen", "Rossi", "Vileid", "Saylor", "Bjorn", "Nodier" ]; var productNames = [ "Black Tea", "Green Tea", "Caffe Espresso", "Doubleshot Espresso", "Caffe Latte", "White Chocolate Mocha", "Cramel Latte", "Caffe Americano", "Cappuccino", "Espresso Truffle", "Espresso con Panna", "Peppermint Mocha Twist" ]; var priceValues = [ "2.25", "1.5", "3.0", "3.3", "4.5", "3.6", "3.8", "2.5", "5.0", "1.75", "3.25", "4.0" ]; for (var i = 0; i < 4; i++) { var row = {}; var productindex = Math.floor(Math.random() * productNames.length); var price = parseFloat(priceValues[productindex]); var quantity = 1 + Math.round(Math.random() * 10); row["firstname"] = firstNames[Math.floor(Math.random() * firstNames.length)]; row["lastname"] = lastNames[Math.floor(Math.random() * lastNames.length)]; row["productname"] = productNames[productindex]; row["price"] = price; row["quantity"] = quantity; row["total"] = price * quantity; data[i] = row; } var source = { localData: data, dataType: "array", dataFields: [ { name: 'firstname', type: 'string' }, { name: 'lastname', type: 'string' }, { name: 'productname', type: 'string' }, { name: 'quantity', type: 'number' }, { name: 'price', type: 'number' }, { name: 'total', type: 'number' } ] }; var initRowDetails1 = function (id, row, element, rowinfo) { element.append($("<div id='ddddd' style='margin: 10px;'></div>")); var nestedDataTable1 = $(element.children()[0]); rowinfo.detailsHeight = 280; var ordersSource1 = { localData: data, dataType: "array", dataFields: [ { name: 'firstname', type: 'string' }, { name: 'lastname', type: 'string' }, { name: 'productname', type: 'string' }, { name: 'quantity', type: 'number' }, { name: 'price', type: 'number' }, { name: 'total', type: 'number' } ] }; if (nestedDataTable1 != null) { var nestedDataTableAdapter1 = new $.jqx.dataAdapter(ordersSource1); nestedDataTable1.jqxDataTable({ pageable: true, source: nestedDataTableAdapter1, width: 820, pageable: true, columns: [ { text: 'Name', dataField: 'firstname', width: 200 }, { text: 'Last Name', dataField: 'lastname', width: 200 }, { text: 'Product', editable: false, dataField: 'productname', width: 180 }, { text: 'Quantity', dataField: 'quantity', width: 80, cellsAlign: 'right', align: 'right' }, { text: 'Unit Price', dataField: 'price', width: 90, cellsAlign: 'right', align: 'right', cellsFormat: 'c2' }, { text: 'Total', dataField: 'total', cellsAlign: 'right', align: 'right', cellsFormat: 'c2' } ] }); // store the nested Data Tables and use the Employee ID as a key. // nestedTables[id] = nestedDataTable; } } var initRowDetails = function (id, row, element, rowinfo) { element.append($("<div id = 'ddd' style='margin: 10px;'></div>")); var nestedDataTable = $(element.children()[0]); var filterGroup = new $.jqx.filter(); var filter_or_operator = 1; var filterValue = id; var filterCondition = 'equal'; var filter = filterGroup.createfilter('stringfilter', filterValue, filterCondition); rowinfo.detailsHeight = 280; var ordersSource = { localData: data, dataType: "array", dataFields: [ { name: 'firstname', type: 'string' }, { name: 'lastname', type: 'string' }, { name: 'productname', type: 'string' }, { name: 'quantity', type: 'number' }, { name: 'price', type: 'number' }, { name: 'total', type: 'number' } ] }; if (nestedDataTable != null) { var nestedDataTableAdapter = new $.jqx.dataAdapter(ordersSource); nestedDataTable.jqxDataTable({ width: 850, rowDetails: true, pageable: true, autoRowHeight:true, source: nestedDataTableAdapter, pageable: true, initRowDetails: initRowDetails1, columns: [ { text: 'Name', dataField: 'firstname', width: 200 }, { text: 'Last Name', dataField: 'lastname', width: 200 }, { text: 'Product', editable: false, dataField: 'productname', width: 180 }, { text: 'Quantity', dataField: 'quantity', width: 80, cellsAlign: 'right', align: 'right' }, { text: 'Unit Price', dataField: 'price', width: 90, cellsAlign: 'right', align: 'right', cellsFormat: 'c2' }, { text: 'Total', dataField: 'total', cellsAlign: 'right', align: 'right', cellsFormat: 'c2' } ] }); // store the nested Data Tables and use the Employee ID as a key. nestedTables[id] = nestedDataTable; } } var dataAdapter = new $.jqx.dataAdapter(source); $("#table").jqxDataTable( { width: 850, pageable: true, rowDetails: true, pagerButtonsCount: 10, autoRowHeight:true, source: dataAdapter, initRowDetails: initRowDetails, columns: [ { text: 'Name', dataField: 'firstname', width: 200 }, { text: 'Last Name', dataField: 'lastname', width: 200 }, { text: 'Product', editable: false, dataField: 'productname', width: 180 }, { text: 'Quantity', dataField: 'quantity', width: 80, cellsAlign: 'right', align: 'right' }, { text: 'Unit Price', dataField: 'price', width: 90, cellsAlign: 'right', align: 'right', cellsFormat: 'c2' }, { text: 'Total', dataField: 'total', cellsAlign: 'right', align: 'right', cellsFormat: 'c2' } ] }); }); </script> </head> <body class='default'> <div id="table"> </div> </body> </html>
When I debugged the code then i found that element value of initRowDetails1 function is empty. Could you please look into this issue.
Thanks,
GauravHi Peter,
Yes I have copy pasted code to verify the same but also added one parameter “autoRowHeight:true” to achieve auto height.
I have gone through this API documentation and tried height, autoRowHeight parameters. I ain’t able to find the exact changes(parameters) that will be required.
I will be very thankful to you if you please point me out the related parameters.
Thanks,
GauravHi Peter,
Thanks for the quick response.
I have also tried below jqxDataTable example but not able to achieve the dynamic row details height.Could you please correct me to achieve the same.<!DOCTYPE html> <html lang="en"> <head> <title id="Description">Data Binding to local data in jqxDataTable</title> <meta name="description" content="This sample demonstrates how we can bind jQWidgets DataTable widget to local Data by using jQWidgets DataAdapter plugin."> <link rel="stylesheet" href="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/styles/jqx.base.css" type="text/css" /> <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/scripts/jquery-1.11.1.min.js"></script> <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxdatatable.js"></script> <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/scripts/demos.js"></script> <script type="text/javascript"> $(document).ready(function () { // prepare the data var data = new Array(); var firstNames = [ "Andrew", "Nancy", "Shelley", "Regina", "Yoshi", "Antoni", "Mayumi", "Ian", "Peter", "Lars", "Petra", "Martin", "Sven", "Elio", "Beate", "Cheryl", "Michael", "Guylene" ]; var lastNames = [ "Fuller", "Davolio", "Burke", "Murphy", "Nagase", "Saavedra", "Ohno", "Devling", "Wilson", "Peterson", "Winkler", "Bein", "Petersen", "Rossi", "Vileid", "Saylor", "Bjorn", "Nodier" ]; var productNames = [ "Black Tea", "Green Tea", "Caffe Espresso", "Doubleshot Espresso", "Caffe Latte", "White Chocolate Mocha", "Cramel Latte", "Caffe Americano", "Cappuccino", "Espresso Truffle", "Espresso con Panna", "Peppermint Mocha Twist" ]; var priceValues = [ "2.25", "1.5", "3.0", "3.3", "4.5", "3.6", "3.8", "2.5", "5.0", "1.75", "3.25", "4.0" ]; for (var i = 0; i < 2; i++) { var row = {}; var productindex = Math.floor(Math.random() * productNames.length); var price = parseFloat(priceValues[productindex]); var quantity = 1 + Math.round(Math.random() * 10); row["firstname"] = firstNames[Math.floor(Math.random() * firstNames.length)]; row["lastname"] = lastNames[Math.floor(Math.random() * lastNames.length)]; row["productname"] = productNames[productindex]; row["price"] = price; row["quantity"] = quantity; row["total"] = price * quantity; data[i] = row; } var source = { localData: data, dataType: "array", dataFields: [ { name: 'firstname', type: 'string' }, { name: 'lastname', type: 'string' }, { name: 'productname', type: 'string' }, { name: 'quantity', type: 'number' }, { name: 'price', type: 'number' }, { name: 'total', type: 'number' } ] }; var initRowDetails = function (id, row, element, rowinfo) { element.append($("<div style='margin: 10px;'></div>")); var nestedDataTable = $(element.children()[0]); var filterGroup = new $.jqx.filter(); var filter_or_operator = 1; var filterValue = id; var filterCondition = 'equal'; var filter = filterGroup.createfilter('stringfilter', filterValue, filterCondition); var ordersSource = { localData: data, dataType: "array", dataFields: [ { name: 'firstname', type: 'string' }, { name: 'lastname', type: 'string' }, { name: 'productname', type: 'string' }, { name: 'quantity', type: 'number' }, { name: 'price', type: 'number' }, { name: 'total', type: 'number' } ] }; if (nestedDataTable != null) { var nestedDataTableAdapter = new $.jqx.dataAdapter(ordersSource); nestedDataTable.jqxDataTable({ pageable: true, source: nestedDataTableAdapter, width: 820,height:180, pageable: true, columns: [ { text: 'Name', dataField: 'firstname', width: 200 }, { text: 'Last Name', dataField: 'lastname', width: 200 }, { text: 'Product', editable: false, dataField: 'productname', width: 180 }, { text: 'Quantity', dataField: 'quantity', width: 80, cellsAlign: 'right', align: 'right' }, { text: 'Unit Price', dataField: 'price', width: 90, cellsAlign: 'right', align: 'right', cellsFormat: 'c2' }, { text: 'Total', dataField: 'total', cellsAlign: 'right', align: 'right', cellsFormat: 'c2' } ] }); // store the nested Data Tables and use the Employee ID as a key. // nestedTables[id] = nestedDataTable; } } var dataAdapter = new $.jqx.dataAdapter(source); $("#table").jqxDataTable( { width: 850, pageable: true, rowDetails: true, pagerButtonsCount: 10, autoRowHeight:true, source: dataAdapter, initRowDetails: initRowDetails, ready: function () { $("#table").jqxDataTable('showDetails', 1); }, columns: [ { text: 'Name', dataField: 'firstname', width: 200 }, { text: 'Last Name', dataField: 'lastname', width: 200 }, { text: 'Product', editable: false, dataField: 'productname', width: 180 }, { text: 'Quantity', dataField: 'quantity', width: 80, cellsAlign: 'right', align: 'right' }, { text: 'Unit Price', dataField: 'price', width: 90, cellsAlign: 'right', align: 'right', cellsFormat: 'c2' }, { text: 'Total', dataField: 'total', cellsAlign: 'right', align: 'right', cellsFormat: 'c2' } ] }); }); </script> </head> <body class='default'> <div id="table"> </div> </body> </html>
Hi Peter,
I also facing the same issue and stuck in the mid of my development.
Do we have any solution for this issue or can we customize plugin to support this feature in nested grid.
Thanks,
Gaurav -
AuthorPosts