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

Community Tip - You can subscribe to a forum, label or individual post and receive email notifications when someone posts a new topic or reply. Learn more! X

dropdown list inside the grid

janardhan
4-Participant

dropdown list inside the grid

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
4 REPLIES 4

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?

that code converts conversion of thingworx custom extension 

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.

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

 

 

Top Tags