jQWidgets Forums

Tagged: javascript grid, javascript nested grid, jquery grid, nested grid drag drop

This topic contains 3 replies, has 2 voices, and was last updated by ivailo 9 years, 5 months ago.

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

Author

Drag data from nested grid Posts
December 4, 2015 at 1:53 pm Drag data from nested grid #78911

deyavirup
Participant

The elements of my table are a nested grid and two normal grids:
Nested Grid :-
Outer grid having Id : #jqxgrid
Inner grid having Id : #grid
Inner grid having class : .innergrid
Normal grid 1 : #gamegrid
Normal grid 2 : #gamegrid2

Now I need 2 functions :-
1. Drag a row from outer grid to Normal grid 1
2. Drag a row from inner grid to Normal grid 2

And here is my code :

<!DOCTYPE html>
<html lang=”en”>
<head>
<link rel=”stylesheet” href=”C:/jqxWidgetProject/jqwidgets/styles/jqx.base.css” type=”text/css” />

<link rel=”stylesheet” href=”C:/jqxWidgetProject/jqwidgets/styles/jqx.darkblue.css” type=”text/css” />

<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js”></script>
<script type=”text/javascript” src=”C:/jqxWidgetProject/jqwidgets/jqxcore.js”></script>
<script type=”text/javascript” src=”C:/jqxWidgetProject/jqwidgets/jqxdata.js”></script>
<script type=”text/javascript” src=”C:/jqxWidgetProject/jqwidgets/jqxbuttons.js”></script>
<script type=”text/javascript” src=”C:/jqxWidgetProject/jqwidgets/jqxscrollbar.js”></script>
<script type=”text/javascript” src=”C:/jqxWidgetProject/jqwidgets/jqxmenu.js”></script>
<script type=”text/javascript” src=”C:/jqxWidgetProject/jqwidgets/jqxgrid.js”></script>
<script type=”text/javascript” src=”C:/jqxWidgetProject/jqwidgets/jqxgrid.selection.js”></script>
<script type=”text/javascript” src=”C:/jqxWidgetProject/jqwidgets/jqxgrid.sort.js”></script>
<script type=”text/javascript” src=”C:/jqxWidgetProject/jqwidgets/jqxgrid.grouping.js”></script>
<script type=”text/javascript” src=”C:/jqxWidgetProject/jqwidgets/jqxdragdrop.js”></script>
<script type=”text/javascript” src=”C:/jqxWidgetProject/jqwidgets/jqxcheckbox.js”></script>

<script type=”text/javascript”>
$(document).ready(function ()
{
var data = [
{
“ruleid”: “1001”,
“size”: “51”,
“ZScore”: “1.21839”,
“complexity”: “8”,
“constraints”: {
“constraint”: [
{
“varName”: “BirthWeight”,
“Min”: “2.500000”,
“Max”: “2.500000”
},
{
“varName”: “AgeMother”,
“Min”: “39.000000”,
“Max”: “39.000000”
},
{
“varName”: “AgeFather”,
“Min”: “35.000000”,
“Max”: “39.000000”
}
]
}
},
{
“ruleid”: “1002”,
“size”: “92”,
“ZScore”: “2.60137”,
“complexity”: “2”,
“constraints”: {
“constraint”: [
{
“varName”: “AgeFather”,
“Min”: “32.000000”,
“Max”: “45.000000”
},
{
“varName”: “Age AD Start (weeks)”,
“Min”: “14.000000”,
“Max”: “30.000000”
}
]
}
},
{
“ruleid”: “1003”,
“size”: “62”,
“ZScore”: “2.60137”,
“complexity”: “2”,
“constraints”: {
“constraint”: [
{
“varName”: “AgeFather”,
“Min”: “32.000000”,
“Max”: “45.000000”
},
{
“varName”: “Age AD Start (weeks)”,
“Min”: “14.000000”,
“Max”: “30.000000”
}
]
}
}
];
var source =
{
datafields: [
{ name: ‘ruleid’, type: ‘string’ },
{ name: ‘size’, type: ‘string’ },
{ name: ‘ZScore’, type: ‘string’ },
{ name: ‘complexity’, type: ‘string’ }
],
datatype: ‘json’,
localdata: data
};
var adapter = 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 nestedSource =
{
datafields: [
{ name: ‘varName’, map: ‘varName’, type: ‘string’ },
{ name: ‘Min’, map: ‘Min’, type: ‘string’ },
{ name: ‘Max’, map: ‘Max’, type: ‘string’ }
],
datatype: ‘json’,
root: ‘constraint’,
theme: ‘darkblue’,
localdata: data[index].constraints
};
var nestedAdapter = new $.jqx.dataAdapter(nestedSource);
if (grid != null) {
grid.jqxGrid({
source: nestedAdapter, width: 600, height: 100,
columns: [
{ text: “varName”, datafield: “varName” },
{ text: “Min”, datafield: “Min” },
{ text: “Max”, datafield: “Max” }
]
});
}
}
// creage jqxgrid
$(“#jqxgrid”).jqxGrid(
{
width: 670,
height: 610,
source: source,
theme: ‘darkblue’,
rowdetails: true,
rowsheight: 35,
initrowdetails: initrowdetails,
rowdetailstemplate: { rowdetails: “<div id=’grid’ class=’innergrid’ style=’margin: 10px;’></div>”, rowdetailsheight: 120, rowdetailshidden: false},
ready: function () {
$(“#jqxgrid”).jqxGrid(‘showrowdetails’, 1);
},
columns: [
{ text: ‘ruleid’, datafield: ‘ruleid’, width: 150 },
{ text: ‘size’, datafield: ‘size’, width: 150 },
{ text: ‘ZScore’, datafield: ‘ZScore’, width: 150 },
{ text: ‘complexity’, datafield: ‘complexity’, }
]
});

$(document).mousedown(function () {
});
$(“#jqxgrid”).on(‘mousedown’, function (event) {
});

$(“.innergrid”).jqxGrid(
{
theme: “darkblue”
});

var data2 = [
{
“varName”: “BirthWeight”,
“Min”: “2.500000”,
“Max”: “2.500000”
},
{
“varName”: “AgeMother”,
“Min”: “39.000000”,
“Max”: “39.000000”
},
{
“varName”: “AgeFather”,
“Min”: “35.000000”,
“Max”: “39.000000”
}];
var Source2 =
{
datafields: [
{ name: ‘varName’, map: ‘varName’, type: ‘string’ },
{ name: ‘Min’, map: ‘Min’, type: ‘string’ },
{ name: ‘Max’, map: ‘Max’, type: ‘string’ }
],
datatype: ‘json’,
root: ‘constraint’,
theme: ‘darkblue’,
sortcolumn: ‘act_id’,
sortdirection: ‘asc’,
localdata: data2
};

//create the dataAdapter for Grid 2
var adapter2 = new $.jqx.dataAdapter(Source2);
var columns2 = [
{ text: “varName”, datafield: “varName” },
{ text: “Min”, datafield: “Min” },
{ text: “Max”, datafield: “Max” }
];

//INITIALIZE GRID 2
$(“#game-grid”).jqxGrid(
{
width: 600,
height: 300,
source: adapter2,
theme: ‘darkblue’,
columns: columns2
});//end grid 2 declaration

$(“#game-grid2″).jqxGrid(
{
width: 600,
height: 300,
source: adapter2,
theme: ‘darkblue’,
columns: columns2
});//end grid 2 declaration

});
</script>
</head>
<body class=’default’>
<table style=”width: 45%; float: left;”>
<tr>
<td style=”border: 1px solid #000; width: 300px;”><div id=”jqxgrid”></div></td>
</tr>
</table>
<table style=”width: 45%; float: left;”>
<tr>
<td style=”border: 1px solid #000; width: 300px;”><div id=”game-grid”></div></td>
</tr>
</table>
<table style=”width: 45%; float: left;”>
<tr>
<td style=”border: 1px solid #000; width: 300px;”><div id=”game-grid2″></div></td>
</tr>
</table>
</body>
</html>

December 7, 2015 at 11:13 am Drag data from nested grid #78991

ivailo
Participant

Hi deyavirup,

Unfortunately this functionality is not supported.

Best Regards,
Ivailo Ivanov

jQWidgets Team
http://www.jqwidgets.com

December 8, 2015 at 6:54 am Drag data from nested grid #79041

deyavirup
Participant

Can you suggest any other way to replicate the same functionality.

December 8, 2015 at 8:50 am Drag data from nested grid #79048

ivailo
Participant

Hi deyavirup,

Unfortunately we cannot offer you another way to simulate the same functionality.

Best Regards,
Ivailo Ivanov

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

Posts

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

You must be logged in to reply to this topic.