employee list

janardhan · ‎Dec 23, 2019

drop down list inside the grid using java script i have successfully completed. i converted to thingworx and import successfull .but it not showing widget in mash up ...what is solution

this is my code

<html>

<head>

<style>

table, th, td {

border: 1px solid black;

}

</style>

</head>

<body>

<h1>employee list</h1>

<tr>

<th>gender</th>

</tr>

<tr>

<td>santhosh</td>

<option value = "female">female</option>

</select>

</td>

</tr>

<tr>

<td>anusha</td>

<option value = "female">female</option>

</select>

</td>

</tr>

<tr>

<td>sreekanth</td>

<option value = "female">female</option>

</select>

</td>

</tr>

<tr>

<td>bharathi</td>

<option value = "female">female</option>

</select>

</td>

</tr>

</table>

<br>

<button value="Display" onclick="PrintData()">Display</button>

function PrintData() {

// getControls();
document.getElementById("myTable").innerHTML = "";
var table = document.getElementById("myTable");

var header = table.createTHead();

// Create an empty <tr> element and add it to the first position of <thead>:
var row1 = header.insertRow(0);
//var row1 = table.insertRow(0);
var cell11 = row1.insertCell(0);
var cell21 = row1.insertCell(1);
var cell31 = row1.insertCell(2);
var cell41 = row1.insertCell(3);
var cell51 = row1.insertCell(4);
cell11.innerHTML = "ID";
cell21.innerHTML = "NAME";
cell31.innerHTML = "AGE";
cell41.innerHTML = "ROLL";
cell51.innerHTML = "GENDER";

var ctlGridViewProducts = document.getElementById("Table1");

var rowCount = ctlGridViewProducts.rows.length;

//clear all current rows

// fnDeleteRows();

var id, name, age, roll, gender, selectedIndex, isChecked;

var currRow;
var c=0;
for (i = 1; i < rowCount; i++) {

currRow = ctlGridViewProducts.rows[i];

id = currRow.cells[1].innerText;

name = currRow.cells[2].innerText;

age = currRow.cells[3].innerText;

roll= currRow.cells[4].innerText;

//selectedIndex = currRow.cells[5].selectedIndex;

//subCategoryName = currRow.cells[5].childNodes[1].innerText;

//var e=currRow.cells[5].text;

//var myvalue=e.options[e.selectedIndex].value;
var e = currRow.cells[5].getElementsByTagName("select")[0];
var myValue = e.options[e.selectedIndex].value;

//isChecked = currRow.cells[0].childNodes[1].innerText;
//var checkBox = document.getElementById("myCheck");
var checkboxfinal=ctlGridViewProducts.getElementsByTagName("input");

if (checkboxfinal[i-1].checked) {

//document.getElementById("para").innerHTML ="ID:"+id+" Name:"+ame+" Age:"+age+" roll:"roll+"Gender:"+myValue+"";
//var para = document.createElement("p");
//var node = document.createTextNode("id:"+id+" name:"+name+"Age:"+age+"roll:"+roll+"Gender:"+myValue+"");
//para.appendChild(node);

//var element = document.getElementById("div1");
//element.appendChild(para);
c=c+1;

var table = document.getElementById("myTable");
var row = table.insertRow(c);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
var cell4 = row.insertCell(3);
var cell5 = row.insertCell(4);
cell1.innerHTML = id;
cell2.innerHTML = name;
cell3.innerHTML = age;
cell4.innerHTML = roll;
cell5.innerHTML = myValue;

}
}
}
</script>
</body>
</html>

output :

employee list

id	name	age	roll
001	santhosh	22	15
002	anusha	22	15
003	sreekanth	22	16
004	bharathi	22	15

ID	NAME	AGE	ROLL	GENDER
002	anusha	22	15	female

VladimirRosu · ‎Dec 27, 2019

Hi. All the code you wrote there is standard ThingWorx Mashup Builder functionality.

I don't see why you would need to go through this approach to create the UI.

Can you please explain what are you working on so we can properly guide you?

janardhan · ‎Jan 03, 2020

that code converts conversion of thingworx custom extension

VladimirRosu · ‎Jan 03, 2020

I'm sorry, but I don't understand your answer.

I should explain what I wrote above in more detail: if you use a Collection widget you can achieve the same behavior, without writing code.

Without knowing context around what you are trying to achieve at a higher level, I can state that the approach you took is not the ideal one.

janardhan · ‎Jan 03, 2020

in eclipse create thingworx custom extension project

and chose the thingworxmenu contains new widget ,widget name nd description save

its generate metadata.xml

in ui its creates widget ,that widget contains

widgetname.ide.css I wrote the css and html code

nd widgetname.ide.js I wrote the jaavascript code

widgetname .runtime .css nd widgetname.runtime.js contains default code

finally run -gradlebuild - its converted into zip file.

import that zip file into thingworx succesfull.but it not showing widget in my mashup

dropdown list inside the grid

dropdown list inside the grid

employee list