EJS Template table and Combo box

[kaindala]

Hi,

When I add a combo box code to the EJS template table it does not work? How are we suppose to add these to the EJS tables.

<table id="openPayables" class="customtable" width="100%">
<% for (i = 0; i < L2000DA.length; i++) { %>
<tr>
<td>
<div id="$OPT" class="form-control HI" style="position: absolute; background-color: rgb(255, 255, 255); overflow: hidden; border: 1px solid rgb(127, 157, 185); height: 40px; width: 90px;">
<input type="text" autocomplete="off" class="form-control" name="undefined" maxlength="1" style="position: absolute; border: 0px none; top: 0px; left: 1px; padding-top: 1px; font-family: "Trebuchet MS"; font-weight: normal; outline: none; width: 69px;">
<img src="/profoundui/proddata/images/combo/down_arrow.gif" style="position: absolute; top: 0px; right: 0px; width: 18px; height: 20px;">
</div>
</td>
<td class="col-vendor">
<%= L2000DA['WKVND#'] %>
</td>
<td class="col-name">
<%= L2000DA['$NAME'] %>
</td>
<td class="col-payamtdta">
<%= L2000DA['WKPAMT#DA'] %>
</td>
<td class="col-amtduedta">
<%= L2000DA['WKADUE#DA'] %>
</td>
<td class="col-totaldta">
<%= L2000DA['WKTDUE#DA'] %>
</td>
<td class="col-discdta">
<%= L2000DA['WKDAMT'] %>
</td>
</tr>
<% } %>
</table>

[Scott Klement]

EJS is a templating system for coding your own HTML. You cannot place our widgets in the HTML produced by EJS. Instead, drag our widgets onto the display using the visual designer.

[kaindala]

We converted the subfile to EJS template table, but how can we code the combo box for this table?

Dragging the widget like combo box on the EJS template container, does not do the same thing like a subfile grid. Is there a way to achieve this.

[Scott Klement]

The combo box is not just an HTML tag, it is a set of JavaScript routines that switch between an HTML dropdown (select tag) and a textbox (input tag) and do all sorts of other things like load the dropdown data from a database in the background, handle keystrokes, etc. it's a fairly sophisticated thing, not just an HTML tag.

You could bring it in, but it would require JavaScript code to do that, and it likely wouldn't be simple. I can't tell you precisely what to do off the top of my head, and as I've never done it... but, I can tell you what I'd try:

1) In the EJS, put empty tags where you want the dropdown to be. Give them ids that you can reference that are separate for each row. We use a dot followed by the row number for ours, so maybe something like "comboHolder.1" for row 1, "comboHolder.2" for row 2, etc.

2) Run a JavaScript routine after the EJS has rendered. I don't know how to do that, it might take some figuring out? Maybe you can do it by inserting a <script> tag after the HTML for your subfile?

3) The JavaScript routine can loop through the "comboHolder" elements and call the newElement() API to create a "div" element. Once the div is created, you can use applyProperty to set all of the properties for the combo box. At the end, use applyProperty() to change the field type to "combo box".

So, this is pretty complex... and nobody has done it before to my knowledge. (We have never recommended using EJS for input-capable things.) You will need to be able to troubleshoot and maintain this code, so be sure you understand it and know how to use the browser's tools for debugging, etc. You might consider if this is really worthwhile? For example, if you can get by with standard HTML... that would be a lot easier to deal with. Or if you can use our regular grid widget, that would be a lot easier. Or you could use something like jQuery or something that might already have it's own combo box that's more designed to be used this way, etc.

Good luck