jQWidgets Forums

Forum Replies Created

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

Author

Posts
January 19, 2015 at 9:06 am in reply to: TreeGrid columnsReorder problem in Android TreeGrid columnsReorder problem in Android #65582

Sairam
Participant

Hi,

Please let me know if this will be available in Q1 2015.

Sairam

January 5, 2015 at 7:33 am in reply to: TreeGrid columnsReorder problem in Android TreeGrid columnsReorder problem in Android #64941

Sairam
Participant

Hi Peter,

Can you confirm if you have reproduced it ?

Sairam

December 4, 2014 at 1:05 pm in reply to: Does cellsRenderer in TreeGrid support widgets ?? Does cellsRenderer in TreeGrid support widgets ?? #63786

Sairam
Participant

Hi,

This works but there seems to be a performance hit. I have used the above code as a sample and have jqxMenu instead of a button and an img tag. On clicking the img the system opens a jqxwindow. All works, but with a serious performance hit. Btw, why do you destroy the buttons on Rendering section ??

December 4, 2014 at 12:46 pm in reply to: Merging cells across rows Merging cells across rows #63785

Sairam
Participant

Just wondering if this functionality has been added to the new version(3.6)?

December 4, 2014 at 6:43 am in reply to: spinButtons not working. spinButtons not working. #63763
Sairam
Participant
Here is a shorter version of the code.

`<!DOCTYPE html>
<html lang=”en”>
<head>
<title id=’Description’>
</title>

<link rel=”stylesheet” href=”JQFiles/jqwidgets/styles/jqx.base.css” type=”text/css” />
<link rel=”stylesheet” href=”JQFiles/jqwidgets/styles/jqx.energyblue.css” type=”text/css” />

<script type=”text/javascript” src=”JQFiles/scripts/jquery-1.11.1.min.js”></script>
<script type=”text/javascript” src=”JQFiles/jqwidgets/jqxcore.js”></script>
<script type=”text/javascript” src=”JQFiles/jqwidgets/jqxdata.js”></script>
<script type=”text/javascript” src=”JQFiles/jqwidgets/jqxbuttons.js”></script>
<script type=”text/javascript” src=”JQFiles/jqwidgets/jqxscrollbar.js”></script>
<script type=”text/javascript” src=”JQFiles/jqwidgets/jqxdatatable.js”></script>
<script type=”text/javascript” src=”JQFiles/jqwidgets/jqxtreegrid.js”></script>
<script type=”text/javascript” src=”JQFiles/jqwidgets/jqxlistbox.js”></script>
<script type=”text/javascript” src=”JQFiles/jqwidgets/jqxdropdownlist.js”></script>
<script type=”text/javascript” src=”JQFiles/jqwidgets/jqxcheckbox.js”></script>
<script type=”text/javascript” src=”JQFiles/jqwidgets/jqxinput.js”></script>
<script type=”text/javascript” src=”JQFiles/jqwidgets/jqxslider.js”></script>
<script type=”text/javascript” src=”JQFiles/jqwidgets/jqxwindow.js”></script>
<script type=”text/javascript” src=”JQFiles/jqwidgets/jqxpanel.js”></script>
<script type=”text/javascript” src=”JQFiles/jqwidgets/jqxdraw.js”></script>
<script type=”text/javascript” src=”JQFiles/jqwidgets/jqxchart.core.js”></script>
<script type=”text/javascript” src=”JQFiles/jqwidgets/jqxeditor.js”></script>
<script type=”text/javascript” src=”JQFiles/jqwidgets/jqxtabs.js”></script>
<script type=”text/javascript” src=”JQFiles/jqwidgets/jqxmenu.js”></script>
<script type=”text/javascript” src=”JQFiles/jqwidgets/jqxtooltip.js”></script>
<script type=”text/javascript” src=”JQFiles/jqwidgets/jqxnumberinput.js”></script>

<script type=”text/javascript”>

// ============== JSON Data ============================
var data = [
{
“id”: “1”, “FB”: “Over Current”, “Group1”: “”, “Group2”: “”, “Group3”: “”, “Group4”: “”, “Group5”: “”, “Group6”: “”, “Group7”: “”, “Group8”: “”,
“children”:
[

{ “id”: “101”, “FB”: “Status”, “Group1”: “Enabled”, “Group2”: “Enabled”, “Group3”: “Enabled”, “Group4”: “Enabled”, “Group5”: “Enabled”, “Group6”: “Enabled”, “Group7”: “Enabled”, “Group8”: “Enabled”, “FBCODE”: “STA” },
{ “id”: “102”, “FB”: “Function”, “Group1”: “IEEE M Inverse”, “Group2”: “IEC S Inverse”, “Group3”: “IEC S Inverse”, “Group4”: “IEC S Inverse”, “Group5”: “IEC S Inverse”, “Group6”: “IEC S Inverse”, “Group7”: “IEC S Inverse”, “Group8”: “IEC S Inverse”, “FBCODE”: “FUN” },
{ “id”: “103”, “FB”: “Current Set”, “Group1”: “10”, “Group2”: “20”, “Group3”: “12”, “Group4”: “12”, “Group5”: “21”, “Group6”: “23”, “Group7”: “20”, “Group8”: “11”, “FBCODE”: “CST” },
{ “id”: “104”, “FB”: “Time Delay”, “Group1”: “50”, “Group2”: “20”, “Group3”: “20”, “Group4”: “20”, “Group5”: “66”, “Group6”: “21”, “Group7”: “20”, “Group8”: “33”, “FBCODE”: “TMD” },
{ “id”: “105”, “FB”: “Char Angle”, “Group1”: “50”, “Group2”: “15”, “Group3”: “15”, “Group4”: “10”, “Group5”: “50”, “Group6”: “10”, “Group7”: “15”, “Group8”: “10”, “FBCODE”: “CHA” },
{ “id”: “106”, “FB”: “Blocking”, “Group1”: “15”, “Group2”: “10”, “Group3”: “50”, “Group4”: “50”, “Group5”: “50”, “Group6”: “50”, “Group7”: “50”, “Group8”: “10”, “FBCODE”: “BLK” },
{ “id”: “107”, “FB”: “tRESET”, “Group1”: “10”, “Group2”: “10”, “Group3”: “10”, “Group4”: “10”, “Group5”: “15”, “Group6”: “50”, “Group7”: “50”, “Group8”: “50”, “FBCODE”: “RES” }

], “FBCODE”: “OVC”
},
{
“id”: “2”, “FB”: “Distance Setup”, “Group1”: “”, “Group2”: “”, “Group3”: “”, “Group4”: “”, “Group5”: “”, “Group6”: “”, “Group7”: “”, “Group8”: “”,
“children”:
[

{ “id”: “201”, “FB”: “Status”, “Group1”: “Enabled”, “Group2”: “Enabled”, “Group3”: “Enabled”, “Group4”: “Enabled”, “Group5”: “Enabled”, “Group6”: “Enabled”, “Group7”: “Enabled”, “Group8”: “Enabled”, “FBCODE”: “STA” },
{ “id”: “202”, “FB”: “Function”, “Group1”: “IEEE M Inverse”, “Group2”: “IEC S Inverse”, “Group3”: “IEC S Inverse”, “Group4”: “IEC S Inverse”, “Group5”: “IEC S Inverse”, “Group6”: “IEC S Inverse”, “Group7”: “IEC S Inverse”, “Group8”: “IEC S Inverse”, “FBCODE”: “FUN” },
{ “id”: “203”, “FB”: “Current Set”, “Group1”: “10”, “Group2”: “20”, “Group3”: “12”, “Group4”: “12”, “Group5”: “11”, “Group6”: “12”, “Group7”: “10”, “Group8”: “11”, “FBCODE”: “CST” },
{ “id”: “204”, “FB”: “Time Delay”, “Group1”: “50”, “Group2”: “20”, “Group3”: “20”, “Group4”: “20”, “Group5”: “56”, “Group6”: “22”, “Group7”: “41”, “Group8”: “23”, “FBCODE”: “TMD” },
{ “id”: “205”, “FB”: “Char Angle”, “Group1”: “15”, “Group2”: “15”, “Group3”: “50”, “Group4”: “10”, “Group5”: “50”, “Group6”: “10”, “Group7”: “10”, “Group8”: “10”, “FBCODE”: “CHA” },
{ “id”: “206”, “FB”: “Blocking”, “Group1”: “10”, “Group2”: “10”, “Group3”: “50”, “Group4”: “10”, “Group5”: “10”, “Group6”: “15”, “Group7”: “15”, “Group8”: “10”, “FBCODE”: “BLK” },
{ “id”: “207”, “FB”: “tRESET”, “Group1”: “50”, “Group2”: “10”, “Group3”: “10”, “Group4”: “15”, “Group5”: “15”, “Group6”: “10”, “Group7”: “10”, “Group8”: “50”, “FBCODE”: “RES” }

], “FBCODE”: “DST”
}

];

var dataDefault = [
{
“id”: “1”, “FB”: “Over Current”, “Group1”: “”, “Group2”: “”, “Group3”: “”, “Group4”: “”, “Group5”: “”, “Group6”: “”, “Group7”: “”, “Group8”: “”,
“children”:
[

{ “id”: “101”, “FB”: “Status”, “Group1”: “Enabled”, “Group2”: “Enabled”, “Group3”: “Enabled”, “Group4”: “Enabled”, “Group5”: “Enabled”, “Group6”: “Enabled”, “Group7”: “Enabled”, “Group8”: “Enabled”, “FBCODE”: “STA” },
{ “id”: “102”, “FB”: “Function”, “Group1”: “IEEE M Inverse”, “Group2”: “IEC S Inverse”, “Group3”: “IEC S Inverse”, “Group4”: “IEC S Inverse”, “Group5”: “IEC S Inverse”, “Group6”: “IEC S Inverse”, “Group7”: “IEC S Inverse”, “Group8”: “IEC S Inverse”, “FBCODE”: “FUN” },
{ “id”: “103”, “FB”: “Current Set”, “Group1”: “10”, “Group2”: “20”, “Group3”: “12”, “Group4”: “12”, “Group5”: “21”, “Group6”: “23”, “Group7”: “20”, “Group8”: “11”, “FBCODE”: “CST” },
{ “id”: “104”, “FB”: “Time Delay”, “Group1”: “50”, “Group2”: “20”, “Group3”: “20”, “Group4”: “20”, “Group5”: “66”, “Group6”: “21”, “Group7”: “20”, “Group8”: “33”, “FBCODE”: “TMD” },
{ “id”: “105”, “FB”: “Char Angle”, “Group1”: “50”, “Group2”: “15”, “Group3”: “15”, “Group4”: “10”, “Group5”: “50”, “Group6”: “10”, “Group7”: “15”, “Group8”: “10”, “FBCODE”: “CHA” },
{ “id”: “106”, “FB”: “Blocking”, “Group1”: “15”, “Group2”: “10”, “Group3”: “50”, “Group4”: “50”, “Group5”: “50”, “Group6”: “50”, “Group7”: “50”, “Group8”: “10”, “FBCODE”: “BLK” },
{ “id”: “107”, “FB”: “tRESET”, “Group1”: “10”, “Group2”: “10”, “Group3”: “10”, “Group4”: “10”, “Group5”: “15”, “Group6”: “50”, “Group7”: “50”, “Group8”: “50”, “FBCODE”: “RES” }

], “FBCODE”: “OVC”
},
{
“id”: “2”, “FB”: “Distance Setup”, “Group1”: “”, “Group2”: “”, “Group3”: “”, “Group4”: “”, “Group5”: “”, “Group6”: “”, “Group7”: “”, “Group8”: “”,
“children”:
[

{ “id”: “201”, “FB”: “Status”, “Group1”: “Enabled”, “Group2”: “Enabled”, “Group3”: “Enabled”, “Group4”: “Enabled”, “Group5”: “Enabled”, “Group6”: “Enabled”, “Group7”: “Enabled”, “Group8”: “Enabled”, “FBCODE”: “STA” },
{ “id”: “202”, “FB”: “Function”, “Group1”: “IEEE M Inverse”, “Group2”: “IEC S Inverse”, “Group3”: “IEC S Inverse”, “Group4”: “IEC S Inverse”, “Group5”: “IEC S Inverse”, “Group6”: “IEC S Inverse”, “Group7”: “IEC S Inverse”, “Group8”: “IEC S Inverse”, “FBCODE”: “FUN” },
{ “id”: “203”, “FB”: “Current Set”, “Group1”: “10”, “Group2”: “20”, “Group3”: “12”, “Group4”: “12”, “Group5”: “11”, “Group6”: “12”, “Group7”: “10”, “Group8”: “11”, “FBCODE”: “CST” },
{ “id”: “204”, “FB”: “Time Delay”, “Group1”: “50”, “Group2”: “20”, “Group3”: “20”, “Group4”: “20”, “Group5”: “56”, “Group6”: “22”, “Group7”: “41”, “Group8”: “23”, “FBCODE”: “TMD” },
{ “id”: “205”, “FB”: “Char Angle”, “Group1”: “15”, “Group2”: “15”, “Group3”: “50”, “Group4”: “10”, “Group5”: “50”, “Group6”: “10”, “Group7”: “10”, “Group8”: “10”, “FBCODE”: “CHA” },
{ “id”: “206”, “FB”: “Blocking”, “Group1”: “10”, “Group2”: “10”, “Group3”: “50”, “Group4”: “10”, “Group5”: “10”, “Group6”: “15”, “Group7”: “15”, “Group8”: “10”, “FBCODE”: “BLK” },
{ “id”: “207”, “FB”: “tRESET”, “Group1”: “50”, “Group2”: “10”, “Group3”: “10”, “Group4”: “15”, “Group5”: “15”, “Group6”: “10”, “Group7”: “10”, “Group8”: “50”, “FBCODE”: “RES” }

], “FBCODE”: “DST”
}

];
// ============== JSON Data ============================

// ============== Chart Section Start ===================

// prepare chart data as an array
var chartSource = new Array();

// ============== Chart Section Start ===================

$(document).ready(function () {

LoadChartSource();

// Create jqxTabs.
$(‘#jqxSettingScreenTabs’).jqxTabs({ width: ‘90%’, position: ‘top’, theme: ‘energyblue’ });

// Refrest the chart based on the values
$(“#GraphWindow_Tab”).on(‘click’, function () {
ReLoadChartControl(‘RELOAD’, null, null);
});

function LoadChartSource() {

if (chartSource.length == 0) {
chartSource = [
{ “MoC”: “1.05”, GroupValue: 52.8653 },
{ “MoC”: “1.06”, GroupValue: 44.2799 },
{ “MoC”: “1.07”, GroupValue: 38.1470 },
{ “MoC”: “1.08”, GroupValue: 33.5467 },
{ “MoC”: “1.09”, GroupValue: 29.9684 },
{ “MoC”: “1.1”, GroupValue: 27.1053 },
{ “MoC”: “1.2”, GroupValue: 14.2117 },
{ “MoC”: “1.3”, GroupValue: 9.9029 },
{ “MoC”: “1.4”, GroupValue: 7.7412 },
{ “MoC”: “1.5”, GroupValue: 6.4390 },
{ “MoC”: “1.8”, GroupValue: 4.4691 },
{ “MoC”: “2”, GroupValue: 3.8032 },
{ “MoC”: “3”, GroupValue: 2.4322 },
{ “MoC”: “4”, GroupValue: 1.9458 },
{ “MoC”: “5”, GroupValue: 1.6883 },
{ “MoC”: “6”, GroupValue: 1.5255 },
{ “MoC”: “7”, GroupValue: 1.4117 },
{ “MoC”: “8”, GroupValue: 1.3267 },
{ “MoC”: “9”, GroupValue: 1.2604 },
{ “MoC”: “10”, GroupValue: 1.2068 },
{ “MoC”: “12”, GroupValue: 1.1247 },
{ “MoC”: “15”, GroupValue: 1.0394 },
{ “MoC”: “18”, GroupValue: 0.9794 },
{ “MoC”: “20”, GroupValue: 0.9481 },
{ “MoC”: “22”, GroupValue: 0.9216 },
{ “MoC”: “24”, GroupValue: 0.8988 },
{ “MoC”: “26”, GroupValue: 0.8789 },
{ “MoC”: “28”, GroupValue: 0.8613 },
{ “MoC”: “30”, GroupValue: 0.8456 },
{ “MoC”: “40”, GroupValue: 0.7866 },
{ “MoC”: “50”, GroupValue: 0.7468 },
{ “MoC”: “75”, GroupValue: 0.6850 },
{ “MoC”: “100”, GroupValue: 0.6478 }

];
}

var chartdataAdapter = new $.jqx.dataAdapter(chartSource, { autoBind: true });
// prepare jqxChart settings
var settings = {
title: “Title”,
description: “Description”,
enableAnimations: true,
showLegend: true,
padding: { left: 5, top: 5, right: 40, bottom: 5 },
titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
source: chartdataAdapter,
xAxis:
{
dataField: ‘MoC’,
showGridLines: true,
unitInterval: 10,
minValue: 0,
maxValue: 100,
description: ‘Current in Multiples of settings’
},
colorScheme: ‘scheme02’,
seriesGroups:
[
{
type: ‘line’,
valueAxis:
{
displayValueAxis: true,
description: ”,
axisSize: ‘auto’,
tickMarksColor: ‘#888888’,
minValue: 0,
maxValue: 100,
description: ‘Time In secs’
},
series: [
{ dataField: ‘GroupValue’, displayText: ‘Value’ }
]
}
]
};

// setup the chart
$(‘#jqxChart’).jqxChart(settings);
}

function CalculateYaxis(T, I, Is) {
//debugger;

//T is the time delay.
//I is the X axis,
//Is is the current setting.
//OP is the desired output.

//IEEE MI
var OP = T * (0.114 + 0.0515 / (Math.pow(I, 0.02) – 1));

return OP;
}

function ReLoadChartControl(LoadType, vGroup, vRow) {
//debugger;

if (LoadType == ‘RELOAD’) {
// This happens when the slider inside the Graph popup is changed.
var vTD = parseInt($(“#GW_sldrTimeDelay”).val());
var vCurSet = parseInt($(“#GW_sldrCurrSet”).val());
}
else {
//Happens when the chart icon is clicked, to set the chart values based on the slider control in the parent screen.
var vTD = parseInt(data[vRow – 1].children[3][vGroup].toString());
var vCurSet = parseInt(data[vRow – 1].children[2][vGroup].toString());

parseInt($(“#GW_sldrTimeDelay”).val(vTD));
parseInt($(“#GW_sldrCurrSet”).val(vCurSet));
}
//CalculateYaxis(vTD, 1, vCurSet)
chartSource = [
{ “MoC”: “1.05”, GroupValue: CalculateYaxis(vTD, 1.05, vCurSet) },
{ “MoC”: “1.06”, GroupValue: CalculateYaxis(vTD, 1.06, vCurSet) },
{ “MoC”: “1.07”, GroupValue: CalculateYaxis(vTD, 1.07, vCurSet) },
{ “MoC”: “1.08”, GroupValue: CalculateYaxis(vTD, 1.08, vCurSet) },
{ “MoC”: “1.09”, GroupValue: CalculateYaxis(vTD, 1.09, vCurSet) },
{ “MoC”: “1.1”, GroupValue: CalculateYaxis(vTD, 1.1, vCurSet) },
{ “MoC”: “1.2”, GroupValue: CalculateYaxis(vTD, 1.2, vCurSet) },
{ “MoC”: “1.3”, GroupValue: CalculateYaxis(vTD, 1.3, vCurSet) },
{ “MoC”: “1.4”, GroupValue: CalculateYaxis(vTD, 1.4, vCurSet) },
{ “MoC”: “1.5”, GroupValue: CalculateYaxis(vTD, 1.5, vCurSet) },
{ “MoC”: “1.8”, GroupValue: CalculateYaxis(vTD, 1.8, vCurSet) },
{ “MoC”: “2”, GroupValue: CalculateYaxis(vTD, 2, vCurSet) },
{ “MoC”: “3”, GroupValue: CalculateYaxis(vTD, 3, vCurSet) },
{ “MoC”: “4”, GroupValue: CalculateYaxis(vTD, 4, vCurSet) },
{ “MoC”: “5”, GroupValue: CalculateYaxis(vTD, 5, vCurSet) },
{ “MoC”: “6”, GroupValue: CalculateYaxis(vTD, 6, vCurSet) },
{ “MoC”: “7”, GroupValue: CalculateYaxis(vTD, 7, vCurSet) },
{ “MoC”: “8”, GroupValue: CalculateYaxis(vTD, 8, vCurSet) },
{ “MoC”: “9”, GroupValue: CalculateYaxis(vTD, 9, vCurSet) },
{ “MoC”: “10”, GroupValue: CalculateYaxis(vTD, 10, vCurSet) },
{ “MoC”: “12”, GroupValue: CalculateYaxis(vTD, 12, vCurSet) },
{ “MoC”: “15”, GroupValue: CalculateYaxis(vTD, 15, vCurSet) },
{ “MoC”: “18”, GroupValue: CalculateYaxis(vTD, 18, vCurSet) },
{ “MoC”: “20”, GroupValue: CalculateYaxis(vTD, 20, vCurSet) },
{ “MoC”: “22”, GroupValue: CalculateYaxis(vTD, 22, vCurSet) },
{ “MoC”: “24”, GroupValue: CalculateYaxis(vTD, 24, vCurSet) },
{ “MoC”: “26”, GroupValue: CalculateYaxis(vTD, 26, vCurSet) },
{ “MoC”: “28”, GroupValue: CalculateYaxis(vTD, 28, vCurSet) },
{ “MoC”: “30”, GroupValue: CalculateYaxis(vTD, 30, vCurSet) },
{ “MoC”: “40”, GroupValue: CalculateYaxis(vTD, 40, vCurSet) },
{ “MoC”: “50”, GroupValue: CalculateYaxis(vTD, 50, vCurSet) },
{ “MoC”: “75”, GroupValue: CalculateYaxis(vTD, 75, vCurSet) },
{ “MoC”: “100”, GroupValue: CalculateYaxis(vTD, 100, vCurSet) }
];

var source = { localdata: chartSource, datatype: ‘array’ }
var dataAdapter = new $.jqx.dataAdapter(source, { autoBind: true });
$(‘#jqxChart’).jqxChart({ _renderData: new Array() });
$(‘#jqxChart’).jqxChart({ source: dataAdapter });
$(‘#jqxChart’).jqxChart(‘refresh’);
}

function LoadControlsInGraphPopUp(vGroup, vRow) {
//debugger;
var vStat = data[vRow – 1].children[0][vGroup].toString();
var vFunc = data[vRow – 1].children[1][vGroup].toString();

var vCurSet = parseInt(data[vRow – 1].children[2][vGroup].toString());
var vTD = parseInt(data[vRow – 1].children[3][vGroup].toString());
var vCharAngle = parseInt(data[vRow – 1].children[4][vGroup].toString());
var vBlocking = parseInt(data[vRow – 1].children[5][vGroup].toString());
var vtRESET = parseInt(data[vRow – 1].children[6][vGroup].toString());

parseInt($(“#GW_ddlStatus”).val(vStat));
parseInt($(“#GW_ddlFunction”).val(vFunc));

parseInt($(“#GW_sldrTimeDelay”).val(vTD));
parseInt($(“#GW_sldrCurrSet”).val(vCurSet));
parseInt($(“#GW_sldrCharAngle”).val(vCharAngle));
parseInt($(“#GW_sldrBlocking”).val(vBlocking));
parseInt($(“#GW_sldrtRESET”).val(vtRESET));

//GraphWindow_Content – data[vRow – 1].children[6][vGroup].toString()
//Use this to update the treeGrid and set the updated values of the controls in it for the particulat group and function block.
$(“#GraphWindow_Content”).attr(‘Group’, vGroup);
$(“#GraphWindow_Content”).attr(‘Row’, vRow);
}

var StatusDdlSource = [“Select”, “Enabled”, “Disabled”, “Enabled VTS”,
“Enabled CH Fail”];

var FunctionDdlSource = [“Select”, “DT”, “IEC S Inverse”, “IEC V Inverse”, “IEC E Inverse”, “UK LT Inverse”, “IEEE M Inverse”, “IEEE V Inverse”, “IEEE E Inverse”,
“US Inverse”, “US ST Inverse”];

var CopiedValue = new Array();

var source =
{
dataType: “json”,
dataFields: [
{ name: “id”, type: “number” },
{ name: “FB”, type: “string” },
{ name: “Group1”, type: “string” },
{ name: “Group2”, type: “string” },
{ name: “Group3”, type: “string” },
{ name: “Group4”, type: “string” },
{ name: “Group5”, type: “string” },
{ name: “Group6”, type: “string” },
{ name: “Group7”, type: “string” },
{ name: “Group8”, type: “string” },
{ name: “children”, type: “array” },
],

hierarchy:
{
root: “children”
},
localData: data,
id: “id”
};

var dataAdapter = new $.jqx.dataAdapter(source, {
loadComplete: function () {

}
});

$(“#treeGrid”).jqxTreeGrid(
{
theme: ‘energyblue’,
sortable: false,
checkboxes: true,
columnsReorder: true,
source: dataAdapter,
altrows: false,
editSettings: { saveOnPageChange: true, saveOnBlur: false, saveOnSelectionChange: true, cancelOnEsc: true, saveOnEnter: true, editOnDoubleClick: true, editOnF2: true },
autoRowHeight: false,
editable: true,
ready: function () {
// Expand rows with ID = 1, 2
$(“#treeGrid”).jqxTreeGrid(‘expandRow’, 1);
$(“#treeGrid”).jqxTreeGrid(‘expandRow’, 2);
},
// called when jqxTreeGrid is rendered.
rendered: function () {

if ($(“.ActivityMenu”).length > 0) {

$(“.ActivityMenu”).jqxMenu({ width: ’30’, height: ’30px’, theme: ‘energyblue’ });

$(‘.ActivityMenu’).on(‘itemclick’, function (event) {

//debugger;
var element = event.args;
var elementId = event.args.getAttribute(‘ElemId’);

if (elementId == ‘COPY’) {
var vGroup = element.parentNode.getAttribute(‘Group’).toString();
var vRowKey = element.parentNode.getAttribute(‘RowKey’);

CopiedValue = new Array();
vRowKey = parseInt(vRowKey + ’01’);
for (var i = 0; i <= 6; i++) {
CopiedValue[i] = $(“#treeGrid”).jqxTreeGrid(‘getCellValue’, vRowKey, vGroup);
vRowKey++;
}
}
else if (elementId == ‘PASTE’) {

$(“#treeGrid”).jqxTreeGrid(‘beginUpdate’);

var vGroup = element.parentNode.getAttribute(‘Group’).toString();
var vRowKey = element.parentNode.getAttribute(‘RowKey’);

vRowKey = parseInt(vRowKey + ’01’);
//debugger;
for (var i = 0; i <= 6; i++) {
$(“#treeGrid”).jqxTreeGrid(‘setCellValue’, vRowKey, vGroup, CopiedValue[i]);
vRowKey++;
}

$(“#treeGrid”).jqxTreeGrid(‘endUpdate’);
}
else if (elementId == ‘RESET’) {

$(“#treeGrid”).jqxTreeGrid(‘beginUpdate’);

var vGroup = element.parentNode.getAttribute(‘Group’).toString();
var vRowKey = element.parentNode.getAttribute(‘RowKey’);
var vInitialRowKey = element.parentNode.getAttribute(‘RowKey’);

vRowKey = parseInt(vRowKey + ’01’);
for (var i = 0; i <= 6; i++) {
var vdata = dataDefault[vInitialRowKey – 1].children[i][vGroup];
$(“#treeGrid”).jqxTreeGrid(‘setCellValue’, vRowKey, vGroup, vdata);
vRowKey++;
}

$(“#treeGrid”).jqxTreeGrid(‘endUpdate’);
}
else if (elementId == ‘UPCURR’) {
//Open dialog here
//$(‘#UploadAllWindow’).jqxWindow(‘open’);
}
else if (elementId == ‘UPUPD’) {
//Open dialog here
//$(‘#UploadSelectedWindow’).jqxWindow(‘open’);
}
});

}
if ($(“.OpenGraph”).length > 0) {

var btnOpenGraphClick = function (event) {
//Open PopUp here
$(‘#GraphWindow’).jqxWindow(‘open’);
}

$(“.OpenGraph”).on(‘click’, function (event) {
//debugger;
var vGroup = event.target.getAttribute(‘data-group’); // this will give the current Group. i.e, Group1, Group2 etc..
var vRow = event.target.getAttribute(‘data-row’);

LoadControlsInGraphPopUp(vGroup, vRow);
ReLoadChartControl(‘LOAD’, vGroup, vRow);

// Update the chartSource before you open the chart
btnOpenGraphClick(event);
});

}
if ($(“.OpenNote”).length > 0) {

var btnOpenNoteClick = function (event) {
//Open PopUp here
$(‘#NotesWindow’).jqxWindow(‘open’);
}

$(“.OpenNote”).on(‘click’, function (event) {
btnOpenNoteClick(event);
});

}
if ($(“.FBtooltip”).length > 0) {

$(“.FBtooltip”).on(‘mouseover’, function (event) {
//debugger;
var vDesc = event.toElement.getAttribute(‘data-desc’);
$(“.FBtooltip”).jqxTooltip({ content: “<table width=’100px’><tr><td align=’left’><b>Description:</b> <br> <p>The descripion of <i>” + vDesc + “</i> function block will apper here.</p></td></tr></table>”, theme: ‘energyblue’ });
});

}
},
columns: [
{ text: ‘ID’, editable: false, dataField: ‘id’, pinned: true, width: 150 },
{
text: ‘Functional Block’, dataField: ‘FB’, editable: false, pinned: true, width: 200, columnType: “none”,
cellsRenderer: function (rowKey, dataField, value, data) {
//debugger;
if (data.level == 0) {
return “<label id=’lblFunBlock” + rowKey + “‘ data-desc='” + value + “‘ class=’FBtooltip’> ” + value + ” </label>”;
}
else {
return “<label id=’lblFunBlock” + rowKey + “‘ data-desc='” + value + “‘ class=’FBtooltip’> ” + value + ” </label> “;
}
}

},
{
text: ‘Group 1’, dataField: ‘Group1’, width: 200, height: 60, columnType: “custom”,
cellsRenderer: function (rowKey, dataField, value, data) {
//debugger;
if (data.level == 0) {
var DisplayHTML = “” +
“<div class=’ActivityMenu’>
- v” +
  “<ul Group='” + dataField + “‘ RowKey = ” + rowKey + “> <li ElemId=’COPY’>Copy Value
” +
“</div>”;
return DisplayHTML;
}
else {
return value;
}
},
createEditor: function (row, cellvalue, editor, cellText, width, height) {
// construct the editor.
//debugger;
switch (row) {

// Status
case “101”:
case “201”:
var id = “Grp1_ddl_” + row.toString();
var dropDownList = $(“<div id='” + id + “‘ class=’105dropDownList’ style=’border: none;’></div>”).appendTo(editor);
dropDownList.jqxDropDownList({ autoDropDownHeight: true, source: StatusDdlSource, width: ‘100%’, height: ‘100%’, theme: ‘energyblue’ });
break;

//Function
case “102”:
case “202”:
var id = “Grp1_ddl_” + row.toString();
var dropDownList = $(“<div id='” + id + “‘ class=’105dropDownList’ style=’border: none;’></div>”).appendTo(editor);
dropDownList.jqxDropDownList({ autoDropDownHeight: true, source: FunctionDdlSource, width: ‘100%’, height: ‘100%’, theme: ‘energyblue’ });
break;

default:
var id = “Grp1_sldr_” + row.toString();
var btnid = “Grp1_Popbtn_” + row.toString();

var vMin = 0;
var vMax = 100;
var vStepVal = 1;

var table = $(“<table id=’tbl1_” + row.toString() + “‘ class=’MinMaxToolTip’ width=’100%’><tr><td valign=’top’ width=’75%’><div id='” + id + “‘ class=’slider1′ style=’height:15px’></div></td><td align=’right’ valign=’top’>”
+ “<input type=’button’ class=’PopBtn’ id='” + btnid + “‘ value=’…’ style=’height:20px’/> </td></tr></table>”).appendTo(editor);

$(‘#’ + id).jqxNumberInput({ width: 150, inputMode: ‘advanced’, spinMode: ‘advanced’, symbol: ‘A’, symbolPosition: ‘right’, spinButtons: true, spinButtonsStep: 1, theme: ‘energyblue’ });
$(‘#’ + btnid).jqxButton({ width: 25, theme: ‘energyblue’ });
$(“.MinMaxToolTip”).jqxTooltip({ autoHide: true, content: “<table width=’100px’><tr><td align=’left’><b>Min: ” + vMin + “</b><br>0<br><br><b>Max</b><br>” + vMax + “<br><br><b>Step Value</b><br>” + vStepVal + “<br><br></td></tr></table>”, theme: ‘energyblue’ });
break;

}

},
initEditor: function (row, cellvalue, editor, celltext, width, height) {
// set the editor’s current value. The callback is called each time the editor is displayed.
//debugger;
switch (row) {

// Status
case “101”:
case “201”:
$(editor.find(‘#Grp1_ddl_’ + row.toString())).val(cellvalue);
break;

//Function
case “102”:
case “202”:
$(editor.find(‘#Grp1_ddl_’ + row.toString())).val(cellvalue);
break;

default:
$(editor.find(‘#Grp1_sldr_’ + row.toString())).val(cellvalue);
break;
}
},
getEditorValue: function (row, cellvalue, editor) {
//debugger;
switch (row) {

case “101”:
case “201”:
return $(editor.find(‘#Grp1_ddl_’ + row.toString())).val();
break;

case “102”:
case “202”:
return $(editor.find(‘#Grp1_ddl_’ + row.toString())).val();
break;

default:
return $(editor.find(‘#Grp1_sldr_’ + row.toString())).val();
break;
}
return “”;
}

}

]
});

//================== Add and Remove Group Section Start ======================

var CurrGroupCount = 1;

//Buttons
$(“#btnAddGroup”).jqxButton({ width: 120, theme: ‘energyblue’, disabled:true });
$(“#btnDeleteGroup”).jqxButton({ width: 120, theme: ‘energyblue’, disabled: true });

$(“#btnAddGroup”).on(‘click’, function (event) {

//debugger;
$(“#treeGrid”).jqxTreeGrid(‘beginUpdate’);

if (CurrGroupCount <= 8) {
CurrGroupCount = CurrGroupCount + 1;
}
$(“#treeGrid”).jqxTreeGrid(‘showColumn’, ‘Group’ + CurrGroupCount.toString());
$(“#treeGrid”).jqxTreeGrid(‘endUpdate’);

});

$(“#btnDeleteGroup”).on(‘click’, function (event) {
$(“#treeGrid”).jqxTreeGrid(‘beginUpdate’);

//Atleast one group to be displayed all the time.
if (CurrGroupCount > 1) {
$(“#treeGrid”).jqxTreeGrid(‘hideColumn’, ‘Group’ + CurrGroupCount.toString());
CurrGroupCount = CurrGroupCount – 1;
}
$(“#treeGrid”).jqxTreeGrid(‘endUpdate’);
});

//================== Listbox Section End ======================

//Show/Hide Columns on start up.
//This will hide the ID column on page load. The ID column can be used for programmatic purpose
$(“#treeGrid”).jqxTreeGrid(‘hideColumn’, ‘id’);
$(“#treeGrid”).jqxTreeGrid(‘showColumn’, ‘Group1’);

//Lock the
$(“#treeGrid”).jqxTreeGrid(‘lockRow’, ‘1’);
$(“#treeGrid”).jqxTreeGrid(‘lockRow’, ‘2’);
$(“#treeGrid”).jqxTreeGrid(‘lockRow’, ‘3’);
$(“#treeGrid”).jqxTreeGrid(‘lockRow’, ‘4’);

// =============== Graph Window Section Start ================
var GraphWindow = (function () {

//Creating the demo window
function _createWindow() {
$(‘#GraphWindow’).jqxWindow({
showCollapseButton: true, maxHeight: 500, maxWidth: 900, minHeight: 200, minWidth: 200, height: 500, width: 900, isModal: true, autoOpen: false, theme: ‘energyblue’,
initContent: function () {
$(‘#GraphWindow’).jqxWindow(‘focus’);
}
});
};

return {
config: {
dragArea: null
},
init: function () {
//Adding jqxWindow
_createWindow();
}
};
} ());

$(“#GW_btnSave”).on(‘click’, function () {
//Save the data
$(‘#GraphWindow’).jqxWindow(‘close’);
});

$(“#GW_btnCancel”).on(‘click’, function () {
$(‘#GraphWindow’).jqxWindow(‘close’);
});

// =============== Graph Window Section End ==================

// =============== Notes Window Section Start ================
var NotesWindow = (function () {

//Creating the demo window
function _createWindow() {
$(‘#NotesWindow’).jqxWindow({
showCollapseButton: true, maxHeight: 400, maxWidth: 600, minHeight: 200, minWidth: 200, height: 220, width: 500, isModal: true, autoOpen: false, theme: ‘energyblue’,
initContent: function () {
$(‘#NotesWindow’).jqxWindow(‘focus’);
}
});
};

return {
config: {
dragArea: null
},
init: function () {
//Adding jqxWindow
_createWindow();
}
};
} ());

$(“#NT_btnSave”).on(‘click’, function () {
//Save the data
var vGroup = $(“#GraphWindow_Content”).attr(‘Group’);
var vRow = $(“#GraphWindow_Content”).attr(‘Row’);

$(“#treeGrid”).jqxTreeGrid(‘beginUpdate’);
//Logic – Save the control status to the parent form.
$(“#treeGrid”).jqxTreeGrid(‘endUpdate’);

$(‘#NotesWindow’).jqxWindow(‘close’);
});

$(“#NT_btnCancel”).on(‘click’, function () {
$(‘#NotesWindow’).jqxWindow(‘close’);
});
// =============== Notes Window Section End ==================

// =============== Upload All Window Section Strat ===========
var UploadAllWindow = (function () {

//Creating the demo window
function _createWindow() {
$(‘#UploadAllWindow’).jqxWindow({
showCollapseButton: true, height: 150, width: 300, isModal: true, autoOpen: false, theme: ‘energyblue’,
initContent: function () {
$(‘#UploadAllWindow’).jqxWindow(‘focus’);
}
});
};

return {
config: {
dragArea: null
},
init: function () {
//Adding jqxWindow
_createWindow();
}
};
} ());

$(“#UPLDALL_btnOk”).on(‘click’, function () {
$(‘#UploadAllWindow’).jqxWindow(‘close’);
});

$(“#UPLDALL_btnCancel”).on(‘click’, function () {
$(‘#UploadAllWindow’).jqxWindow(‘close’);
});

// =============== Upload All Window Section End ==================

// =============== Upload Selected Window Section Strat ===========
var UploadSelectedWindow = (function () {

//Creating the demo window
function _createWindow() {
$(‘#UploadSelectedWindow’).jqxWindow({
showCollapseButton: true, height: 150, width: 300, isModal: true, autoOpen: false, theme: ‘energyblue’,
initContent: function () {
$(‘#UploadSelectedWindow’).jqxWindow(‘focus’);
}
});
};

return {
config: {
dragArea: null
},
init: function () {
//Adding jqxWindow
_createWindow();
}
};
} ());

$(“#UPLDSEL_btnCancel”).on(‘click’, function () {
$(‘#UploadSelectedWindow’).jqxWindow(‘close’);
});

$(“#UPLDSEL_btnOk”).on(‘click’, function () {
$(‘#UploadSelectedWindow’).jqxWindow(‘close’);
});

// =============== Upload Selected Window Section End =============

// =============== Window Section Init Start ======================
GraphWindow.init();
NotesWindow.init();
UploadAllWindow.init();
UploadSelectedWindow.init();
// ============== Window Section Init End =========================

// =============== Controls in Graph Window Section Start =============
$(“#GW_ddlStatus”).jqxDropDownList({ source: StatusDdlSource, selectedIndex: 1, width: ‘200’, height: ’25’, theme: ‘energyblue’ });
$(“#GW_ddlFunction”).jqxDropDownList({ source: FunctionDdlSource, selectedIndex: 6, width: ‘200’, height: ’25’, theme: ‘energyblue’ });

$(“#GW_sldrCurrSet”).jqxNumberInput({ width: 150, inputMode: ‘simple’, spinMode: ‘simple’, symbol: ‘A’, symbolPosition: ‘right’, spinButtons: false, spinButtonsStep: 1, theme: ‘energyblue’ });
$(“#GW_sldrTimeDelay”).jqxNumberInput({ width: 150, inputMode: ‘simple’, spinMode: ‘simple’, symbol: ‘A’, symbolPosition: ‘right’, spinButtons: false, spinButtonsStep: 1, theme: ‘energyblue’ });
$(“#GW_sldrCharAngle”).jqxNumberInput({ width: 150, inputMode: ‘simple’, spinMode: ‘simple’, symbol: ‘A’, symbolPosition: ‘right’, spinButtons: false, spinButtonsStep: 1, theme: ‘energyblue’ });
$(“#GW_sldrBlocking”).jqxNumberInput({ width: 150, inputMode: ‘simple’, spinMode: ‘simple’, symbol: ‘A’, symbolPosition: ‘right’, spinButtons: false, spinButtonsStep: 1, theme: ‘energyblue’ });
$(“#GW_sldrtRESET”).jqxNumberInput({ width: 150, inputMode: ‘simple’, spinMode: ‘simple’, symbol: ‘A’, symbolPosition: ‘right’, spinButtons: false, spinButtonsStep: 1, theme: ‘energyblue’ });

$(“#GW_btnCurrSet”).jqxButton({ width: ’25’, height: ’25’, theme: ‘energyblue’ });
$(“#GW_btnTimeDelay”).jqxButton({ width: ’25’, height: ’25’, theme: ‘energyblue’ });
$(“#GW_btnCharAngle”).jqxButton({ width: ’25’, height: ’25’, theme: ‘energyblue’ });
$(“#GW_btnBlocking”).jqxButton({ width: ’25’, height: ’25’, theme: ‘energyblue’ });
$(“#GW_btntRESET”).jqxButton({ width: ’25’, height: ’25’, theme: ‘energyblue’ });

var vMin = 0;
var vMax = 100;
var vStepVal = 1;

$(“#GW_trCurrSet”).jqxTooltip({ autoHide: true, content: “<table width=’100px’><tr><td align=’left’><b>Min: ” + vMin + “</b><br>0<br><br><b>Max</b><br>” + vMax + “<br><br><b>Step Value</b><br>” + vStepVal + “<br><br></td></tr></table>”, theme: ‘energyblue’ });
$(“#GW_trTimeDelay”).jqxTooltip({ autoHide: true, content: “<table width=’100px’><tr><td align=’left’><b>Min: ” + vMin + “</b><br>0<br><br><b>Max</b><br>” + vMax + “<br><br><b>Step Value</b><br>” + vStepVal + “<br><br></td></tr></table>”, theme: ‘energyblue’ });
$(“#GW_trCharAngle”).jqxTooltip({ autoHide: true, content: “<table width=’100px’><tr><td align=’left’><b>Min: ” + vMin + “</b><br>0<br><br><b>Max</b><br>” + vMax + “<br><br><b>Step Value</b><br>” + vStepVal + “<br><br></td></tr></table>”, theme: ‘energyblue’ });
$(“#GW_trBlocking”).jqxTooltip({ autoHide: true, content: “<table width=’100px’><tr><td align=’left’><b>Min: ” + vMin + “</b><br>0<br><br><b>Max</b><br>” + vMax + “<br><br><b>Step Value</b><br>” + vStepVal + “<br><br></td></tr></table>”, theme: ‘energyblue’ });
$(“#GW_trtRESET”).jqxTooltip({ autoHide: true, content: “<table width=’100px’><tr><td align=’left’><b>Min: ” + vMin + “</b><br>0<br><br><b>Max</b><br>” + vMax + “<br><br><b>Step Value</b><br>” + vStepVal + “<br><br></td></tr></table>”, theme: ‘energyblue’ });

$(“#GW_btnSave”).jqxButton({ width: ‘150’, height: ’30’, theme: ‘energyblue’ });
$(“#GW_btnCancel”).jqxButton({ width: ‘150’, height: ’30’, theme: ‘energyblue’ });
// =============== Controls in Graph Window Section End ===============

// =============== Controls in Notes Section Start ====================
$(“#NT_Editor”).jqxEditor({ tools: ‘bold italic underline’, width: ‘100%’, height: ‘100%’, theme: ‘energyblue’ });
$(“#NT_btnSave”).jqxButton({ width: ‘100’, height: ’30’, theme: ‘energyblue’ });
$(“#NT_btnCancel”).jqxButton({ width: ‘100’, height: ’30’, theme: ‘energyblue’ });
// =============== Controls in Notes Section End ======================

//Upload All Window
// =============== Controls in Upload Dialog Section Start ================
$(“#UPLDALL_btnCancel”).jqxButton({ width: ‘100’, height: ’30’, theme: ‘energyblue’ });
$(“#UPLDALL_btnOk”).jqxButton({ width: ‘100’, height: ’30’, theme: ‘energyblue’ });
// =============== Controls in Upload Dialog Section End ==================

//Upload Selected Window
// =============== Controls in Upload Selected Dialog Section Start ================
$(“#UPLDSEL_btnCancel”).jqxButton({ width: ‘100’, height: ’30’, theme: ‘energyblue’ });
$(“#UPLDSEL_btnOk”).jqxButton({ width: ‘100’, height: ’30’, theme: ‘energyblue’ });
// =============== Controls in Upload Selected Dialog Section End ==================

//
$(“#SET_btnSave”).jqxButton({ width: ‘100’, height: ’30’, theme: ‘energyblue’ });
});

</script>
</head>
<body class=’default’>
<div id=’jqxWidget’>
<div id=’jqxSettingScreenTabs’>
- System
- CB Control
- Date and Time
- CT and VT Ratios
- Record Control
- Disturb Recorder
<div>
<table style=”width:100%” border=”0″>
<tr>
<td> </td>
</tr>
<tr>
<td>
<table>
<tr>
<td valign=”top” align=”right” style=”height:auto”>
<input type=”button” id=”btnAddGroup” style=”cursor:pointer” value=”Add Group” />
<input type=”button” id=”btnDeleteGroup” style=”cursor:pointer” value=”Delete Group”/>
</td>
<td>

</td>
</tr>
<tr>
<td style=”width:100%”>
<div id=”treeGrid”></div>
</td>
<td >

</td>
</tr>
<tr>
<td align=”right” valign=”middle”>
<input id=”SET_btnSave” type=”button” value=”Save” />
</td>
<td>

</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<div id=”GraphWindow”>
<div id=”GraphWindow_Header”>
<span>
Graphical Representation
</span>
</div>
<div style=”overflow: hidden;” id=”GraphWindow_Content”>
<div id=”GraphWindow_Tab”>
<table width=”100%”>
<tr>
<td width=”40%” height=”100%” valign=”top”>
<table>
<tr>
<td width=”30%”>Status </td>
<td colspan=’2′><div id=”GW_ddlStatus”></div></td>
</tr>
<tr>
<td>Function </td>
<td colspan=’2′><div id=”GW_ddlFunction”></div></td>
</tr>
<tr id=’GW_trCurrSet’>
<td>Current Set</td>
<td><div id=”GW_sldrCurrSet”></div></td>
<td><input type=”button” id=”GW_btnCurrSet” value=”…” /></td>
</tr>
<tr id=’GW_trTimeDelay’>
<td>Time Delay</td>
<td><div id=”GW_sldrTimeDelay”></div></td>
<td><input type=”button” id=”GW_btnTimeDelay” value=”…” /></td>
</tr>
<tr id=’GW_trCharAngle’>
<td>Char Angle</td>
<td><div id=”GW_sldrCharAngle”></div></td>
<td><input type=”button” id=”GW_btnCharAngle” value=”…” /></td>
</tr>
<tr id=’GW_trBlocking’>
<td>Blocking</td>
<td><div id=”GW_sldrBlocking”></div></td>
<td><input type=”button” id=”GW_btnBlocking” value=”…” /></td>
</tr>
<tr id=’GW_trtRESET’>
<td>tRESET</td>
<td><div id=”GW_sldrtRESET”></div></td>
<td><input type=”button” id=”GW_btntRESET” value=”…” /></td>
</tr>
</table>

</td>
<td width=”60%”>
<div>
<div id=’host’ style=”margin: 0 auto; width: 500px; height: 400px;”>
<div id=’jqxChart’ style=”width: 500px; height: 400px; position: relative; left: 0px; top: 0px;”>
</div>
</div>
</div>
</td>
</tr>
<tr><td> </td><td> </td></tr>
<tr>
<td width=”70%”> </td>
<td width=”30%” align=”right”> <input type=”button” value=”Cancel” id=’GW_btnCancel’ /> <input type=”button” value=”Save” id=’GW_btnSave’ /> </td>
</tr>
</table>

</div>
</div>
</div>

</td>
</tr>
<tr>
<td>
<div id=”NotesWindow”>
<div id=”NotesWindow_Header”>
<span>
Notes
</span>
</div>
<div style=”overflow: hidden;” id=”NotesWindow_Content”>
<div id=”NotesWindow_Tab”>
<table width=”100%”>
<tr>
<td width=”100%”>
<div id=”NT_Editor”></div>
</td>
</tr>
<tr>
<td align=”right”> <input type=”button” value=”Cancel” id=’NT_btnCancel’ /> <input type=”button” value=”Save” id=’NT_btnSave’ /> </td>
</tr>
</table>
</div>
</div>
</div>
</td>
</tr>
</table>
<table>
<tr>
<td>
<div id=”UploadAllWindow”>
<div id=”UploadAllWindow_Header”>
<span>
Upload to device
</span>
</div>
<div style=”overflow: hidden;” id=”UploadAllWindow_Content”>
<div id=”UploadAllWindow_Tab”>
<table width=”100%”>
<tr>
<td width=”100%”>
<label>Do you want to upload the setting to the device ?</label>
<br />
</td>
</tr>
<tr>
<td align=”center”>
<input type=”button” value=”Cancel” id=’UPLDALL_btnCancel’ />
<input type=”button” value=”Ok” id=’UPLDALL_btnOk’ />
</td>
</tr>
</table>
</div>
</div>
</div>
</td>
</tr>
<tr>
<td>
<div id=”UploadSelectedWindow”>
<div id=”UploadSelectedWindow_Header”>
<span>
Upload selected values to device
</span>
</div>
<div style=”overflow: hidden;” id=”UploadSelectedWindow_Content”>
<div id=”UploadSelectedWindow_Tab”>
<table width=”100%”>
<tr>
<td width=”100%”>
<label>Do you want to upload the updated setting to the device ?</label>
</td>
</tr>
<tr>
<td align=”center”>
<input type=”button” value=”Cancel” id=’UPLDSEL_btnCancel’ />
<input type=”button” value=”Ok” id=’UPLDSEL_btnOk’ />
</td>
</tr>
</table>
</div>
</div>
</div>
</td>
</tr>
</table>
</div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>

</body>

</html>
November 28, 2014 at 6:59 am in reply to: Problem with cellsRenderer property Problem with cellsRenderer property #63501

Sairam
Participant

Hi Peter,

All I do is have a menu “<div class=’ActivityMenu’>” and Hava an Img tag whick opens a popup. Is this recommended ?

Thanks.

November 27, 2014 at 11:04 am in reply to: spinButtons not working. spinButtons not working. #63452
Sairam
Participant
Here is the full code Peter –

`<!DOCTYPE html>
<html lang=”en”>
<head>
<title id=’Description’>
</title>

<link rel=”stylesheet” href=”JQFiles/jqwidgets/styles/jqx.base.css” type=”text/css” />
<link rel=”stylesheet” href=”JQFiles/jqwidgets/styles/jqx.energyblue.css” type=”text/css” />

<script type=”text/javascript” src=”JQFiles/scripts/jquery-1.11.1.min.js”></script>
<script type=”text/javascript” src=”JQFiles/jqwidgets/jqxcore.js”></script>
<script type=”text/javascript” src=”JQFiles/jqwidgets/jqxdata.js”></script>
<script type=”text/javascript” src=”JQFiles/jqwidgets/jqxbuttons.js”></script>
<script type=”text/javascript” src=”JQFiles/jqwidgets/jqxscrollbar.js”></script>
<script type=”text/javascript” src=”JQFiles/jqwidgets/jqxdatatable.js”></script>
<script type=”text/javascript” src=”JQFiles/jqwidgets/jqxtreegrid.js”></script>
<script type=”text/javascript” src=”JQFiles/jqwidgets/jqxlistbox.js”></script>
<script type=”text/javascript” src=”JQFiles/jqwidgets/jqxdropdownlist.js”></script>
<script type=”text/javascript” src=”JQFiles/jqwidgets/jqxcheckbox.js”></script>
<script type=”text/javascript” src=”JQFiles/jqwidgets/jqxinput.js”></script>
<script type=”text/javascript” src=”JQFiles/jqwidgets/jqxslider.js”></script>
<script type=”text/javascript” src=”JQFiles/jqwidgets/jqxwindow.js”></script>
<script type=”text/javascript” src=”JQFiles/jqwidgets/jqxpanel.js”></script>
<script type=”text/javascript” src=”JQFiles/jqwidgets/jqxdraw.js”></script>
<script type=”text/javascript” src=”JQFiles/jqwidgets/jqxchart.core.js”></script>
<script type=”text/javascript” src=”JQFiles/jqwidgets/jqxeditor.js”></script>
<script type=”text/javascript” src=”JQFiles/jqwidgets/jqxtabs.js”></script>
<script type=”text/javascript” src=”JQFiles/jqwidgets/jqxmenu.js”></script>
<script type=”text/javascript” src=”JQFiles/jqwidgets/jqxtooltip.js”></script>
<script type=”text/javascript” src=”JQFiles/jqwidgets/jqxnumberinput.js”></script>
<script type=”text/javascript” src=”JQFiles/scripts/demos.js”></script>
<script type=”text/javascript” src=”JQFiles/demos/sampledata/generatedata.js”></script>

<script type=”text/javascript”>

// ============== JSON Data ============================
var data = [
{
“id”: “1”, “FB”: “Over Current”, “Group1”: “”, “Group2”: “”, “Group3”: “”, “Group4”: “”, “Group5”: “”, “Group6”: “”, “Group7”: “”, “Group8”: “”,
“children”:
[

{ “id”: “101”, “FB”: “Status”, “Group1”: “Enabled”, “Group2”: “Enabled”, “Group3”: “Enabled”, “Group4”: “Enabled”, “Group5”: “Enabled”, “Group6”: “Enabled”, “Group7”: “Enabled”, “Group8”: “Enabled”, “FBCODE”: “STA” },
{ “id”: “102”, “FB”: “Function”, “Group1”: “IEEE M Inverse”, “Group2”: “IEC S Inverse”, “Group3”: “IEC S Inverse”, “Group4”: “IEC S Inverse”, “Group5”: “IEC S Inverse”, “Group6”: “IEC S Inverse”, “Group7”: “IEC S Inverse”, “Group8”: “IEC S Inverse”, “FBCODE”: “FUN” },
{ “id”: “103”, “FB”: “Current Set”, “Group1”: “10”, “Group2”: “20”, “Group3”: “12”, “Group4”: “12”, “Group5”: “21”, “Group6”: “23”, “Group7”: “20”, “Group8”: “11”, “FBCODE”: “CST” },
{ “id”: “104”, “FB”: “Time Delay”, “Group1”: “50”, “Group2”: “20”, “Group3”: “20”, “Group4”: “20”, “Group5”: “66”, “Group6”: “21”, “Group7”: “20”, “Group8”: “33”, “FBCODE”: “TMD” },
{ “id”: “105”, “FB”: “Char Angle”, “Group1”: “50”, “Group2”: “15”, “Group3”: “15”, “Group4”: “10”, “Group5”: “50”, “Group6”: “10”, “Group7”: “15”, “Group8”: “10”, “FBCODE”: “CHA” },
{ “id”: “106”, “FB”: “Blocking”, “Group1”: “15”, “Group2”: “10”, “Group3”: “50”, “Group4”: “50”, “Group5”: “50”, “Group6”: “50”, “Group7”: “50”, “Group8”: “10”, “FBCODE”: “BLK” },
{ “id”: “107”, “FB”: “tRESET”, “Group1”: “10”, “Group2”: “10”, “Group3”: “10”, “Group4”: “10”, “Group5”: “15”, “Group6”: “50”, “Group7”: “50”, “Group8”: “50”, “FBCODE”: “RES” }

], “FBCODE”: “OVC”
},
{
“id”: “2”, “FB”: “Distance Setup”, “Group1”: “”, “Group2”: “”, “Group3”: “”, “Group4”: “”, “Group5”: “”, “Group6”: “”, “Group7”: “”, “Group8”: “”,
“children”:
[

{ “id”: “201”, “FB”: “Status”, “Group1”: “Enabled”, “Group2”: “Enabled”, “Group3”: “Enabled”, “Group4”: “Enabled”, “Group5”: “Enabled”, “Group6”: “Enabled”, “Group7”: “Enabled”, “Group8”: “Enabled”, “FBCODE”: “STA” },
{ “id”: “202”, “FB”: “Function”, “Group1”: “IEEE M Inverse”, “Group2”: “IEC S Inverse”, “Group3”: “IEC S Inverse”, “Group4”: “IEC S Inverse”, “Group5”: “IEC S Inverse”, “Group6”: “IEC S Inverse”, “Group7”: “IEC S Inverse”, “Group8”: “IEC S Inverse”, “FBCODE”: “FUN” },
{ “id”: “203”, “FB”: “Current Set”, “Group1”: “10”, “Group2”: “20”, “Group3”: “12”, “Group4”: “12”, “Group5”: “11”, “Group6”: “12”, “Group7”: “10”, “Group8”: “11”, “FBCODE”: “CST” },
{ “id”: “204”, “FB”: “Time Delay”, “Group1”: “50”, “Group2”: “20”, “Group3”: “20”, “Group4”: “20”, “Group5”: “56”, “Group6”: “22”, “Group7”: “41”, “Group8”: “23”, “FBCODE”: “TMD” },
{ “id”: “205”, “FB”: “Char Angle”, “Group1”: “15”, “Group2”: “15”, “Group3”: “50”, “Group4”: “10”, “Group5”: “50”, “Group6”: “10”, “Group7”: “10”, “Group8”: “10”, “FBCODE”: “CHA” },
{ “id”: “206”, “FB”: “Blocking”, “Group1”: “10”, “Group2”: “10”, “Group3”: “50”, “Group4”: “10”, “Group5”: “10”, “Group6”: “15”, “Group7”: “15”, “Group8”: “10”, “FBCODE”: “BLK” },
{ “id”: “207”, “FB”: “tRESET”, “Group1”: “50”, “Group2”: “10”, “Group3”: “10”, “Group4”: “15”, “Group5”: “15”, “Group6”: “10”, “Group7”: “10”, “Group8”: “50”, “FBCODE”: “RES” }

], “FBCODE”: “DST”
}

];

var dataDefault = [
{
“id”: “1”, “FB”: “Over Current”, “Group1”: “”, “Group2”: “”, “Group3”: “”, “Group4”: “”, “Group5”: “”, “Group6”: “”, “Group7”: “”, “Group8”: “”,
“children”:
[

{ “id”: “101”, “FB”: “Status”, “Group1”: “Enabled”, “Group2”: “Enabled”, “Group3”: “Enabled”, “Group4”: “Enabled”, “Group5”: “Enabled”, “Group6”: “Enabled”, “Group7”: “Enabled”, “Group8”: “Enabled”, “FBCODE”: “STA” },
{ “id”: “102”, “FB”: “Function”, “Group1”: “IEEE M Inverse”, “Group2”: “IEC S Inverse”, “Group3”: “IEC S Inverse”, “Group4”: “IEC S Inverse”, “Group5”: “IEC S Inverse”, “Group6”: “IEC S Inverse”, “Group7”: “IEC S Inverse”, “Group8”: “IEC S Inverse”, “FBCODE”: “FUN” },
{ “id”: “103”, “FB”: “Current Set”, “Group1”: “10”, “Group2”: “20”, “Group3”: “12”, “Group4”: “12”, “Group5”: “21”, “Group6”: “23”, “Group7”: “20”, “Group8”: “11”, “FBCODE”: “CST” },
{ “id”: “104”, “FB”: “Time Delay”, “Group1”: “50”, “Group2”: “20”, “Group3”: “20”, “Group4”: “20”, “Group5”: “66”, “Group6”: “21”, “Group7”: “20”, “Group8”: “33”, “FBCODE”: “TMD” },
{ “id”: “105”, “FB”: “Char Angle”, “Group1”: “50”, “Group2”: “15”, “Group3”: “15”, “Group4”: “10”, “Group5”: “50”, “Group6”: “10”, “Group7”: “15”, “Group8”: “10”, “FBCODE”: “CHA” },
{ “id”: “106”, “FB”: “Blocking”, “Group1”: “15”, “Group2”: “10”, “Group3”: “50”, “Group4”: “50”, “Group5”: “50”, “Group6”: “50”, “Group7”: “50”, “Group8”: “10”, “FBCODE”: “BLK” },
{ “id”: “107”, “FB”: “tRESET”, “Group1”: “10”, “Group2”: “10”, “Group3”: “10”, “Group4”: “10”, “Group5”: “15”, “Group6”: “50”, “Group7”: “50”, “Group8”: “50”, “FBCODE”: “RES” }

], “FBCODE”: “OVC”
},
{
“id”: “2”, “FB”: “Distance Setup”, “Group1”: “”, “Group2”: “”, “Group3”: “”, “Group4”: “”, “Group5”: “”, “Group6”: “”, “Group7”: “”, “Group8”: “”,
“children”:
[

{ “id”: “201”, “FB”: “Status”, “Group1”: “Enabled”, “Group2”: “Enabled”, “Group3”: “Enabled”, “Group4”: “Enabled”, “Group5”: “Enabled”, “Group6”: “Enabled”, “Group7”: “Enabled”, “Group8”: “Enabled”, “FBCODE”: “STA” },
{ “id”: “202”, “FB”: “Function”, “Group1”: “IEEE M Inverse”, “Group2”: “IEC S Inverse”, “Group3”: “IEC S Inverse”, “Group4”: “IEC S Inverse”, “Group5”: “IEC S Inverse”, “Group6”: “IEC S Inverse”, “Group7”: “IEC S Inverse”, “Group8”: “IEC S Inverse”, “FBCODE”: “FUN” },
{ “id”: “203”, “FB”: “Current Set”, “Group1”: “10”, “Group2”: “20”, “Group3”: “12”, “Group4”: “12”, “Group5”: “11”, “Group6”: “12”, “Group7”: “10”, “Group8”: “11”, “FBCODE”: “CST” },
{ “id”: “204”, “FB”: “Time Delay”, “Group1”: “50”, “Group2”: “20”, “Group3”: “20”, “Group4”: “20”, “Group5”: “56”, “Group6”: “22”, “Group7”: “41”, “Group8”: “23”, “FBCODE”: “TMD” },
{ “id”: “205”, “FB”: “Char Angle”, “Group1”: “15”, “Group2”: “15”, “Group3”: “50”, “Group4”: “10”, “Group5”: “50”, “Group6”: “10”, “Group7”: “10”, “Group8”: “10”, “FBCODE”: “CHA” },
{ “id”: “206”, “FB”: “Blocking”, “Group1”: “10”, “Group2”: “10”, “Group3”: “50”, “Group4”: “10”, “Group5”: “10”, “Group6”: “15”, “Group7”: “15”, “Group8”: “10”, “FBCODE”: “BLK” },
{ “id”: “207”, “FB”: “tRESET”, “Group1”: “50”, “Group2”: “10”, “Group3”: “10”, “Group4”: “15”, “Group5”: “15”, “Group6”: “10”, “Group7”: “10”, “Group8”: “50”, “FBCODE”: “RES” }

], “FBCODE”: “DST”
}

];
// ============== JSON Data ============================

// ============== Chart Section Start ===================

// prepare chart data as an array
var chartSource = new Array();

// ============== Chart Section Start ===================

$(document).ready(function () {

LoadChartSource();

// Create jqxTabs.
$(‘#jqxSettingScreenTabs’).jqxTabs({ width: ‘90%’, position: ‘top’, theme: ‘energyblue’ });

// Refrest the chart based on the values
$(“#GraphWindow_Tab”).on(‘click’, function () {
ReLoadChartControl(‘RELOAD’, null, null);
});

function LoadChartSource() {

if (chartSource.length == 0) {
chartSource = [
{ “MoC”: “1.05”, GroupValue: 52.8653 },
{ “MoC”: “1.06”, GroupValue: 44.2799 },
{ “MoC”: “1.07”, GroupValue: 38.1470 },
{ “MoC”: “1.08”, GroupValue: 33.5467 },
{ “MoC”: “1.09”, GroupValue: 29.9684 },
{ “MoC”: “1.1”, GroupValue: 27.1053 },
{ “MoC”: “1.2”, GroupValue: 14.2117 },
{ “MoC”: “1.3”, GroupValue: 9.9029 },
{ “MoC”: “1.4”, GroupValue: 7.7412 },
{ “MoC”: “1.5”, GroupValue: 6.4390 },
{ “MoC”: “1.8”, GroupValue: 4.4691 },
{ “MoC”: “2”, GroupValue: 3.8032 },
{ “MoC”: “3”, GroupValue: 2.4322 },
{ “MoC”: “4”, GroupValue: 1.9458 },
{ “MoC”: “5”, GroupValue: 1.6883 },
{ “MoC”: “6”, GroupValue: 1.5255 },
{ “MoC”: “7”, GroupValue: 1.4117 },
{ “MoC”: “8”, GroupValue: 1.3267 },
{ “MoC”: “9”, GroupValue: 1.2604 },
{ “MoC”: “10”, GroupValue: 1.2068 },
{ “MoC”: “12”, GroupValue: 1.1247 },
{ “MoC”: “15”, GroupValue: 1.0394 },
{ “MoC”: “18”, GroupValue: 0.9794 },
{ “MoC”: “20”, GroupValue: 0.9481 },
{ “MoC”: “22”, GroupValue: 0.9216 },
{ “MoC”: “24”, GroupValue: 0.8988 },
{ “MoC”: “26”, GroupValue: 0.8789 },
{ “MoC”: “28”, GroupValue: 0.8613 },
{ “MoC”: “30”, GroupValue: 0.8456 },
{ “MoC”: “40”, GroupValue: 0.7866 },
{ “MoC”: “50”, GroupValue: 0.7468 },
{ “MoC”: “75”, GroupValue: 0.6850 },
{ “MoC”: “100”, GroupValue: 0.6478 }

];
}

var chartdataAdapter = new $.jqx.dataAdapter(chartSource, { autoBind: true });
// prepare jqxChart settings
var settings = {
title: “Title”,
description: “Description”,
enableAnimations: true,
showLegend: true,
padding: { left: 5, top: 5, right: 40, bottom: 5 },
titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
source: chartdataAdapter,
xAxis:
{
dataField: ‘MoC’,
showGridLines: true,
unitInterval: 10,
minValue: 0,
maxValue: 100,
description: ‘Current in Multiples of settings’
},
colorScheme: ‘scheme02’,
seriesGroups:
[
{
type: ‘line’,
valueAxis:
{
displayValueAxis: true,
description: ”,
axisSize: ‘auto’,
tickMarksColor: ‘#888888’,
minValue: 0,
maxValue: 100,
description: ‘Time In secs’
},
series: [
{ dataField: ‘GroupValue’, displayText: ‘Value’ }
]
}
]
};

// setup the chart
$(‘#jqxChart’).jqxChart(settings);
}

function CalculateYaxis(T, I, Is) {

//debugger;

//T is the time delay.
//I is the X axis,
//Is is the current setting.
//OP is the desired output.

//IEEE MI
//T = 1;
var OP = T * (0.114 + 0.0515 / (Math.pow(I, 0.02) – 1));

// IDG Formua
//var M = Math.pow((I / Is), 0.02) – 1;
//var OP = T * (0.14 / M);

//*** Dummy operation, used only to see the graph working.
/*if (I < 10) {
OP = Math.random();
OP = OP + 9;
}
else {
OP = Math.random();
}*/
//***

return OP;
}

function ReLoadChartControl(LoadType, vGroup, vRow) {
//debugger;

if (LoadType == ‘RELOAD’) {
// This happens when the slider inside the Graph popup is changed.
var vTD = parseInt($(“#GW_sldrTimeDelay”).val());
var vCurSet = parseInt($(“#GW_sldrCurrSet”).val());
}
else {
//Happens when the chart icon is clicked, to set the chart values based on the slider control in the parent screen.
var vTD = parseInt(data[vRow – 1].children[3][vGroup].toString());
var vCurSet = parseInt(data[vRow – 1].children[2][vGroup].toString());

parseInt($(“#GW_sldrTimeDelay”).val(vTD));
parseInt($(“#GW_sldrCurrSet”).val(vCurSet));
}
//CalculateYaxis(vTD, 1, vCurSet)
chartSource = [
{ “MoC”: “1.05”, GroupValue: CalculateYaxis(vTD, 1.05, vCurSet) },
{ “MoC”: “1.06”, GroupValue: CalculateYaxis(vTD, 1.06, vCurSet) },
{ “MoC”: “1.07”, GroupValue: CalculateYaxis(vTD, 1.07, vCurSet) },
{ “MoC”: “1.08”, GroupValue: CalculateYaxis(vTD, 1.08, vCurSet) },
{ “MoC”: “1.09”, GroupValue: CalculateYaxis(vTD, 1.09, vCurSet) },
{ “MoC”: “1.1”, GroupValue: CalculateYaxis(vTD, 1.1, vCurSet) },
{ “MoC”: “1.2”, GroupValue: CalculateYaxis(vTD, 1.2, vCurSet) },
{ “MoC”: “1.3”, GroupValue: CalculateYaxis(vTD, 1.3, vCurSet) },
{ “MoC”: “1.4”, GroupValue: CalculateYaxis(vTD, 1.4, vCurSet) },
{ “MoC”: “1.5”, GroupValue: CalculateYaxis(vTD, 1.5, vCurSet) },
{ “MoC”: “1.8”, GroupValue: CalculateYaxis(vTD, 1.8, vCurSet) },
{ “MoC”: “2”, GroupValue: CalculateYaxis(vTD, 2, vCurSet) },
{ “MoC”: “3”, GroupValue: CalculateYaxis(vTD, 3, vCurSet) },
{ “MoC”: “4”, GroupValue: CalculateYaxis(vTD, 4, vCurSet) },
{ “MoC”: “5”, GroupValue: CalculateYaxis(vTD, 5, vCurSet) },
{ “MoC”: “6”, GroupValue: CalculateYaxis(vTD, 6, vCurSet) },
{ “MoC”: “7”, GroupValue: CalculateYaxis(vTD, 7, vCurSet) },
{ “MoC”: “8”, GroupValue: CalculateYaxis(vTD, 8, vCurSet) },
{ “MoC”: “9”, GroupValue: CalculateYaxis(vTD, 9, vCurSet) },
{ “MoC”: “10”, GroupValue: CalculateYaxis(vTD, 10, vCurSet) },
{ “MoC”: “12”, GroupValue: CalculateYaxis(vTD, 12, vCurSet) },
{ “MoC”: “15”, GroupValue: CalculateYaxis(vTD, 15, vCurSet) },
{ “MoC”: “18”, GroupValue: CalculateYaxis(vTD, 18, vCurSet) },
{ “MoC”: “20”, GroupValue: CalculateYaxis(vTD, 20, vCurSet) },
{ “MoC”: “22”, GroupValue: CalculateYaxis(vTD, 22, vCurSet) },
{ “MoC”: “24”, GroupValue: CalculateYaxis(vTD, 24, vCurSet) },
{ “MoC”: “26”, GroupValue: CalculateYaxis(vTD, 26, vCurSet) },
{ “MoC”: “28”, GroupValue: CalculateYaxis(vTD, 28, vCurSet) },
{ “MoC”: “30”, GroupValue: CalculateYaxis(vTD, 30, vCurSet) },
{ “MoC”: “40”, GroupValue: CalculateYaxis(vTD, 40, vCurSet) },
{ “MoC”: “50”, GroupValue: CalculateYaxis(vTD, 50, vCurSet) },
{ “MoC”: “75”, GroupValue: CalculateYaxis(vTD, 75, vCurSet) },
{ “MoC”: “100”, GroupValue: CalculateYaxis(vTD, 100, vCurSet) }
];

var source = { localdata: chartSource, datatype: ‘array’ }
var dataAdapter = new $.jqx.dataAdapter(source, { autoBind: true });
$(‘#jqxChart’).jqxChart({ _renderData: new Array() });
$(‘#jqxChart’).jqxChart({ source: dataAdapter });
$(‘#jqxChart’).jqxChart(‘refresh’);
}

function LoadControlsInGraphPopUp(vGroup, vRow) {
debugger;
var vStat = data[vRow – 1].children[0][vGroup].toString();
var vFunc = data[vRow – 1].children[1][vGroup].toString();

var vCurSet = parseInt(data[vRow – 1].children[2][vGroup].toString());
var vTD = parseInt(data[vRow – 1].children[3][vGroup].toString());
var vCharAngle = parseInt(data[vRow – 1].children[4][vGroup].toString());
var vBlocking = parseInt(data[vRow – 1].children[5][vGroup].toString());
var vtRESET = parseInt(data[vRow – 1].children[6][vGroup].toString());

parseInt($(“#GW_ddlStatus”).val(vStat));
parseInt($(“#GW_ddlFunction”).val(vFunc));

parseInt($(“#GW_sldrTimeDelay”).val(vTD));
parseInt($(“#GW_sldrCurrSet”).val(vCurSet));
parseInt($(“#GW_sldrCharAngle”).val(vCharAngle));
parseInt($(“#GW_sldrBlocking”).val(vBlocking));
parseInt($(“#GW_sldrtRESET”).val(vtRESET));

//GraphWindow_Content – data[vRow – 1].children[6][vGroup].toString()
//Use this to update the treeGrid and set the updated values of the controls in it for the particulat group and function block.
$(“#GraphWindow_Content”).attr(‘Group’, vGroup);
$(“#GraphWindow_Content”).attr(‘Row’, vRow);
}

var StatusDdlSource = [“Select”, “Enabled”, “Disabled”, “Enabled VTS”,
“Enabled CH Fail”];

var FunctionDdlSource = [“Select”, “DT”, “IEC S Inverse”, “IEC V Inverse”, “IEC E Inverse”, “UK LT Inverse”, “IEEE M Inverse”, “IEEE V Inverse”, “IEEE E Inverse”,
“US Inverse”, “US ST Inverse”];

var CopiedValue = new Array();

var source =
{
dataType: “json”,
dataFields: [
{ name: “id”, type: “number” },
{ name: “FB”, type: “string” },
{ name: “Group1”, type: “string” },
{ name: “Group2”, type: “string” },
{ name: “Group3”, type: “string” },
{ name: “Group4”, type: “string” },
{ name: “Group5”, type: “string” },
{ name: “Group6”, type: “string” },
{ name: “Group7”, type: “string” },
{ name: “Group8”, type: “string” },
{ name: “children”, type: “array” },
],

hierarchy:
{
root: “children”
},
localData: data,
id: “id”
};

var dataAdapter = new $.jqx.dataAdapter(source, {
loadComplete: function () {
//alert(‘Load Complete’);

}
});

$(“#treeGrid”).jqxTreeGrid(
{
theme: ‘energyblue’,
sortable: false,
checkboxes: true,
columnsReorder: true,
source: dataAdapter,
altrows: false,
editSettings: { saveOnPageChange: true, saveOnBlur: false, saveOnSelectionChange: true, cancelOnEsc: true, saveOnEnter: true, editOnDoubleClick: true, editOnF2: true },
autoRowHeight: false,
editable: true,
ready: function () {
// Expand rows with ID = 1, 2 and 7
$(“#treeGrid”).jqxTreeGrid(‘expandRow’, 1);
$(“#treeGrid”).jqxTreeGrid(‘expandRow’, 2);
//$(“#treeGrid”).jqxTreeGrid(‘expandRow’, 3);
},
// called when jqxTreeGrid is rendered.
rendered: function () {

if ($(“.ActivityMenu”).length > 0) {

$(“.ActivityMenu”).jqxMenu({ width: ’30’, height: ’30px’, theme: ‘energyblue’ });

$(‘.ActivityMenu’).on(‘itemclick’, function (event) {

//debugger;
var element = event.args;
var elementId = event.args.getAttribute(‘ElemId’);

if (elementId == ‘COPY’) {
var vGroup = element.parentNode.getAttribute(‘Group’).toString();
var vRowKey = element.parentNode.getAttribute(‘RowKey’);

CopiedValue = new Array();
vRowKey = parseInt(vRowKey + ’01’);
for (var i = 0; i <= 6; i++) {
CopiedValue[i] = $(“#treeGrid”).jqxTreeGrid(‘getCellValue’, vRowKey, vGroup);
vRowKey++;
}
}
else if (elementId == ‘PASTE’) {

$(“#treeGrid”).jqxTreeGrid(‘beginUpdate’);

var vGroup = element.parentNode.getAttribute(‘Group’).toString();
var vRowKey = element.parentNode.getAttribute(‘RowKey’);

vRowKey = parseInt(vRowKey + ’01’);
//debugger;
for (var i = 0; i <= 6; i++) {
$(“#treeGrid”).jqxTreeGrid(‘setCellValue’, vRowKey, vGroup, CopiedValue[i]);
vRowKey++;
}

$(“#treeGrid”).jqxTreeGrid(‘endUpdate’);
}
else if (elementId == ‘RESET’) {

$(“#treeGrid”).jqxTreeGrid(‘beginUpdate’);

var vGroup = element.parentNode.getAttribute(‘Group’).toString();
var vRowKey = element.parentNode.getAttribute(‘RowKey’);
var vInitialRowKey = element.parentNode.getAttribute(‘RowKey’);

vRowKey = parseInt(vRowKey + ’01’);
for (var i = 0; i <= 6; i++) {
var vdata = dataDefault[vInitialRowKey – 1].children[i][vGroup];
$(“#treeGrid”).jqxTreeGrid(‘setCellValue’, vRowKey, vGroup, vdata);
vRowKey++;
}

$(“#treeGrid”).jqxTreeGrid(‘endUpdate’);
}
else if (elementId == ‘UPCURR’) {
//Open dialog here
//$(‘#UploadAllWindow’).jqxWindow(‘open’);
}
else if (elementId == ‘UPUPD’) {
//Open dialog here
//$(‘#UploadSelectedWindow’).jqxWindow(‘open’);
}
});

}

if ($(“.OpenGraph”).length > 0) {

var btnOpenGraphClick = function (event) {
//Open PopUp here
$(‘#GraphWindow’).jqxWindow(‘open’);
}

$(“.OpenGraph”).on(‘click’, function (event) {
//debugger;
var vGroup = event.target.getAttribute(‘data-group’); // this will give the current Group. i.e, Group1, Group2 etc..
var vRow = event.target.getAttribute(‘data-row’);

LoadControlsInGraphPopUp(vGroup, vRow);
ReLoadChartControl(‘LOAD’, vGroup, vRow);

// Update the chartSource before you open the chart
btnOpenGraphClick(event);
});

}
if ($(“.OpenNote”).length > 0) {

var btnOpenNoteClick = function (event) {
//Open PopUp here
$(‘#NotesWindow’).jqxWindow(‘open’);
}

$(“.OpenNote”).on(‘click’, function (event) {
btnOpenNoteClick(event);
});

}

if ($(“.FBtooltip”).length > 0) {

$(“.FBtooltip”).on(‘mouseover’, function (event) {
//debugger;
var vDesc = event.toElement.getAttribute(‘data-desc’);
$(“.FBtooltip”).jqxTooltip({ content: “<table width=’100px’><tr><td align=’left’><b>Description:</b> <br> <p>The descripion of <i>” + vDesc + “</i> function block will apper here.</p></td></tr></table>”, theme: ‘energyblue’ });
});

}

},
columns: [
{ text: ‘ID’, editable: false, dataField: ‘id’, pinned: true, width: 150 },
{
text: ‘Functional Block’, dataField: ‘FB’, editable: false, pinned: true, width: 200, columnType: “none”,
cellsRenderer: function (rowKey, dataField, value, data) {
//debugger;
if (data.level == 0) {
return “<label id=’lblFunBlock” + rowKey + “‘ data-desc='” + value + “‘ class=’FBtooltip’> ” + value + ” </label>”;
}
else {
return “<label id=’lblFunBlock” + rowKey + “‘ data-desc='” + value + “‘ class=’FBtooltip’> ” + value + ” </label> “;
}
}

},
{
text: ‘Group 1’, dataField: ‘Group1’, width: 200, columnType: “custom”,
cellsRenderer: function (rowKey, dataField, value, data) {
//debugger;
if (data.level == 0) {
var DisplayHTML = “” +
“<div class=’ActivityMenu’>
- v” +
  “<ul Group='” + dataField + “‘ RowKey = ” + rowKey + “> <li ElemId=’COPY’>Copy Value
” +
“</div>”;
return DisplayHTML;
}
else {
return value;
}
},
createEditor: function (row, cellvalue, editor, cellText, width, height) {
// construct the editor.
//debugger;
switch (row) {

// Status
case “101”:
case “201”:
var id = “Grp1_ddl_” + row.toString();
var dropDownList = $(“<div id='” + id + “‘ class=’105dropDownList’ style=’border: none;’></div>”).appendTo(editor);
dropDownList.jqxDropDownList({ autoDropDownHeight: true, source: StatusDdlSource, width: ‘100%’, height: ‘100%’, theme: ‘energyblue’ });
break;

//Function
case “102”:
case “202”:
var id = “Grp1_ddl_” + row.toString();
var dropDownList = $(“<div id='” + id + “‘ class=’105dropDownList’ style=’border: none;’></div>”).appendTo(editor);
dropDownList.jqxDropDownList({ autoDropDownHeight: true, source: FunctionDdlSource, width: ‘100%’, height: ‘100%’, theme: ‘energyblue’ });
break;

default:
var id = “Grp1_sldr_” + row.toString();
var slider1 = $(“<div id='” + id + “‘ class=’slider1′ style=’border: none;’></div>”).appendTo(editor);
slider1.jqxNumberInput({ width: 200, inputMode: ‘advanced’, spinMode: ‘advanced’, symbolPosition: ‘right’, symbol: ‘A’, spinButtons: true, spinButtonsStep :1 });
break;

}

},
initEditor: function (row, cellvalue, editor, celltext, width, height) {
// set the editor’s current value. The callback is called each time the editor is displayed.
//debugger;
switch (row) {

// Status
case “101”:
case “201”:
$(editor.find(‘#Grp1_ddl_’ + row.toString())).val(cellvalue);
break;

//Function
case “102”:
case “202”:
$(editor.find(‘#Grp1_ddl_’ + row.toString())).val(cellvalue);
break;

default:
$(editor.find(‘#Grp1_sldr_’ + row.toString())).val(cellvalue);
break;
}
},
getEditorValue: function (row, cellvalue, editor) {
//debugger;
switch (row) {

case “101”:
case “201”:
return $(editor.find(‘#Grp1_ddl_’ + row.toString())).val();
break;

case “102”:
case “202”:
return $(editor.find(‘#Grp1_ddl_’ + row.toString())).val();
break;

default:
return $(editor.find(‘#Grp1_sldr_’ + row.toString())).val();
break;
}

// return the editor’s value.
return “”;
}

},
{
text: ‘Group 2’, dataField: ‘Group2’, width: 200, columnType: “custom”,
cellsRenderer: function (rowKey, dataField, value, data) {
//debugger;
if (data.level == 0) {
var DisplayHTML = “” +
“<div class=’ActivityMenu’>
- v” +
  “<ul Group='” + dataField + “‘ RowKey = ” + rowKey + “> <li ElemId=’COPY’>Copy Value
” +
“</div>”;
return DisplayHTML;
}
else {
return value;
}
},
createEditor: function (row, cellvalue, editor, cellText, width, height) {
// construct the editor.
//debugger;
switch (row) {

// Status
case “101”:
case “201”:
var id = “Grp2_ddl_” + row.toString();
var dropDownList = $(“<div id='” + id + “‘ class=’105dropDownList’ style=’border: none;’></div>”).appendTo(editor);
dropDownList.jqxDropDownList({ autoDropDownHeight: true, source: StatusDdlSource, width: ‘100%’, height: ‘100%’, theme: ‘energyblue’ });
break;

//Function
case “102”:
case “202”:
var id = “Grp2_ddl_” + row.toString();
var dropDownList = $(“<div id='” + id + “‘ class=’105dropDownList’ style=’border: none;’></div>”).appendTo(editor);
dropDownList.jqxDropDownList({ autoDropDownHeight: true, source: FunctionDdlSource, width: ‘100%’, height: ‘100%’, theme: ‘energyblue’ });
break;

default:
var id = “Grp2_sldr_” + row.toString();
var slider1 = $(“<div id='” + id + “‘ class=’slider1′ style=’border: none;’></div>”).appendTo(editor);
slider1.jqxSlider({ min: 0, max: 100, ticksFrequency: 10, value: 0, step: 10, width: 200, theme: ‘energyblue’ });
break;

}

},
initEditor: function (row, cellvalue, editor, celltext, width, height) {
// set the editor’s current value. The callback is called each time the editor is displayed.
//debugger;
switch (row) {

// Status
case “101”:
case “201”:
$(editor.find(‘#Grp2_ddl_’ + row.toString())).val(cellvalue);
break;

//Function
case “102”:
case “202”:
$(editor.find(‘#Grp2_ddl_’ + row.toString())).val(cellvalue);
break;

default:
$(editor.find(‘#Grp2_sldr_’ + row.toString())).val(cellvalue);
break;
}
},
getEditorValue: function (row, cellvalue, editor) {
//debugger;
switch (row) {

case “101”:
case “201”:
return $(editor.find(‘#Grp2_ddl_’ + row.toString())).val();
break;

case “102”:
case “202”:
return $(editor.find(‘#Grp2_ddl_’ + row.toString())).val();
break;

default:
return $(editor.find(‘#Grp2_sldr_’ + row.toString())).val();
break;
}

// return the editor’s value.
return “”;
}

},
{
text: ‘Group 3’, dataField: ‘Group3’, width: 200, columnType: “custom”,
cellsRenderer: function (rowKey, dataField, value, data) {
//debugger;
if (data.level == 0) {
var DisplayHTML = “” +
“<div class=’ActivityMenu’>
- v” +
  “<ul Group='” + dataField + “‘ RowKey = ” + rowKey + “> <li ElemId=’COPY’>Copy Value
” +
“</div>”;
return DisplayHTML;
}
else {
return value;
}
},
createEditor: function (row, cellvalue, editor, cellText, width, height) {
// construct the editor.
//debugger;
switch (row) {

// Status
case “101”:
case “201”:
var id = “Grp3_ddl_” + row.toString();
var dropDownList = $(“<div id='” + id + “‘ class=’105dropDownList’ style=’border: none;’></div>”).appendTo(editor);
dropDownList.jqxDropDownList({ autoDropDownHeight: true, source: StatusDdlSource, width: ‘100%’, height: ‘100%’, theme: ‘energyblue’ });
break;

//Function
case “102”:
case “202”:
var id = “Grp3_ddl_” + row.toString();
var dropDownList = $(“<div id='” + id + “‘ class=’105dropDownList’ style=’border: none;’></div>”).appendTo(editor);
dropDownList.jqxDropDownList({ autoDropDownHeight: true, source: FunctionDdlSource, width: ‘100%’, height: ‘100%’, theme: ‘energyblue’ });
break;

default:
var id = “Grp3_sldr_” + row.toString();
var slider1 = $(“<div id='” + id + “‘ class=’slider1′ style=’border: none;’></div>”).appendTo(editor);
slider1.jqxSlider({ min: 0, max: 100, ticksFrequency: 10, value: 0, step: 10, width: 200, theme: ‘energyblue’ });
break;

}

},
initEditor: function (row, cellvalue, editor, celltext, width, height) {
// set the editor’s current value. The callback is called each time the editor is displayed.
//debugger;
switch (row) {

// Status
case “101”:
case “201”:
$(editor.find(‘#Grp3_ddl_’ + row.toString())).val(cellvalue);
break;

//Function
case “102”:
case “202”:
$(editor.find(‘#Grp3_ddl_’ + row.toString())).val(cellvalue);
break;

default:
$(editor.find(‘#Grp3_sldr_’ + row.toString())).val(cellvalue);
break;
}
},
getEditorValue: function (row, cellvalue, editor) {
//debugger;
switch (row) {

case “101”:
case “201”:
return $(editor.find(‘#Grp3_ddl_’ + row.toString())).val();
break;

case “102”:
case “202”:
return $(editor.find(‘#Grp3_ddl_’ + row.toString())).val();
break;

default:
return $(editor.find(‘#Grp3_sldr_’ + row.toString())).val();
break;
}

// return the editor’s value.
return “”;
}

},
{
text: ‘Group 4’, dataField: ‘Group4’, width: 200, columnType: “custom”,
cellsRenderer: function (rowKey, dataField, value, data) {
//debugger;
if (data.level == 0) {
var DisplayHTML = “” +
“<div class=’ActivityMenu’>
- v” +
  “<ul Group='” + dataField + “‘ RowKey = ” + rowKey + “> <li ElemId=’COPY’>Copy Value
” +
“</div>”;
return DisplayHTML;
}
else {
return value;
}
},
createEditor: function (row, cellvalue, editor, cellText, width, height) {
// construct the editor.
//debugger;
switch (row) {

// Status
case “101”:
case “201”:
var id = “Grp4_ddl_” + row.toString();
var dropDownList = $(“<div id='” + id + “‘ class=’105dropDownList’ style=’border: none;’></div>”).appendTo(editor);
dropDownList.jqxDropDownList({ autoDropDownHeight: true, source: StatusDdlSource, width: ‘100%’, height: ‘100%’, theme: ‘energyblue’ });
break;

//Function
case “102”:
case “202”:
var id = “Grp4_ddl_” + row.toString();
var dropDownList = $(“<div id='” + id + “‘ class=’105dropDownList’ style=’border: none;’></div>”).appendTo(editor);
dropDownList.jqxDropDownList({ autoDropDownHeight: true, source: FunctionDdlSource, width: ‘100%’, height: ‘100%’, theme: ‘energyblue’ });
break;

default:
var id = “Grp4_sldr_” + row.toString();
var slider1 = $(“<div id='” + id + “‘ class=’slider1′ style=’border: none;’></div>”).appendTo(editor);
slider1.jqxSlider({ min: 0, max: 100, ticksFrequency: 10, value: 0, step: 10, width: 200, theme: ‘energyblue’ });
break;

}

},
initEditor: function (row, cellvalue, editor, celltext, width, height) {
// set the editor’s current value. The callback is called each time the editor is displayed.
//debugger;
switch (row) {

// Status
case “101”:
case “201”:
$(editor.find(‘#Grp4_ddl_’ + row.toString())).val(cellvalue);
break;

//Function
case “102”:
case “202”:
$(editor.find(‘#Grp4_ddl_’ + row.toString())).val(cellvalue);
break;

default:
$(editor.find(‘#Grp4_sldr_’ + row.toString())).val(cellvalue);
break;
}
},
getEditorValue: function (row, cellvalue, editor) {
//debugger;
switch (row) {

case “101”:
case “201”:
return $(editor.find(‘#Grp4_ddl_’ + row.toString())).val();
break;

case “102”:
case “202”:
return $(editor.find(‘#Grp4_ddl_’ + row.toString())).val();
break;

default:
return $(editor.find(‘#Grp4_sldr_’ + row.toString())).val();
break;
}

// return the editor’s value.
return “”;
}

},
{
text: ‘Group 5’, dataField: ‘Group5’, width: 200, columnType: “custom”,
cellsRenderer: function (rowKey, dataField, value, data) {
//debugger;
if (data.level == 0) {
var DisplayHTML = “” +
“<div class=’ActivityMenu’>
- v” +
  “<ul Group='” + dataField + “‘ RowKey = ” + rowKey + “> <li ElemId=’COPY’>Copy Value
” +
“</div>”;
return DisplayHTML;
}
else {
return value;
}
},
createEditor: function (row, cellvalue, editor, cellText, width, height) {
// construct the editor.
//debugger;
switch (row) {

// Status
case “101”:
case “201”:
var id = “Grp5_ddl_” + row.toString();
var dropDownList = $(“<div id='” + id + “‘ class=’105dropDownList’ style=’border: none;’></div>”).appendTo(editor);
dropDownList.jqxDropDownList({ autoDropDownHeight: true, source: StatusDdlSource, width: ‘100%’, height: ‘100%’, theme: ‘energyblue’ });
break;

//Function
case “102”:
case “202”:
var id = “Grp5_ddl_” + row.toString();
var dropDownList = $(“<div id='” + id + “‘ class=’105dropDownList’ style=’border: none;’></div>”).appendTo(editor);
dropDownList.jqxDropDownList({ autoDropDownHeight: true, source: FunctionDdlSource, width: ‘100%’, height: ‘100%’, theme: ‘energyblue’ });
break;

default:
var id = “Grp5_sldr_” + row.toString();
var slider1 = $(“<div id='” + id + “‘ class=’slider1′ style=’border: none;’></div>”).appendTo(editor);
slider1.jqxSlider({ min: 0, max: 100, ticksFrequency: 10, value: 0, step: 10, width: 200, theme: ‘energyblue’ });
break;

}

},
initEditor: function (row, cellvalue, editor, celltext, width, height) {
// set the editor’s current value. The callback is called each time the editor is displayed.
//debugger;
switch (row) {

// Status
case “101”:
case “201”:
$(editor.find(‘#Grp5_ddl_’ + row.toString())).val(cellvalue);
break;

//Function
case “102”:
case “202”:
$(editor.find(‘#Grp5_ddl_’ + row.toString())).val(cellvalue);
break;

default:
$(editor.find(‘#Grp5_sldr_’ + row.toString())).val(cellvalue);
break;
}
},
getEditorValue: function (row, cellvalue, editor) {
//debugger;
switch (row) {

case “101”:
case “201”:
return $(editor.find(‘#Grp5_ddl_’ + row.toString())).val();
break;

case “102”:
case “202”:
return $(editor.find(‘#Grp5_ddl_’ + row.toString())).val();
break;

default:
return $(editor.find(‘#Grp5_sldr_’ + row.toString())).val();
break;
}

// return the editor’s value.
return “”;
}

},
{
text: ‘Group 6’, dataField: ‘Group6’, width: 200, columnType: “custom”,
cellsRenderer: function (rowKey, dataField, value, data) {
//debugger;
if (data.level == 0) {
var DisplayHTML = “” +
“<div class=’ActivityMenu’>
- v” +
  “<ul Group='” + dataField + “‘ RowKey = ” + rowKey + “> <li ElemId=’COPY’>Copy Value
” +
“</div>”;
return DisplayHTML;
}
else {
return value;
}
},
createEditor: function (row, cellvalue, editor, cellText, width, height) {
// construct the editor.
//debugger;
switch (row) {

// Status
case “101”:
case “201”:
var id = “Grp6_ddl_” + row.toString();
var dropDownList = $(“<div id='” + id + “‘ class=’105dropDownList’ style=’border: none;’></div>”).appendTo(editor);
dropDownList.jqxDropDownList({ autoDropDownHeight: true, source: StatusDdlSource, width: ‘100%’, height: ‘100%’, theme: ‘energyblue’ });
break;

//Function
case “102”:
case “202”:
var id = “Grp6_ddl_” + row.toString();
var dropDownList = $(“<div id='” + id + “‘ class=’105dropDownList’ style=’border: none;’></div>”).appendTo(editor);
dropDownList.jqxDropDownList({ autoDropDownHeight: true, source: FunctionDdlSource, width: ‘100%’, height: ‘100%’, theme: ‘energyblue’ });
break;

default:
var id = “Grp6_sldr_” + row.toString();
var slider1 = $(“<div id='” + id + “‘ class=’slider1′ style=’border: none;’></div>”).appendTo(editor);
slider1.jqxSlider({ min: 0, max: 100, ticksFrequency: 10, value: 0, step: 10, width: 200, theme: ‘energyblue’ });
break;

}

},
initEditor: function (row, cellvalue, editor, celltext, width, height) {
// set the editor’s current value. The callback is called each time the editor is displayed.
//debugger;
switch (row) {

// Status
case “101”:
case “201”:
$(editor.find(‘#Grp6_ddl_’ + row.toString())).val(cellvalue);
break;

//Function
case “102”:
case “202”:
$(editor.find(‘#Grp6_ddl_’ + row.toString())).val(cellvalue);
break;

default:
$(editor.find(‘#Grp6_sldr_’ + row.toString())).val(cellvalue);
break;
}
},
getEditorValue: function (row, cellvalue, editor) {
//debugger;
switch (row) {

case “101”:
case “201”:
return $(editor.find(‘#Grp6_ddl_’ + row.toString())).val();
break;

case “102”:
case “202”:
return $(editor.find(‘#Grp6_ddl_’ + row.toString())).val();
break;

default:
return $(editor.find(‘#Grp6_sldr_’ + row.toString())).val();
break;
}

// return the editor’s value.
return “”;
}

},
{
text: ‘Group 7’, dataField: ‘Group7’, width: 200, columnType: “custom”,
cellsRenderer: function (rowKey, dataField, value, data) {
//debugger;
if (data.level == 0) {
var DisplayHTML = “” +
“<div class=’ActivityMenu’>
- v” +
  “<ul Group='” + dataField + “‘ RowKey = ” + rowKey + “> <li ElemId=’COPY’>Copy Value
” +
“</div>”;
return DisplayHTML;
}
else {
return value;
}
},
createEditor: function (row, cellvalue, editor, cellText, width, height) {
// construct the editor.
//debugger;
switch (row) {

// Status
case “101”:
case “201”:
var id = “Grp7_ddl_” + row.toString();
var dropDownList = $(“<div id='” + id + “‘ class=’105dropDownList’ style=’border: none;’></div>”).appendTo(editor);
dropDownList.jqxDropDownList({ autoDropDownHeight: true, source: StatusDdlSource, width: ‘100%’, height: ‘100%’, theme: ‘energyblue’ });
break;

//Function
case “102”:
case “202”:
var id = “Grp7_ddl_” + row.toString();
var dropDownList = $(“<div id='” + id + “‘ class=’105dropDownList’ style=’border: none;’></div>”).appendTo(editor);
dropDownList.jqxDropDownList({ autoDropDownHeight: true, source: FunctionDdlSource, width: ‘100%’, height: ‘100%’, theme: ‘energyblue’ });
break;

default:
var id = “Grp7_sldr_” + row.toString();
var slider1 = $(“<div id='” + id + “‘ class=’slider1′ style=’border: none;’></div>”).appendTo(editor);
slider1.jqxSlider({ min: 0, max: 100, ticksFrequency: 10, value: 0, step: 10, width: 200, theme: ‘energyblue’ });
break;

}

},
initEditor: function (row, cellvalue, editor, celltext, width, height) {
// set the editor’s current value. The callback is called each time the editor is displayed.
//debugger;
switch (row) {

// Status
case “101”:
case “201”:
$(editor.find(‘#Grp7_ddl_’ + row.toString())).val(cellvalue);
break;

//Function
case “102”:
case “202”:
$(editor.find(‘#Grp7_ddl_’ + row.toString())).val(cellvalue);
break;

default:
$(editor.find(‘#Grp7_sldr_’ + row.toString())).val(cellvalue);
break;
}
},
getEditorValue: function (row, cellvalue, editor) {
//debugger;
switch (row) {

case “101”:
case “201”:
return $(editor.find(‘#Grp7_ddl_’ + row.toString())).val();
break;

case “102”:
case “202”:
return $(editor.find(‘#Grp7_ddl_’ + row.toString())).val();
break;

default:
return $(editor.find(‘#Grp7_sldr_’ + row.toString())).val();
break;
}

// return the editor’s value.
return “”;
}

},
{
text: ‘Group 8’, dataField: ‘Group8’, width: 200, columnType: “custom”,
cellsRenderer: function (rowKey, dataField, value, data) {
//debugger;
if (data.level == 0) {
var DisplayHTML = “” +
“<div class=’ActivityMenu’>
- v” +
  “<ul Group='” + dataField + “‘ RowKey = ” + rowKey + “> <li ElemId=’COPY’>Copy Value
” +
“</div>”;
return DisplayHTML;
}
else {
return value;
}
},
createEditor: function (row, cellvalue, editor, cellText, width, height) {
// construct the editor.
//debugger;
switch (row) {

// Status
case “101”:
case “201”:
var id = “Grp8_ddl_” + row.toString();
var dropDownList = $(“<div id='” + id + “‘ class=’105dropDownList’ style=’border: none;’></div>”).appendTo(editor);
dropDownList.jqxDropDownList({ autoDropDownHeight: true, source: StatusDdlSource, width: ‘100%’, height: ‘100%’, theme: ‘energyblue’ });
break;

//Function
case “102”:
case “202”:
var id = “Grp8_ddl_” + row.toString();
var dropDownList = $(“<div id='” + id + “‘ class=’105dropDownList’ style=’border: none;’></div>”).appendTo(editor);
dropDownList.jqxDropDownList({ autoDropDownHeight: true, source: FunctionDdlSource, width: ‘100%’, height: ‘100%’, theme: ‘energyblue’ });
break;

default:
var id = “Grp8_sldr_” + row.toString();
var slider1 = $(“<div id='” + id + “‘ class=’slider1′ style=’border: none;’></div>”).appendTo(editor);
slider1.jqxSlider({ min: 0, max: 100, ticksFrequency: 10, value: 0, step: 10, width: 200, theme: ‘energyblue’ });
break;

}

},
initEditor: function (row, cellvalue, editor, celltext, width, height) {
// set the editor’s current value. The callback is called each time the editor is displayed.
//debugger;
switch (row) {

// Status
case “101”:
case “201”:
$(editor.find(‘#Grp8_ddl_’ + row.toString())).val(cellvalue);
break;

//Function
case “102”:
case “202”:
$(editor.find(‘#Grp8_ddl_’ + row.toString())).val(cellvalue);
break;

default:
$(editor.find(‘#Grp8_sldr_’ + row.toString())).val(cellvalue);
break;
}
},
getEditorValue: function (row, cellvalue, editor) {
//debugger;
switch (row) {

case “101”:
case “201”:
return $(editor.find(‘#Grp8_ddl_’ + row.toString())).val();
break;

case “102”:
case “202”:
return $(editor.find(‘#Grp8_ddl_’ + row.toString())).val();
break;

default:
return $(editor.find(‘#Grp8_sldr_’ + row.toString())).val();
break;
}

// return the editor’s value.
return “”;
}

}

]
});

//================== Listbox Section Start ======================

var listSource = [{ label: ‘Group 1’, value: ‘Group1’, checked: true }, { label: ‘Group 2’, value: ‘Group2’, checked: true },
{ label: ‘Group 3’, value: ‘Group3’, checked: true }, { label: ‘Group 4’, value: ‘Group4’, checked: false }, { label: ‘Group 5’, value: ‘Group5’, checked: false },
{ label: ‘Group 6’, value: ‘Group6’, checked: false }, { label: ‘Group 7’, value: ‘Group7’, checked: false }, { label: ‘Group 8’, value: ‘Group8’, checked: false}];
$(“#jqxlistbox”).jqxListBox({ source: listSource, width: 300, height: 25, checkboxes: true, theme: ‘energyblue’ });
$(“#jqxlistbox”).on(‘checkChange’, function (event) {
$(“#treeGrid”).jqxTreeGrid(‘beginUpdate’);
if (event.args.checked) {
$(“#treeGrid”).jqxTreeGrid(‘showColumn’, event.args.value);
} else {
$(“#treeGrid”).jqxTreeGrid(‘hideColumn’, event.args.value);
}
$(“#treeGrid”).jqxTreeGrid(‘endUpdate’);
});

var CurrGroupCount = 1;

//Buttons
$(“#btnAddGroup”).jqxButton({width:120, theme: ‘energyblue’ });
$(“#btnDeleteGroup”).jqxButton({width:120, theme: ‘energyblue’ });

$(“#btnAddGroup”).on(‘click’, function (event) {

//debugger;
$(“#treeGrid”).jqxTreeGrid(‘beginUpdate’);

if (CurrGroupCount <= 8) {
CurrGroupCount = CurrGroupCount + 1;
}

$(“#treeGrid”).jqxTreeGrid(‘showColumn’, ‘Group’ + CurrGroupCount.toString());
$(“#treeGrid”).jqxTreeGrid(‘endUpdate’);

});

$(“#btnDeleteGroup”).on(‘click’, function (event) {
$(“#treeGrid”).jqxTreeGrid(‘beginUpdate’);

//Atleast one group to be displayed all the time.
if (CurrGroupCount > 1) {
$(“#treeGrid”).jqxTreeGrid(‘hideColumn’, ‘Group’ + CurrGroupCount.toString());
CurrGroupCount = CurrGroupCount – 1;
}
$(“#treeGrid”).jqxTreeGrid(‘endUpdate’);
});

//================== Listbox Section End ======================

//Show/Hide Columns on start up.
//This will hide the ID column on page load. The ID column can be used for programmatic purpose
$(“#treeGrid”).jqxTreeGrid(‘hideColumn’, ‘id’);
$(“#treeGrid”).jqxTreeGrid(‘showColumn’, ‘Group1’);
$(“#treeGrid”).jqxTreeGrid(‘hideColumn’, ‘Group2’);
$(“#treeGrid”).jqxTreeGrid(‘hideColumn’, ‘Group3’);
$(“#treeGrid”).jqxTreeGrid(‘hideColumn’, ‘Group4’);
$(“#treeGrid”).jqxTreeGrid(‘hideColumn’, ‘Group5’);
$(“#treeGrid”).jqxTreeGrid(‘hideColumn’, ‘Group6’);
$(“#treeGrid”).jqxTreeGrid(‘hideColumn’, ‘Group7’);
$(“#treeGrid”).jqxTreeGrid(‘hideColumn’, ‘Group8’);

//Lock the
$(“#treeGrid”).jqxTreeGrid(‘lockRow’, ‘1’);
$(“#treeGrid”).jqxTreeGrid(‘lockRow’, ‘2’);
$(“#treeGrid”).jqxTreeGrid(‘lockRow’, ‘3’);
$(“#treeGrid”).jqxTreeGrid(‘lockRow’, ‘4’);

// =============== Graph Window Section Start ================
var GraphWindow = (function () {

//Creating the demo window
function _createWindow() {
$(‘#GraphWindow’).jqxWindow({
showCollapseButton: true, maxHeight: 500, maxWidth: 900, minHeight: 200, minWidth: 200, height: 500, width: 900, isModal: true, autoOpen: false, theme: ‘energyblue’,
initContent: function () {
//$(‘#GraphWindow_Tab’).jqxTabs({ height: ‘100%’, width: ‘100%’ });
$(‘#GraphWindow’).jqxWindow(‘focus’);
}
});
};

return {
config: {
dragArea: null
},
init: function () {
//Adding jqxWindow
_createWindow();
}
};
} ());

$(“#GW_btnSave”).on(‘click’, function () {
//Save the data
$(‘#GraphWindow’).jqxWindow(‘close’);
});

$(“#GW_btnCancel”).on(‘click’, function () {
$(‘#GraphWindow’).jqxWindow(‘close’);
});

// =============== Graph Window Section End ================

// =============== Notes Window Section Start ================
var NotesWindow = (function () {

//Creating the demo window
function _createWindow() {
$(‘#NotesWindow’).jqxWindow({
showCollapseButton: true, maxHeight: 400, maxWidth: 600, minHeight: 200, minWidth: 200, height: 220, width: 500, isModal: true, autoOpen: false, theme: ‘energyblue’,
initContent: function () {
//$(‘#NotesWindow_Tab’).jqxTabs({ height: ‘100%’, width: ‘100%’ });
$(‘#NotesWindow’).jqxWindow(‘focus’);
}
});
};

return {
config: {
dragArea: null
},
init: function () {
//Adding jqxWindow
_createWindow();
}
};
} ());

$(“#NT_btnSave”).on(‘click’, function () {
//Save the data

//GraphWindow_Content data[vRow – 1].children[6][vGroup].toString()
var vGroup = $(“#GraphWindow_Content”).attr(‘Group’);
var vRow = $(“#GraphWindow_Content”).attr(‘Row’);

$(“#treeGrid”).jqxTreeGrid(‘beginUpdate’);
//Logic – Save the control status to the parent form.
$(“#treeGrid”).jqxTreeGrid(‘endUpdate’);

$(‘#NotesWindow’).jqxWindow(‘close’);
});

$(“#NT_btnCancel”).on(‘click’, function () {
$(‘#NotesWindow’).jqxWindow(‘close’);
});

// =============== Notes Window Section End =============

// =============== Upload All Window Section Strat =========== //UploadAllWindow
var UploadAllWindow = (function () {

//Creating the demo window
function _createWindow() {
$(‘#UploadAllWindow’).jqxWindow({
showCollapseButton: true, height: 150, width: 300, isModal: true, autoOpen: false, theme: ‘energyblue’,
initContent: function () {
$(‘#UploadAllWindow’).jqxWindow(‘focus’);
}
});
};

return {
config: {
dragArea: null
},
init: function () {
//Adding jqxWindow
_createWindow();
}
};
} ());

$(“#UPLDALL_btnOk”).on(‘click’, function () {
$(‘#UploadAllWindow’).jqxWindow(‘close’);
});

$(“#UPLDALL_btnCancel”).on(‘click’, function () {
$(‘#UploadAllWindow’).jqxWindow(‘close’);
});

// =============== Upload All Window Section End =============

// =============== Upload Selected Window Section Strat =========== //UploadAllWindow
var UploadSelectedWindow = (function () {

//Creating the demo window
function _createWindow() {
$(‘#UploadSelectedWindow’).jqxWindow({
showCollapseButton: true, height: 150, width: 300, isModal: true, autoOpen: false, theme: ‘energyblue’,
initContent: function () {
$(‘#UploadSelectedWindow’).jqxWindow(‘focus’);
}
});
};

return {
config: {
dragArea: null
},
init: function () {
//Adding jqxWindow
_createWindow();
}
};
} ());

$(“#UPLDSEL_btnCancel”).on(‘click’, function () {
$(‘#UploadSelectedWindow’).jqxWindow(‘close’);
});

$(“#UPLDSEL_btnOk”).on(‘click’, function () {
$(‘#UploadSelectedWindow’).jqxWindow(‘close’);
});

// =============== Upload Selected Window Section End =============

// =============== Window Section Init Start ============
GraphWindow.init();
NotesWindow.init();
UploadAllWindow.init();
UploadSelectedWindow.init();
// ============== Window Section Init End ===============

// =============== Controls in Graph Window Section Start =============
$(“#GW_ddlStatus”).jqxDropDownList({ source: StatusDdlSource, selectedIndex: 1, width: ‘200’, height: ’25’, theme: ‘energyblue’ });
$(“#GW_ddlFunction”).jqxDropDownList({ source: FunctionDdlSource, selectedIndex: 6, width: ‘200’, height: ’25’, theme: ‘energyblue’ });
$(“#GW_sldrCurrSet”).jqxSlider({ min: 0, max: 100, ticksFrequency: 10, value: 0, step: 10, width: 250, theme: ‘energyblue’ });
$(“#GW_sldrTimeDelay”).jqxSlider({ min: 0, max: 100, ticksFrequency: 10, value: 0, step: 10, width: 250, theme: ‘energyblue’ });
$(“#GW_sldrCharAngle”).jqxSlider({ min: 0, max: 100, ticksFrequency: 10, value: 0, step: 10, width: 250, theme: ‘energyblue’ });
$(“#GW_sldrBlocking”).jqxSlider({ min: 0, max: 100, ticksFrequency: 10, value: 0, step: 10, width: 250, theme: ‘energyblue’ });
$(“#GW_sldrtRESET”).jqxSlider({ min: 0, max: 100, ticksFrequency: 10, value: 0, step: 10, width: 250, theme: ‘energyblue’ });

$(“#GW_btnSave”).jqxButton({ width: ‘150’, height: ’30’, theme: ‘energyblue’ });
$(“#GW_btnCancel”).jqxButton({ width: ‘150’, height: ’30’, theme: ‘energyblue’ });
// =============== Controls in Graph Window Section End ===============

// =============== Controls in Notes Section Start ================
$(“#NT_Editor”).jqxEditor({ tools: ‘bold italic underline’, width: ‘100%’, height: ‘100%’, theme: ‘energyblue’ });
$(“#NT_btnSave”).jqxButton({ width: ‘100’, height: ’30’, theme: ‘energyblue’ });
$(“#NT_btnCancel”).jqxButton({ width: ‘100’, height: ’30’, theme: ‘energyblue’ });
// =============== Controls in Notes Section End ==================

//UploadAllWindow
// =============== Controls in Upload Dialog Section Start ================
$(“#UPLDALL_btnCancel”).jqxButton({ width: ‘100’, height: ’30’, theme: ‘energyblue’ });
$(“#UPLDALL_btnOk”).jqxButton({ width: ‘100’, height: ’30’, theme: ‘energyblue’ });
// =============== Controls in Upload Dialog Section End ==================

//UploadSelectedWindow
// =============== Controls in Upload Selected Dialog Section Start ================
$(“#UPLDSEL_btnCancel”).jqxButton({ width: ‘100’, height: ’30’, theme: ‘energyblue’ });
$(“#UPLDSEL_btnOk”).jqxButton({ width: ‘100’, height: ’30’, theme: ‘energyblue’ });
// =============== Controls in Upload Selected Dialog Section End ==================

//
$(“#SET_btnSave”).jqxButton({ width: ‘100’, height: ’30’, theme: ‘energyblue’ });
});

</script>
</head>
<body class=’default’>
<div id=’jqxWidget’>
<div id=’jqxSettingScreenTabs’>
- System
- CB Control
- Date and Time
- CT and VT Ratios
- Record Control
- Disturb Recorder
<div>
<table style=”width:100%” border=”0″>
<tr>
<td> </td>
</tr>
<tr>
<td>
<table>
<tr>
<td valign=”top” align=”right” style=”height:auto”>
<input type=”button” id=”btnAddGroup” style=”cursor:pointer” value=”Add Group” />
<input type=”button” id=”btnDeleteGroup” style=”cursor:pointer” value=”Delete Group”/>
<div style=”visibility:hidden” id=”jqxlistbox”></div>
</td>
<td>

</td>
</tr>
<tr>
<td style=”width:100%”>
<div id=”treeGrid”></div>
</td>
<td >

</td>
</tr>
<tr>
<td align=”right” valign=”middle”>
<input id=”SET_btnSave” type=”button” value=”Save” />
</td>
<td>

</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<div id=”GraphWindow”>
<div id=”GraphWindow_Header”>
<span>
Graphical Representation
</span>
</div>
<div style=”overflow: hidden;” id=”GraphWindow_Content”>
<div id=”GraphWindow_Tab”>
<table width=”100%”>
<tr>
<td width=”40%” height=”100%” valign=”top”>
<table>
<tr>
<td width=”30%”>Status </td>
<td><div id=”GW_ddlStatus”></div></td>
</tr>
<tr>
<td>Function </td>
<td><div id=”GW_ddlFunction”></div></td>
</tr>
<tr>
<td>Current Set</td>
<td><div id=”GW_sldrCurrSet”></div></td>
</tr>
<tr>
<td>Time Delay</td>
<td><div id=”GW_sldrTimeDelay”></div></td>
</tr>
<tr>
<td>Char Angle</td>
<td><div id=”GW_sldrCharAngle”></div></td>
</tr>
<tr>
<td>Blocking</td>
<td><div id=”GW_sldrBlocking”></div></td>
</tr>
<tr>
<td>tRESET</td>
<td><div id=”GW_sldrtRESET”></div></td>
</tr>
</table>

</td>
<td width=”60%”>
<div>
<div id=’host’ style=”margin: 0 auto; width: 500px; height: 400px;”>
<div id=’jqxChart’ style=”width: 500px; height: 400px; position: relative; left: 0px; top: 0px;”>
</div>
</div>
</div>
</td>
</tr>
<tr><td> </td><td> </td></tr>
<tr>
<td width=”70%”> </td>
<td width=”30%” align=”right”> <input type=”button” value=”Cancel” id=’GW_btnCancel’ /> <input type=”button” value=”Save” id=’GW_btnSave’ /> </td>
</tr>
</table>

</div>
</div>
</div>

</td>
</tr>
<tr>
<td>
<div id=”NotesWindow”>
<div id=”NotesWindow_Header”>
<span>
Notes
</span>
</div>
<div style=”overflow: hidden;” id=”NotesWindow_Content”>
<div id=”NotesWindow_Tab”>
<table width=”100%”>
<tr>
<td width=”100%”>
<div id=”NT_Editor”></div>
</td>
</tr>
<tr>
<td align=”right”> <input type=”button” value=”Cancel” id=’NT_btnCancel’ /> <input type=”button” value=”Save” id=’NT_btnSave’ /> </td>
</tr>
</table>
</div>
</div>
</div>
</td>
</tr>
</table>
<table>
<tr>
<td>
<div id=”UploadAllWindow”>
<div id=”UploadAllWindow_Header”>
<span>
Upload to device
</span>
</div>
<div style=”overflow: hidden;” id=”UploadAllWindow_Content”>
<div id=”UploadAllWindow_Tab”>
<table width=”100%”>
<tr>
<td width=”100%”>
<label>Do you want to upload the setting to the device ?</label>
<br />
</td>
</tr>
<tr>
<td align=”center”>
<input type=”button” value=”Cancel” id=’UPLDALL_btnCancel’ />
<input type=”button” value=”Ok” id=’UPLDALL_btnOk’ />
</td>
</tr>
</table>
</div>
</div>
</div>
</td>
</tr>
<tr>
<td>
<div id=”UploadSelectedWindow”>
<div id=”UploadSelectedWindow_Header”>
<span>
Upload selected values to device
</span>
</div>
<div style=”overflow: hidden;” id=”UploadSelectedWindow_Content”>
<div id=”UploadSelectedWindow_Tab”>
<table width=”100%”>
<tr>
<td width=”100%”>
<label>Do you want to upload the updated setting to the device ?</label>
</td>
</tr>
<tr>
<td align=”center”>
<input type=”button” value=”Cancel” id=’UPLDSEL_btnCancel’ />
<input type=”button” value=”Ok” id=’UPLDSEL_btnOk’ />
</td>
</tr>
</table>
</div>
</div>
</div>
</td>
</tr>
</table>
</div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>

</body>

</html>
November 27, 2014 at 10:54 am in reply to: spinButtons not working. spinButtons not working. #63447

Sairam
Participant

Please replace the control code with this. Sorry about that. btw, Setting the spinmode and inputmode to advanced didn’t help

slider1.jqxNumberInput({ width:200, digits: 3, symbolPosition: ‘right’, symbol: ‘A’, spinButtons: true });

November 19, 2014 at 5:34 am in reply to: Does cellsRenderer in TreeGrid support widgets ?? Does cellsRenderer in TreeGrid support widgets ?? #62991

Sairam
Participant

Thanks Dimitar. I shall try this out.

November 17, 2014 at 11:48 am in reply to: Dynamic Columns in TreeGrid Dynamic Columns in TreeGrid #62853

Sairam
Participant

Thanks Peter. A sample would be greatly appreciated as I am a novice in using the widgets.

November 17, 2014 at 6:04 am in reply to: TreeGrid doesn't display my data .. Please Help ! TreeGrid doesn't display my data .. Please Help ! #62816

Sairam
Participant

Solved it.

I missed to mention the children in the dataFields section.

Thanks anyway.
Author

Posts

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