[Mircea GiurgiuParticipant]

Hi,
I was trying to export into Excel a grid with columngroup in header of grid but columngroup is not export in Excel.
Have you any idea to get it?
Thanks
Mircea Giurgiu

[Mircea GiurgiuParticipant]

var source =
{
dataType: “json”,
dataFields: [

{ name: “idMenu”, type: “number” },
{ name: “itemDesc”, type: “string” },
{ name: “parentID”, type: “number” },
{ name: “position”, type: “number” },
{ name: “href”, type: “string” },
{ name: “idrightType”, type: “number” },
{ name: “idRights”, type: “number” }
],
id: ‘idMenu’,
url: ‘data/menu_data.php’,
async: false
};

// create data adapter.
var dataAdapter = new $.jqx.dataAdapter(source);
// perform Data Binding.
dataAdapter.dataBind();
var records = dataAdapter.getRecordsHierarchy(‘idMenu’, ‘parentID’, ‘items’, [{ name: ‘itemDesc’, map: ‘label’}]);
$(‘#jqxMenu’).jqxMenu({ source: records, height: 30, width: ‘700px’, theme: ‘energyblue’ });
$(“#jqxMenu”).on(‘itemclick’, function (event) {
// $(“#eventLog”).text(“Id: ” + records.href + “, Text: ” + $(event.args).text());
window.open(event.args.href);
});

I want to include href=some.php when click an menu item
I use window.open, but how I find my link from record?

Mircea

[Mircea GiurgiuParticipant]

Ok,
I was not clear:

My pb is when insert new row:
When I want to save I get blank value for items
How I can recover the filled value ?
I used the code:

var row = $(“#treeGrid”).jqxTreeGrid(‘getRow’,newRowID);
url=”data/menu_up.php?action=insert&id=”+newRowData.idMenu+
“&itemDesc=”+row.itemDesc+
“&position=”+row.position+
“&href=”+row.href+
“&parentID=”+newParentID
$.ajax({url:url,type: “GET”,cache: false ,success:function(result){
$(“#mess”).html(result) }});
}

Thanks
Mircea

[Mircea GiurgiuParticipant]

Hi,
I have a problem when I want to add a row into greed and then I want insert it into database

The code :
$(document).ready(function () {

var source =
{
dataType: “json”,
dataFields: [

{ name: “idMenu”, type: “number” },
{ name: “itemDesc”, type: “string” },
{ name: “parentID”, type: “string” },
{ name: “position”, type: “number” },
{ name: “level”, type: “array” },
{ name: “href”, type: “string” }

],
url: ‘data/menuTree_data.php’,
addRow: function (rowID, rowData, position, parentID, commit) {
// alert(rowData.item[‘itemDesc’])

// synchronize with the server – send insert command
// call commit with parameter true if the synchronization with the server is successful
// and with parameter false if the synchronization failed.
// you can pass additional argument to the commit callback which represents the new ID if it is generated from a DB.
commit(true);
newRowID = rowID;
newParentID=parentID;

newRowData=rowData;
newPosition=position;

},
updateRow: function (rowID, rowData, commit) {

/* url=”data/menu_up.php?action=update&id=”+rowData.idMenu+
“&itemDesc=”+rowData.itemDesc+
“&position=”+rowData.position+
“&href=”+rowData.href

$.ajax({url:url,type: “GET”,cache: false ,success:function(result){
$(“#mess”).html(result) }}); */
//alert(newRowID)

// synchronize with the server – send update command
// call commit with parameter true if the synchronization with the server is successful
// and with parameter false if the synchronization failed.
commit(true);

},
deleteRow: function (rowID, commit) {

$.ajax({url:”data/menu_up.php?action=delete&id=”+rowID

});
// synchronize with the server – send delete command
// call commit with parameter true if the synchronization with the server is successful
// and with parameter false if the synchronization failed.
commit(true);
},
cache: false,
hierarchy:
{
root: “level”,
keyDataField: { name: ‘idMenu’ },
parentDataField: { name: ‘parentID’ }
},

id: “idMenu”
};
var dataAdapter = new $.jqx.dataAdapter(source, {
loadComplete: function () {
}
});
$(“#treeGrid”).jqxTreeGrid(
{
width: 550,
source: dataAdapter,
altrows: true,
autoRowHeight: false,
showToolbar: true,
theme: ‘energyblue’,
toolbarHeight: 35,
ready: function () {
// Expand rows with ID = 1, 2 and 7
$(“#treeGrid”).jqxTreeGrid(‘expandRow’, 1);
$(“#treeGrid”).jqxTreeGrid(‘expandRow’, 2);
$(“#treeGrid”).jqxTreeGrid(‘expandRow’, 3);
},
editable: true,
renderToolbar: function(toolBar)
{
var toTheme = function (className) {
if (theme == “”) return className;
return className + ” ” + className + “-” + theme;
}
// appends buttons to the status bar.
var container = $(“<div style=’overflow: hidden; position: relative; height: 100%; width: 100%;’></div>”);
var buttonTemplate = “<div style=’float: left; padding: 3px; margin: 2px;’><div style=’margin: 4px; width: 16px; height: 16px;’></div></div>”;
var addButton = $(buttonTemplate);
var editButton = $(buttonTemplate);
var deleteButton = $(buttonTemplate);
var cancelButton = $(buttonTemplate);
var updateButton = $(buttonTemplate);
container.append(addButton);
container.append(editButton);
container.append(deleteButton);
container.append(cancelButton);
container.append(updateButton);
toolBar.append(container);
addButton.jqxButton({cursor: “pointer”, enableDefault: false, disabled: true, height: 25, width: 25 });
addButton.find(‘div:first’).addClass(toTheme(‘jqx-icon-plus’));
addButton.jqxTooltip({ position: ‘bottom’, content: “Add”});
editButton.jqxButton({ cursor: “pointer”, disabled: true, enableDefault: false, height: 25, width: 25 });
editButton.find(‘div:first’).addClass(toTheme(‘jqx-icon-edit’));
editButton.jqxTooltip({ position: ‘bottom’, content: “Edit”});
deleteButton.jqxButton({ cursor: “pointer”, disabled: true, enableDefault: false, height: 25, width: 25 });
deleteButton.find(‘div:first’).addClass(toTheme(‘jqx-icon-delete’));
deleteButton.jqxTooltip({ position: ‘bottom’, content: “Delete”});
updateButton.jqxButton({ cursor: “pointer”, disabled: true, enableDefault: false, height: 25, width: 25 });
updateButton.find(‘div:first’).addClass(toTheme(‘jqx-icon-save’));
updateButton.jqxTooltip({ position: ‘bottom’, content: “Save Changes”});
cancelButton.jqxButton({ cursor: “pointer”, disabled: true, enableDefault: false, height: 25, width: 25 });
cancelButton.find(‘div:first’).addClass(toTheme(‘jqx-icon-cancel’));
cancelButton.jqxTooltip({ position: ‘bottom’, content: “Cancel”});
var updateButtons = function (action) {
switch (action) {
case “Select”:
addButton.jqxButton({ disabled: false });
deleteButton.jqxButton({ disabled: false });
editButton.jqxButton({ disabled: false });
cancelButton.jqxButton({ disabled: true });
updateButton.jqxButton({ disabled: true });
break;
case “Unselect”:
addButton.jqxButton({ disabled: true });
deleteButton.jqxButton({ disabled: true });
editButton.jqxButton({ disabled: true });
cancelButton.jqxButton({ disabled: true });
updateButton.jqxButton({ disabled: true });
break;
case “Edit”:
addButton.jqxButton({ disabled: true });
deleteButton.jqxButton({ disabled: true });
editButton.jqxButton({ disabled: true });
cancelButton.jqxButton({ disabled: false });
updateButton.jqxButton({ disabled: false });
break;
case “End Edit”:
addButton.jqxButton({ disabled: false });
deleteButton.jqxButton({ disabled: false });
editButton.jqxButton({ disabled: false });
cancelButton.jqxButton({ disabled: true });
updateButton.jqxButton({ disabled: true });
break;
}
}
var rowKey = null;
$(“#treeGrid”).on(‘rowSelect’, function (event) {
var args = event.args;
rowKey = args.key;

// alert(“Row with bound index: ” + event.args.rowindex + ” has been selected”);
updateButtons(‘Select’);
});
$(“#treeGrid”).on(‘rowUnselect’, function (event) {
updateButtons(‘Unselect’);
});
$(“#treeGrid”).on(‘rowEndEdit’, function (event) {
updateButtons(‘End Edit’);
});
$(“#treeGrid”).on(‘rowBeginEdit’, function (event) {
updateButtons(‘Edit’);
});
addButton.click(function (event) {
if (!addButton.jqxButton(‘disabled’)) {
$(“#treeGrid”).jqxTreeGrid(‘expandRow’, rowKey);
// add new empty row.
$(“#treeGrid”).jqxTreeGrid(‘addRow’, null, {itemDesc:”,position:”,href:”}, ‘first’, rowKey);
// select the first row and clear the selection.
$(“#treeGrid”).jqxTreeGrid(‘clearSelection’);
$(“#treeGrid”).jqxTreeGrid(‘selectRow’, newRowID);
// edit the new row.
$(“#treeGrid”).jqxTreeGrid(‘beginRowEdit’, newRowID);

updateButtons(‘add’);
}
});
cancelButton.click(function (event) {
if (!cancelButton.jqxButton(‘disabled’)) {
// cancel changes.
$(“#treeGrid”).jqxTreeGrid(‘endRowEdit’, rowKey, true);
}
});
updateButton.click(function (event) {
if (!updateButton.jqxButton(‘disabled’)) {
// save changes.
var args=event.args
//var index=args.index
// var row = args.row;
// alert(newRowID)
var row = $(“#treeGrid”).jqxTreeGrid(‘getRow’,newRowID);
// alert(JSON.stringify(row))
// alert(row.itemDesc)
if(typeof newRowID!=”undefined”) {

url=”data/menu_up.php?action=insert&id=”+newRowData.idMenu+
“&itemDesc=”+row.itemDesc+
“&position=”+row.position+
“&href=”+row.href+
“&parentID=”+newParentID

$.ajax({url:url,type: “GET”,cache: false ,success:function(result){
$(“#mess”).html(result) }});
}
alert(url)
$(“#treeGrid”).jqxTreeGrid(‘endRowEdit’, rowKey, false);
}
});
editButton.click(function () {
if (!editButton.jqxButton(‘disabled’)) {
$(“#treeGrid”).jqxTreeGrid(‘beginRowEdit’, rowKey);
updateButtons(‘Edit’);
}
});
deleteButton.click(function () {
if (!deleteButton.jqxButton(‘disabled’)) {
var selection = $(“#treeGrid”).jqxTreeGrid(‘getSelection’);
if (selection.length > 1) {
var keys = new Array();
for (var i = 0; i < selection.length; i++) {
keys.push($(“#treeGrid”).jqxTreeGrid(‘getKey’, selection[i]));
}
$(“#treeGrid”).jqxTreeGrid(‘deleteRow’, keys);
}
else {
$(“#treeGrid”).jqxTreeGrid(‘deleteRow’, rowKey);
}
updateButtons(‘delete’);
}
});
},
columns: [
{ text: ‘ID/level’, editable: false, dataField: ‘idMenu’, width: 80 },

{ text: ‘Description’, dataField: ‘itemDesc’, width: 220},
{ text: ‘Position’, dataField: ‘position’,width: 80, cellsAlign: ‘right’, align: ‘right’ },

{ text: ‘href’, dataField: ‘href’ }
]
});
});

Into updateButton.click(function
See url:
row.itemDesc, row.href, row.position are blank if even I filled withe values.
How to recover data from new line?
Thanks
Mircea

[Mircea GiurgiuParticipant]

Many thanks
It is working
Mircea

[Mircea GiurgiuParticipant]

You load this and you see what is happening

gimoinvest.com/eurosense/dataTable.html

<?php
session_start();
ob_start();
error_reporting(E_ALL);

// Informatii baza de date

$host = “localhost”;
$user = “gimoinve_admin”;
$passw = “admin1234”;
$database = “gimoinve_eurosense”;

$conn = mysql_connect($host,$user,$passw) or die(mysql_error());
mysql_select_db($database, $conn) or die(mysql_error());

function addentities($data){
if(trim($data) != ”){
$data = htmlentities($data, ENT_QUOTES);
return str_replace(‘\\’, ‘\’, $data);
} else return $data;
} // End addentities() ————–

?>

[Mircea GiurgiuParticipant]

I made the correction , but it is still not working.
I note that is working with another data.
Mircea
the code
<!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/jqxdatatable.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxlistbox.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxdropdownlist.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxcheckbox.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxinput.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxslider.js”></script>
<script type=”text/javascript” src=”scripts/demos.js”></script>
<script type=”text/javascript” src=”scripts/generatedata.js”></script>
<script type=”text/javascript”>
$(document).ready(function () {
// prepare the data
var source =
{
datatype: “json”,
datafields: [
{ name: ‘id’ , type:’number’},
{ name: ‘itemDesc’, type:’string’},
{ name: ‘parent’, type:’number’}
],
url: ‘data/menu_data.php’,

}
var dataAdapter = new $.jqx.dataAdapter(source);

// initialize jqxDataTable
$(“#dataTable”).jqxDataTable(
{
width: 685,
source: dataAdapter,
pageable: true,
pagerButtonsCount: 10,
editable: true,
autoRowHeight: false,

columns: [
{ text: ‘Menu ID’, editable: false, dataField: ‘id’,cellsAlign: ‘right’, align: ‘right’, width: 100 },
{ text: ‘Description’, dataField: ‘itemDesc’, cellsFormat: ‘f’, cellsAlign: ‘left’, align: ‘left’, width: 300},
{ text: ‘Parent’, dataField: ‘parent’,cellsAlign: ‘left’, align: ‘left’, width: 100 },

]
});

});
</script>
</head>
<body class=’default’>
<div id=”dataTable”></div>
</body>
</html>

[Author]

Posts