I'm trying to post the checknodes id into database through submit button. I'm trying several way but not get it. And how to make the submit button be function to save the id? Can anyone show the correct code? Here's to be more clearly: https://dojo.telerik.com/IYEvALiY/11 I want to get just the id into database.
This is the PHP code for posting the data to MySQL
function getTemplate() {
global $ehorsObj;
$positionTemplateID = (isset($_POST['positionTemplateID']) ? $_POST['positionTemplateID'] : '');
$hrsPositionID = (isset($_POST['hrsPositionID']) ? $_POST['hrsPositionID'] : '');
$programID = (isset($_POST['programID']) ? $_POST['programID'] : '');
$propertyID = (isset($_POST['propertyID']) ? $_POST['propertyID'] : '');
$employeeID = (isset($_POST['employeeID']));
/* check unique */
$sqlCount = "INSERT INTO tblHrsPositionProgramTemplate (programID) VALUES ($result)";
$GetResult = $ehorsObj->FetchData($sqlCount, $ehorsObj->DEFAULT_PDO_CONNECTIONS);
}
This is Javascript
<script>
var grid;
var dropdownlist;
$(document).ready(function () {
//AJAX i want to save into db
dataSource = new kendo.data.DataSource({
transport: {
read: {
url: "./getTest.php",
type: "POST",
data: function() {
return {
method: "getTemplate",
positionTemplateID: document.getElementById('positionTemplateID').checked,
hrsPositionID: dropdownlist.value(),
}
}
},
template: {
url: "./getTest.php",
type: "POST",
data: function () {
return {
method: "getTemplate",
employeeID: document.getElementById('employeeID').value,
propertyID: document.getElementById('propertyID').value,
}
},
complete: function (e) {
$('#grid').data('kendoGrid').dataSource.read();
}
},
},
schema: {
model: {
id: "positionTemplateID",
}
},
});
//dropdown position
$("#dropdown").kendoDropDownList({
dataTextField: "functionName",
dataValueField: "hrsPositionID",
dataSource: {
transport:{
read: {
url: "../Designation/getTest.php",
type: "POST",
data: function() {
return {
method: "getDropdown",
}
}
},
},
},
//change: onChange
}).data('kendoDropDownList');
dropdownlist = $("#dropdown").data("kendoDropDownList");
//function onChange() {
//$('#dropdown').data('kendoGrid').dataSource.read();
//}
//grid
var gridElement = $("#grid");
$(window).resize(function(){
var height = this.innerHeight
$('#parent').height(height - 60) //60 is the height of the top content
gridElement.data("kendoGrid").resize();
});
grid = $("#grid").kendoGrid({
dataBound: function(e){
highlightRed();
var height = $(window)[0].innerHeight
$('#parent').height(height - 60) //60 is the height of the top content
gridElement.data("kendoGrid").resize();
// grid.autoFitColumn(0);
// grid.autoFitColumn(13);
},
editable: { mode: "inline" },
}).data("kendoGrid");
});
//treeview
var serviceRoot = "../../../HumanResource/EmployeeManagement/Designation/getTemplate.php";
homogeneous = new kendo.data.HierarchicalDataSource({
transport: {
read: {
url: serviceRoot,
dataType: "json"
}
},
schema: {
model: {
id : "ehorsProgramID",
hasChildren: false,
children : "items"
}
},
filter: { field: "module", operator: "startswith", value: "Accounting" }
});
$("#AccountingTree").kendoTreeView({
check: onCheck,
checkboxes: { checkChildren: true } ,
dataSource: homogeneous,
dataBound: function(){
this.expand('.k-item');
},
dataTextField: ["module","groupname","ehorsProgramName"]
});
homogeneous1 = new kendo.data.HierarchicalDataSource({
transport: {
read: {
url: serviceRoot,
dataType: "json"
}
},
schema: {
model: {
id : "ehorsProgramID",
hasChildren: false,
children : "items"
}
},
filter: { field: "module", operator: "startswith", value: "Admin & System" }
});
$("#AdminSystemTree").kendoTreeView({
check: onCheck,
checkboxes: { checkChildren: true },
dataSource: homogeneous1,
dataBound: function(){
this.expand('.k-item');
},
dataTextField: ["module","groupname","ehorsProgramName"]
});
homogeneous2 = new kendo.data.HierarchicalDataSource({
transport: {
read: {
url: serviceRoot,
dataType: "json"
}
},
schema: {
model: {
id : "ehorsProgramID",
hasChildren: false,
children : "items"
}
},
filter: { field: "module", operator: "startswith", value: "Food & Beverage" }
});
$("#FnBTree").kendoTreeView({
check: onCheck,
checkboxes: { checkChildren: true },
dataSource: homogeneous2,
dataBound: function(){
this.expand('.k-item');
},
dataTextField: ["module","groupname","ehorsProgramName"]
});
homogeneous3 = new kendo.data.HierarchicalDataSource({
transport: {
read: {
url: serviceRoot,
dataType: "json"
}
},
schema: {
model: {
id : "ehorsProgramID",
hasChildren: false,
children : "items"
}
},
filter: { field: "module", operator: "startswith", value: "Human Resource" }
});
$("#HumanResourceTree").kendoTreeView({
check: onCheck,
checkboxes: { checkChildren: true },
dataSource: homogeneous3,
dataBound: function(){
this.expand('.k-item');
},
dataTextField: ["module","groupname","ehorsProgramName"]
});
homogeneous4 = new kendo.data.HierarchicalDataSource({
transport: {
read: {
url: serviceRoot,
dataType: "json"
}
},
schema: {
model: {
id : "ehorsProgramID",
hasChildren: false,
children : "items"
}
},
filter: { field: "module", operator: "startswith", value: "Inventory Management" }
});
$("#InventoryManagementTree").kendoTreeView({
check: onCheck,
checkboxes: { checkChildren: true },
dataSource: homogeneous4,
dataBound: function(){
this.expand('.k-item');
},
dataTextField: ["module","groupname","ehorsProgramName"]
});
homogeneous5 = new kendo.data.HierarchicalDataSource({
transport: {
read: {
url: serviceRoot,
dataType: "json"
}
},
schema: {
model: {
id : "ehorsProgramID",
hasChildren: false,
children : "items"
}
},
filter: { field: "module", operator: "startswith", value: "Sales & Marketing" }
});
$("#SalesMarketingTree").kendoTreeView({
check: onCheck,
checkboxes: { checkChildren: true },
dataSource: homogeneous5,
dataBound: function(){
this.expand('.k-item');
},
dataTextField: ["module","groupname","ehorsProgramName"]
});
homogeneous6 = new kendo.data.HierarchicalDataSource({
transport: {
read: {
url: serviceRoot,
dataType: "json"
}
},
schema: {
model: {
id : "module",
hasChildren: false,
children : "items"
}
},
filter: { field: "module", operator: "startswith", value: "Front Office" }
});
$("#FrontOfficeTree").kendoTreeView({
checkboxes: { checkChildren: true },
dataSource: homogeneous6,
dataTextField: ["module","groupname","ehorsProgramName"]
});
homogeneous7 = new kendo.data.HierarchicalDataSource({
transport: {
read: {
url: serviceRoot,
dataType: "json"
}
},
schema: {
model: {
id : "module",
hasChildren: false,
children : "items"
}
},
filter: { field: "module", operator: "startswith", value: "Guest Service System" }
});
$("#GuestServiceSystemTree").kendoTreeView({
checkboxes: { checkChildren: true },
dataSource: homogeneous7,
dataTextField: ["module","groupname","ehorsProgramName"]
});
homogeneous8 = new kendo.data.HierarchicalDataSource({
transport: {
read: {
url: serviceRoot,
dataType: "json"
}
},
schema: {
model: {
id : "module",
hasChildren: false,
children : "items"
}
},
filter: { field: "module", operator: "startswith", value: "House keeping Maintenance" }
});
$("#HouseKeepingTree").kendoTreeView({
checkboxes: { checkChildren: true },
dataSource: homogeneous8,
dataTextField: ["module","groupname","ehorsProgramName"]
});
homogeneous9 = new kendo.data.HierarchicalDataSource({
transport: {
read: {
url: serviceRoot,
dataType: "json"
}
},
schema: {
model: {
id : "module",
hasChildren: false,
children : "items"
}
},
filter: { field: "module", operator: "startswith", value: "Pabx" }
});
$("#PabxTree").kendoTreeView({
checkboxes: { checkChildren: true },
dataSource: homogeneous9,
dataTextField: ["module","groupname","ehorsProgramName"]
});
homogeneous10 = new kendo.data.HierarchicalDataSource({
transport: {
read: {
url: serviceRoot,
dataType: "json"
}
},
schema: {
model: {
id : "module",
hasChildren: false,
children : "items"
}
},
filter: { field: "module", operator: "startswith", value: "Point of Sales" }
});
$("#PointSalesTree").kendoTreeView({
checkboxes: { checkChildren: true },
dataSource: homogeneous10,
dataTextField: ["module","groupname","ehorsProgramName"]
});
homogeneous11 = new kendo.data.HierarchicalDataSource({
transport: {
read: {
url: serviceRoot,
dataType: "json"
}
},
schema: {
model: {
id : "module",
hasChildren: false,
children : "items"
}
},
filter: { field: "module", operator: "startswith", value: "Purchasing" }
});
$("#PurchasingTree").kendoTreeView({
checkboxes: { checkChildren: true },
dataSource: homogeneous11,
dataTextField: ["module","groupname","ehorsProgramName"]
});
homogeneous12 = new kendo.data.HierarchicalDataSource({
transport: {
read: {
url: serviceRoot,
dataType: "json"
}
},
schema: {
model: {
id : "module",
hasChildren: false,
children : "items"
}
},
filter: { field: "module", operator: "startswith", value: "Spa" }
});
$("#SpaTree").kendoTreeView({
checkboxes: { checkChildren: true },
dataSource: homogeneous12,
dataTextField: ["module","groupname","ehorsProgramName"]
});
homogeneous13 = new kendo.data.HierarchicalDataSource({
transport: {
read: {
url: serviceRoot,
dataType: "json"
}
},
schema: {
model: {
id : "module",
hasChildren: false,
children : "items"
}
},
filter: { field: "module", operator: "startswith", value: "Theme Park" }
});
$("#ThemeParkTree").kendoTreeView({
checkboxes: { checkChildren: true },
dataSource: homogeneous13,
dataTextField: ["module","groupname","ehorsProgramName"]
});
function toggleCheckAll() {
var checkButtonValue = $("#chbAll").val();
if(checkButtonValue == "Uncheck"){
$("#AccountingTree .k-checkbox-wrapper input").prop("checked", true).trigger("change");
$("#AdminSystemTree .k-checkbox-wrapper input").prop("checked", true).trigger("change");
$("#FnBTree .k-checkbox-wrapper input").prop("checked", true).trigger("change");
$("#HumanResourceTree .k-checkbox-wrapper input").prop("checked", true).trigger("change");
$("#InventoryManagementTree .k-checkbox-wrapper input").prop("checked", true).trigger("change");
$("#SalesMarketingTree .k-checkbox-wrapper input").prop("checked", true).trigger("change");
$("#FrontOfficeTree .k-checkbox-wrapper input").prop("checked", true).trigger("change");
$("#GuestServiceSystemTree .k-checkbox-wrapper input").prop("checked", true).trigger("change");
$("#HouseKeepingTree .k-checkbox-wrapper input").prop("checked", true).trigger("change");
$("#PabxTree .k-checkbox-wrapper input").prop("checked", true).trigger("change");
$("#PointSalesTree .k-checkbox-wrapper input").prop("checked", true).trigger("change");
$("#PurchasingTree .k-checkbox-wrapper input").prop("checked", true).trigger("change");
$("#SpaTree .k-checkbox-wrapper input").prop("checked", true).trigger("change");
$("#ThemeParkTree .k-checkbox-wrapper input").prop("checked", true).trigger("change");
$("#chbAll").val("Check");
} else {
$("#AccountingTree .k-checkbox-wrapper input").prop("checked", false).trigger("change");
$("#AdminSystemTree .k-checkbox-wrapper input").prop("checked", false).trigger("change");
$("#FnBTree .k-checkbox-wrapper input").prop("checked", false).trigger("change");
$("#HumanResourceTree .k-checkbox-wrapper input").prop("checked", false).trigger("change");
$("#InventoryManagementTree .k-checkbox-wrapper input").prop("checked", false).trigger("change");
$("#SalesMarketingTree .k-checkbox-wrapper input").prop("checked", false).trigger("change");
$("#FrontOfficeTree .k-checkbox-wrapper input").prop("checked", false).trigger("change");
$("#GuestServiceSystemTree .k-checkbox-wrapper input").prop("checked", false).trigger("change");
$("#HouseKeepingTree .k-checkbox-wrapper input").prop("checked", false).trigger("change");
$("#PabxTree .k-checkbox-wrapper input").prop("checked", false).trigger("change");
$("#PointSalesTree .k-checkbox-wrapper input").prop("checked", false).trigger("change");
$("#PurchasingTree .k-checkbox-wrapper input").prop("checked", false).trigger("change");
$("#SpaTree .k-checkbox-wrapper input").prop("checked", false).trigger("change");
$("#ThemeParkTree .k-checkbox-wrapper input").prop("checked", false).trigger("change");
$("#chbAll").val("Uncheck");
}
}
function checkedNodeIds(nodes, checkedNodes) {
for (var i = 0; i < nodes.length; i++) {
if (nodes[i].checked) {
//checkedNodes.push(nodes[i].moduleID);
// checkedNodes.push(nodes[i].groupID);
checkedNodes.push(nodes[i].id);
}
if (nodes[i].hasChildren) {
checkedNodeIds(nodes[i].children.view(), checkedNodes);
}
}
}
function onCheck() {
var checkedNodes = [],treeView = $("#AccountingTree").data("kendoTreeView"),message;
var checkedNodes2 = [],treeView2 = $("#AdminSystemTree").data("kendoTreeView"),message;
var checkedNodes3 = [],treeView3 = $("#FnBTree").data("kendoTreeView"),message;
var checkedNodes4 = [],treeView4 = $("#HumanResourceTree").data("kendoTreeView"),message;
var checkedNodes5 = [],treeView5 = $("#InventoryManagementTree").data("kendoTreeView"),message;
var checkedNodes6 = [],treeView6 = $("#SalesMarketingTree").data("kendoTreeView"),message;
checkedNodeIds(treeView.dataSource.view(), checkedNodes);
checkedNodeIds(treeView2.dataSource.view(), checkedNodes);
checkedNodeIds(treeView3.dataSource.view(), checkedNodes);
checkedNodeIds(treeView4.dataSource.view(), checkedNodes);
checkedNodeIds(treeView5.dataSource.view(), checkedNodes);
checkedNodeIds(treeView6.dataSource.view(), checkedNodes);
if (checkedNodes.length > 0) {
message = "IDs of checked nodes: " + checkedNodes.filter(x => !!x).join(",");
} else {
message = "No nodes checked.";
}
$("#result").html(message);
}
$("#primaryTextButton").click(function(){
$.post("getTemplate.php",
{
data1: "#result",
// data2: //any other data
},
function(data, status){
//this comes back from your server
console.log("Data: " + data + "
Status: " + status);
});
});
/*function send() {
alert("Submit button clicked!");
return true;
}
*/
</script>
<style>
* {
font-family:Arial, Helvetica, sans-serif;
font-style: normal;
font-size: 11px;
color: #fff;
}
#parent, #grid{
margin: 0;
padding: 0;
height: 100%;
}
</style>
</head>
<body onkeydown="return (event.keyCode != 116)">
<div id="grid">
<table style="height:auto ">
<br><br>
<label>Select Your Position : </label>
<input id="dropdown" style="width:200px;"/>
<br><br>
<div class="selectAll">
<input type="checkbox" id="chbAll" value="Uncheck" class="k-checkbox" onchange="toggleCheckAll()" />
<label class="k-checkbox-label" for="chbAll">Select All</label>
<button id="primaryTextButton" value="submit" class="k-primary" style="float:right; padding: 5px 20px; border-radius: 4px;">Submit</button>
<br></br>
</div>
<tr>
<td style="vertical-align:top;">
<div class="demo-section k-content">
<div id="AccountingTree"></div>
</div>
</td>
<td style="vertical-align:top;">
<div class="demo-section k-content">
<div id="AdminSystemTree"></div>
</div>
</td>
<td style="vertical-align:top;">
<div class="demo-section k-content">
<div id="FnBTree"></div>
</div>
</td>
<td style="vertical-align:top;">
<div class="demo-section k-content">
<div id="HumanResourceTree"></div>
</div>
</td>
<td style="vertical-align:top;">
<div class="demo-section k-content">
<div id="InventoryManagementTree"></div>
</div>
</td>
<td style="vertical-align:top;">
<div class="demo-section k-content">
<div id="SalesMarketingTree"></div>
</div>
</td>
<td style="vertical-align:top;">
<div class="demo-section k-content">
<div id="FrontOfficeTree"></div>
</div>
</td>
<td style="vertical-align:top;">
<div class="demo-section k-content">
<div id="GuestServiceSystemTree"></div>
</div>
</td>
<td style="vertical-align:top;">
<div class="demo-section k-content">
<div id="HouseKeepingTree"></div>
</div>
</td>
<td style="vertical-align:top;">
<div class="demo-section k-content">
<div id="PabxTree"></div>
</div>
</td>
<td style="vertical-align:top;">
<div class="demo-section k-content">
<div id="PointSalesTree"></div>
</div>
</td>
<td style="vertical-align:top;">
<div class="demo-section k-content">
<div id="PurchasingTree"></div>
</div>
</td>
<td style="vertical-align:top;">
<div class="demo-section k-content">
<div id="SpaTree"></div>
</div>
</td>
<td style="vertical-align:top;">
<div class="demo-section k-content">
<div id="ThemeParkTree"></div>
</div>
</td>
</tr>
<p id="result">No nodes checked.</p>
</table>
</div>
</div>