jQWidgets Forums

Tagged: Number Input, numeric input

This topic contains 6 replies, has 2 voices, and was last updated by Peter Stoev 10 years, 5 months ago.

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

Author

spinButtons not working. Posts
November 27, 2014 at 10:49 am spinButtons not working. #63445
Sairam
Participant
Hi

I have a NumberInput inside a ‘createEditor’ section of a treeGrid. When I edit the grid the NumberImput shows up but the spin buttons doesn’t work, which means I couldn’t increment/decrement a value. Here is my code –
```
 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: '200px', digits: 3, symbolPosition: 'right', symbol: 'A', spinButtons: true });

                               break;

                       }

                   }
```
November 27, 2014 at 10:54 am 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 27, 2014 at 10:59 am spinButtons not working. #63449

Peter Stoev
Keymaster

Hi Sairam,

1. The widget has no height.
2. Please, provide Full example.
3. Make sure you use latest version – 3.6.0.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

November 27, 2014 at 11:04 am 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 11:42 am spinButtons not working. #63458

Peter Stoev
Keymaster

Hi Sairam,

Please, provide a Small and Well-Formatted sample. We can’t run or debug the one you provided.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

December 4, 2014 at 6:43 am 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>
December 4, 2014 at 7:30 am spinButtons not working. #63768

Peter Stoev
Keymaster

hi Sairam,

Post, please a small example and I suggest you to do that in jsfiddle.net. I’d also suggest you to look at the Grid’s Cell Editing demo which has Number Input editor which works for the Quantity and Price columns.

Best Regards,
Peter Stoev

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

Posts

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

You must be logged in to reply to this topic.