cancel
Showing results for 
Search instead for 
Did you mean: 
cancel
Showing results for 
Search instead for 
Did you mean: 

dropdown list inside the grid using javascript

SOLVED
Highlighted
Participant

dropdown list inside the grid using javascript

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>

<table cellspacing="0" rules="all" border="1" id="Table1" style="border-collapse: collapse;">

<tr>

<th>&nbsp;</th>

<th>id </th>

<th>name</th>

<th>age </th>

<th>roll</th>

<th>gender</th>

</tr>

<tr>

<td><input type="checkbox" id="myCheck"/></td>

<td>001</td>

<td>santhosh</td>

<td>22</td>

<td>15</td>

<td><select id = "list" >

<option value = "male">male</option>

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

</select>

</td>

</tr>

<tr>

<td><input type="checkbox" id="myCheck"/></td>

<td>002</td>

<td>anusha</td>

<td>22</td>

<td>15</td>

<td><select id = "list" >

<option value = "male">male</option>

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

</select>

</td>

</tr>

<tr>

<td><input type="checkbox" id="myCheck"/></td>

<td>003</td>

<td>sreekanth</td>

<td>22</td>

<td>16</td>

<td><select id = "list" >

<option value = "male">male</option>

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

</select>

</td>

</tr>

<tr>

<td><input type="checkbox" id="myCheck"/></td>

<td>004</td>

<td>bharathi</td>

<td>22</td>

<td>15</td>

<td><select id = "list" >

<option value = "male">male</option>

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

</select>

</td>

</tr>

<!-- <input type="button" value="Get Selected" onclick="GetSelected()" /> -->

</table>

<br>

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

<br>

<table id="myTable" border="0">
</table>
<script >

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 gender
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
1 ACCEPTED SOLUTION

Accepted Solutions

Re: dropdown list inside the grid using javascript

Hi @janardhan.

 

You will need to contact the PTC Sales team for engaging with services to assist you with your development.

 

Regards.

 

--Sharon

View solution in original post

5 REPLIES 5
Highlighted

Re: dropdown list inside the grid using javascript

Hi @janardhan.

 

What version of ThingWorx are you running?

 

Regards.

 

--Sharon

Highlighted

Re: dropdown list inside the grid using javascript

Thingworx version - 8.4
Highlighted

Re: dropdown list inside the grid using javascript

1)in eclipse, thingworx menu --> new widget-->select parent project-->widget name --> widget discription 

-->finish ..my widget name is index 

widget contains widgetname.ide.css and widgetname.ide.js and wi and widgetname.runtime.css &widgetname.runtime.js

2)widgetname.ide.css --> i wrote in html code 

3) widgetname.ide.js-----> i wrote in javascript code   after conververting zip file is sucess..

in thingworx import the zip file succesfully ...  but in mashup its not showing widget.......

what is the solution let me know ....

 

Re: dropdown list inside the grid using javascript

Hi @janardhan.

 

You will need to contact the PTC Sales team for engaging with services to assist you with your development.

 

Regards.

 

--Sharon

View solution in original post

Highlighted

Re: dropdown list inside the grid using javascript

Hi @janardhan.

 

If the previous response answered your question (even if it wasn't the response you were looking for), please mark it as the Accepted Solution for the benefit of others with the same question.

 

Regards.

 

--Sharon

Announcements

Thingworx Navigate content has a new home! Click here to access the new Thingworx Navigate forum! ______________________________