jQWidgets Forums

Tagged: #jqwidgets-grid, grid, javascript grid, jquery grid, jqx grid

This topic contains 6 replies, has 2 voices, and was last updated by Hristo 7 years, 5 months ago.

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

Author

JQX Nested Grid Issue Posts
August 23, 2017 at 10:01 am JQX Nested Grid Issue #95595

sanith
Participant

JQXWidgets Team,

We are trying to implement a nested grid in Polymer using JqxGrid (As shown in the demo of Nested Grid, with the same data).
Grid is rendering with parent details, but facing the following issues
1. Only first row is able to expand/collapse
2. Rest of the rows are not collapsing
3. Child grid is fixed in a position
4. Values of child grid are changing on scroll

Polymer Component
==========================
<link rel=”import” href=”https://polygit.org/components/polymer/polymer-element.html”>
<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/jqxmenu.js”></script>
<script type=”text/javascript” src=”http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxgrid.js”></script>
<script type=”text/javascript” src=”http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxgrid.selection.js”></script>
<script type=”text/javascript” src=”http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxgrid.filter.js”></script>
<script type=”text/javascript” src=”http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxgrid.sort.js”></script>

<dom-module id=”nested-grid”>
<template>

<head>
<link rel=”stylesheet” type=”text/css” href=”http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/styles/jqx.base.css”
/>
</head>

<body>
<div id=”nestedGrid”></div>
</body>
</template>

<script>
/**
* @customElement
* @polymer
*/
class NestedGrid extends Polymer.Element {
static get is() { return ‘nested-grid’; }
static get properties() {
return {
localData: Array,
source: Object,
ordersSource: Object,
employeesAdapter: Object
};
}

ready() {
super.ready();
var url = “http://www.jqwidgets.com/jquery-widgets-demo/demos/sampledata/employees.xml”;
this.source =
{
datafields: [
{ name: ‘FirstName’ },
{ name: ‘LastName’ },
{ name: ‘Title’ },
{ name: ‘Address’ },
{ name: ‘City’ }
],
root: “Employees”,
record: “Employee”,
id: ‘EmployeeID’,
datatype: “xml”,
async: false,
url: url
};
this.employeesAdapter = new $.jqx.dataAdapter(this.source);
var orderdetailsurl = “http://www.jqwidgets.com/jquery-widgets-demo/demos/sampledata/orderdetails.xml”;
this.ordersSource =
{
datafields: [
{ name: ‘EmployeeID’, type: ‘string’ },
{ name: ‘ShipName’, type: ‘string’ },
{ name: ‘ShipAddress’, type: ‘string’ },
{ name: ‘ShipCity’, type: ‘string’ },
{ name: ‘ShipCountry’, type: ‘string’ },
{ name: ‘ShippedDate’, type: ‘date’ }
],
root: “Orders”,
record: “Order”,
datatype: “xml”,
url: orderdetailsurl,
async: false
};
var ordersDataAdapter = new $.jqx.dataAdapter(this.ordersSource, { autoBind: true });
var orders = ordersDataAdapter.records;
var nestedGrids = new Array();
// create nested grid.
var initrowdetails = function (index, parentElement, gridElement, record) {
var id = record.uid.toString();
var grid = $($(parentElement).children()[0]);
nestedGrids[index] = grid;
var filtergroup = new $.jqx.filter();
var filter_or_operator = 1;
var filtervalue = id;
var filtercondition = ‘equal’;
var filter = filtergroup.createfilter(‘stringfilter’, filtervalue, filtercondition);
// fill the orders depending on the id.
var ordersbyid = [];
for (var m = 0; m < orders.length; m++) {
var result = filter.evaluate(orders[m][“EmployeeID”]);
if (result)
ordersbyid.push(orders[m]);
}
var nestedsource = {
datafields: [
{ name: ‘EmployeeID’, type: ‘string’ },
{ name: ‘ShipName’, type: ‘string’ },
{ name: ‘ShipAddress’, type: ‘string’ },
{ name: ‘ShipCity’, type: ‘string’ },
{ name: ‘ShipCountry’, type: ‘string’ },
{ name: ‘ShippedDate’, type: ‘date’ }
],
id: ‘OrderID’,
localdata: ordersbyid
}
var nestedGridAdapter = new $.jqx.dataAdapter(nestedsource);
if (grid != null) {
$(grid).jqxGrid({
source: nestedGridAdapter, width: 780, height: 200,
columns: [
{ text: ‘Ship Name’, datafield: ‘ShipName’, width: 200 },
{ text: ‘Ship Address’, datafield: ‘ShipAddress’, width: 200 },
{ text: ‘Ship City’, datafield: ‘ShipCity’, width: 150 },
{ text: ‘Ship Country’, datafield: ‘ShipCountry’, width: 150 },
{ text: ‘Shipped Date’, datafield: ‘ShippedDate’, width: 200 }
]
});
}
}
var renderer = function (row, column, value) {
return ‘<span style=”margin-left: 4px; margin-top: 9px; float: left;”>’ + value + ‘</span>’;
}
// create jqxgrid
$(this.$.nestedGrid).jqxGrid(
{
width: 850,
height: 365,
source: this.source,
rowdetails: true,
rowsheight: 35,
initrowdetails: initrowdetails,
rowdetailstemplate: { rowdetails: “<div id=’nestgrid’ style=’margin: 10px;’></div>”, rowdetailsheight: 220, rowdetailshidden: true },
ready: function () {
$(this).jqxGrid(‘showrowdetails’, 0);
},
columns: [
{ 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 }
]
});
}
}

window.customElements.define(NestedGrid.is, NestedGrid);
</script>
</dom-module>

Index.html
==============
<!doctype html>
<html lang=”en”>
<head>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes”>

<title>nested-grid</title>
<meta name=”description” content=”nested grid demo “>

<script src=”https://polygit.org/webcomponentsjs+1.0.0-rc.5/components/webcomponentsjs/webcomponents-loader.js”></script>

<link rel=”import” href=”./nested-grid.html”>
</head>
<body>
<nested-grid></nested-grid>
</body>
</html>

Thoughts? Suggested Examples would be greatly appreciated.

Thanks,
Sanith

August 23, 2017 at 10:52 am JQX Nested Grid Issue #95596

sanith
Participant

Please try the code in plunker
http://plnkr.co/edit/f5dHsBIhcIxTQQEggtr6?p=preview

Thanks,
Sanith

August 23, 2017 at 11:40 am JQX Nested Grid Issue #95599

sanith
Participant

When we try to launch the grid in dialog window. The row expand/collapse events are not at all triggering.
Please try the code in plunker
http://plnkr.co/edit/JXbEWyCpLNoHflMzXjmG?p=preview

Thanks,
Sanith

August 24, 2017 at 5:07 am JQX Nested Grid Issue #95621

sanith
Participant

JQXWidgets Team,

How can i resolve this problem?

Thanks,
Sanith

August 24, 2017 at 1:58 pm JQX Nested Grid Issue #95631

Hristo
Participant

Hello Sanith,

Unfortunately, we do not have experience with this library but I would like to suggest you one of our forum topics with a similar issue and one of our customers has a suggestion:
http://www.jqwidgets.com/community/topic/setting-selectedindex-in-markup/

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

September 18, 2017 at 5:33 am JQX Nested Grid Issue #96076

sanith
Participant

JQXWidgets Team,

The custom-elements for grid also shows the same error when wrapping inside a Polymer component.
How can i resolve this problem?

Thanks,
Sanith

September 19, 2017 at 9:48 am JQX Nested Grid Issue #96132

Hristo
Participant

Hello Sanith,

The previously posted message is still valid, we do not have experience with the Polymer library.
Please let me know if you have any other questions.

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com
Author

Posts

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

You must be logged in to reply to this topic.