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

Highlighted
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
Highlighted

Re: dropdown list inside the grid

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?

Highlighted

Re: dropdown list inside the grid

that code converts conversion of thingworx custom extension 

Highlighted

Re: dropdown list inside the grid

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.

Re: dropdown list inside the grid

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

 

 

Announcements

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