There is a combo box contain [Primary Probe, Prove] Once Primary probe or probe is being selected then it will display a list of checkbox. Any of the checkbox is select it will be store and display the checked checkbox id as a message below the list of checkbox. Once i change the state of the combobox then the previous checked checkbox is being unchecked but the message will be displaying that i had checked it. Is there a way to load the message id and set the selected checkbox id into true.
sample step
- [Step 1-Load the system]
- [Step 2-Select "Primary probe" and display the list of checkbox]
- [Step 3-Change from "Primary probe"to "Probe"]
- [Step 4-Change from "Probe" to "Primary probe ".]
In step 4, i would like to load previous select id through the stored id
var data;
var gridColumns;
var grid;
var showlist;
var viewModel;
viewModel = kendo.observable({
showlist:false,
});
kendo.bind($(checklist), viewModel);
function onChange() {
viewModel = kendo.observable({
showlist:true,
});
filterinfo(cType.value());
kendo.bind($(checklist), viewModel);
}
//change view
function filterinfo(value)
{
var treeView = $("#treeview").data("kendoTreeView");
if(treeView){
treeView.destroy();
$("#treeview").html("");
}
//-------------------------------------------------------------
switch(value){
case "1":
function onCheck()
{
var message;
var checkedNodes = [];
checkedNodeIds(treeView.dataSource.view(), checkedNodes);
if (checkedNodes.length > 0) {
message = "IDs of checked nodes: " + checkedNodes.join(",");
} else {
message = "No nodes checked.";
}
$("#result").html(message);
}
treeView = $("#treeview").kendoTreeView({
checkboxes : {
checkChildren: false,
template:"# if(!item.hasChildren){# <input type='hidden' parent_id='#=item.parent_id#' d_text='#=item.value#'/> <input type='checkbox' name='checkedFiles[#= item.id #]' value='true' />#}else{# <input type='hidden' parent_id='#=item.parent_id#' d_text='#=item.value#'/> #}#"
},
check:onCheck,
dataSource : PrimaryProbe,
dataTextField: "value"
}).data("kendoTreeView");
function checkedNodeIds(nodes, checkedNodes) {
//console.log(nodes);
for (var i = 0; i < nodes.length; i++) {
if (nodes[i].checked) {
checkedNodes.push(nodes[i].id);
}
if (nodes[i].hasChildren) {
checkedNodeIds(nodes[i].children.view(), checkedNodes);
}
}
}
//load selected id
//-----------------------------------------------------------
break;
case "2":
onCheck()
{
var message;
var checkedNodes = [];
checkedNodeIds(treeView.dataSource.view(), checkedNodes);
if (checkedNodes.length > 0) {
message = "IDs of checked nodes: " + checkedNodes.join(",");
} else {
message = "No nodes checked.";
}
$("#result").html(message);
}
treeView = $("#treeview").kendoTreeView({
checkboxes : {
checkChildren: false,
template:"# if(!item.hasChildren){# <input type='hidden' parent_id='#=item.parent_id#' d_text='#=item.value#'/> <input type='checkbox' name='checkedFiles[#= item.id #]' value='true' />#}else{# <input type='hidden' parent_id='#=item.parent_id#' d_text='#=item.value#'/> #}#"
},
check:onCheck,
dataSource : Probe,
dataTextField: "value"
}).data("kendoTreeView");
function checkedNodeIds(nodes, checkedNodes) {
//console.log(nodes);
for (var i = 0; i < nodes.length; i++) {
if (nodes[i].checked) {
checkedNodes.push(nodes[i].id);
}
if (nodes[i].hasChildren) {
checkedNodeIds(nodes[i].children.view(), checkedNodes);
}
}
}
// show checked node IDs on datasource change
treeView.dataSource.bind("change", function () {
var message;
var checkedNodes = [];
checkedNodeIds(treeView.dataSource.view(), checkedNodes);
if (checkedNodes.length > 0) {
message = "IDs of checked nodes: " + checkedNodes.join(",");
} else {
message = "No nodes checked.";
}
$("#result").html(message);
});
break;
}
}
var clientType = [{"clientTypeID":1,"clientTypeName":"PrimaryProbe"},
{"clientTypeID":2,"clientTypeName":"Probe"}]
var cType = $("#clientType").kendoComboBox({
filter: "contains",
change: onChange,
placeholder: "Filter by client type",
dataTextField: "clientTypeName",
dataValueField: "clientTypeID",
dataSource: {
data:clientType
}
}).data("kendoComboBox");
var Probe = new kendo.data.HierarchicalDataSource({
data: [
{ id : 1,
parent_id: 0,
value : "General Information - Probe",
expanded : true,
items : [
{ id: 11, parent_id: 1, value: "CPU Model"},
{ id: 12, parent_id: 1, value: "CPU Usage" },
{ id: 13, parent_id: 1, value: "Free Space"},
{ id: 14, parent_id: 1, value: "Hardware Model"},
{ id: 15, parent_id: 1, value: "Master/Slave Mode"},
{ id: 16, parent_id: 1, value: "Memory Usage" },
{ id: 17, parent_id: 1, value: "Product Version" },
{ id: 18, parent_id: 1, value: "Software Version" }
]},
{ id : 2,
parent_id: 0,
value : "Sim Pool Information - Probe",
expanded : true,
items : [
{ id: 21, parent_id: 2, value: "Slot 1"},
{ id: 22, parent_id: 2, value: "Slot 2"},
{ id: 23, parent_id: 2, value: "Slot 3"},
{ id: 24, parent_id: 2, value: "Slot 4"},
{ id: 25, parent_id: 2, value: "Slot 5"},
{ id: 26, parent_id: 2, value: "Slot 6"},
{ id: 27, parent_id: 2, value: "Slot 7"},
{ id: 28, parent_id: 2, value: "Slot 8"}
]},
{
id : 3,
parent_id: 0,
value : "Trace Files Information - Probe",
expanded : true,
items : [
{ id: 31,parent_id: 3, value: "FTP Upload Status"},
{ id: 32,parent_id: 3, value: "Remaining Agent Trace Files" },
{ id: 33,parent_id: 3, value: "Remaining Probe Trace Files" },
{ id: 34,parent_id: 3, value: "Remaining TRP Log Files"}
]
}
]
});
var PrimaryProbe = new kendo.data.HierarchicalDataSource({
data: [
{ id : 5,
parent_id: 0,
value : "General - Primary Probe",
expanded : true,
items : [
{ id: 51, parent_id: 5, value: "Agent Running Mode"},
{ id: 52, parent_id: 5, value: "Agent Version"},
{ id: 53, parent_id: 5, value: "Master/Slave Mode"},
{ id: 54, parent_id: 5, value: "Manufacturer"},
{ id: 55, parent_id: 5, value: "Model"},
{ id: 56, parent_id: 5, value: "Software Version"}
]}
]
});
// function that gathers IDs of checked nodes
function add(){
viewModel = kendo.observable({
showlist:true,
});
kendo.bind($(checklist), viewModel);
}
function check(){
}
#fieldlist {
margin: 0;
padding: 0;
}
#fieldlist li {
list-style: none;
padding-bottom: 1.5em;
text-align: left;
}
#fieldlist label {
display: block;
padding-bottom: .3em;
font-weight: bold;
text-transform: uppercase;
font-size: 12px;
}
.searchClientText {
width: 222px !important;
height: 25px !important;
border-radius: 3px;
}
.checkboxList {
margin: 0 0 -1em;
padding: 0;
}
.checkboxList li {
list-style: none;
padding-bottom: 1em;
}
td {
width:150px;
vertical-align: top;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://ift.tt/2d5XRzf"/>
<link rel="stylesheet" href="http://ift.tt/2dyIO3I"/>
<script src="http://ift.tt/ZnjyAz"></script>
<script src="http://ift.tt/2dyGzxD"></script>
<script src="http://ift.tt/ZnjyAz"></script>
<script src="http://ift.tt/2d5VZqi"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<div class="demo-section k-content">
<ul id="fieldlist">
<li>
<input id="clientType" style="width:auto" />
</li>
</ul>
</div>
<div id="checklist" data-bind="visible: showlist">
<table>
<tr>
<td><div id="treeview"></div><div id="result"></div></td>
</tr>
</table>
</div>
</body>
</html>
Aucun commentaire:
Enregistrer un commentaire