Creating Controls at Runtime

WEB TMS WEB Core
1

I am creating a TWebDateTimePicker in code:

lControl := TWebDateTimePicker.Create(Self);
          lControl.Parent := lPanel;
          TWebDateTimePicker(lControl).Kind := TDateTimeKind.dtkDate;
          TWebCustomControl(lControl).ElementPosition := epIgnore;
          TWebCustomControl(lControl).ElementClassName := 'form-control';
          TWebCustomControl(lControl).ElementID := 'param_control_' + lIdx;
          TWebCustomControl(lControl).HeightStyle := ssAuto;
          TWebCustomControl(lControl).WidthStyle := ssAuto;

But on the created form there are 2 things that I am trying to solve. Here is the generated code:

<div id="param_control_0" zindex="0" tabindex="1" role="" style="overflow: hidden; box-sizing: border-box; padding: 1px; border: 1px solid; border-radius: 3px; outline: none; color: rgb(0, 0, 0);" class="form-control"><input type="CHECKBOX" style="display: none;"><input step="1" type="DATE" style="border: 0px none; outline: none; font-family: inherit; font-size: inherit; width: 100%; height: 100%;"></div>

  1. There is a Checkbox created with this control, is there a reason for that?
  2. width and height are set to 100%, even though the styles are set to ssAuto

Any ideas of how to fix this?

2

On page 154 of the developer guide, it is shown that a TWebDateTimePicker maps on a HTML <INPUT> element.
image

So, please do this as explained in the doc and for creating a linked control at runtime, all you need to do is:

lControl := TWebDateTimePicker.Create('param_control_'+ lIdx);

there should not be a further need to set ElementID, HeightStyle, WidthStyle, ElementPosition.

Other things that need to be changed under programmatic control, you can do of course.

3

I have made the changes

lControl := TWebDateTimePicker.Create('param_control_' + lIdx);
lControl.Parent := lPanel;
TWebDateTimePicker(lControl).Kind := TDateTimeKind.dtkDate;
TWebCustomControl(lControl).ElementClassName := 'form-control';

but it still adds the height/width as 100% and creates the checkbox

<div id="param_control_1" zindex="0" tabindex="1" role="" style="overflow: hidden; top: 500px; left: 926px; height: 25px; position: absolute; box-sizing: border-box; padding: 1px; border: 1px solid; border-radius: 3px; outline: none; color: rgb(0, 0, 0);" class="form-control">
<input type="CHECKBOX" style="display: none;">
<input step="1" type="DATE" style="border: 0px none; outline: none; font-family: inherit; font-size: inherit; width: 100%; height: 100%;"></div>

My designer has overridden this in the css so it looks ok.

4

You do not need to set the Parent.

My test code:

var
  dt: TWebDateTimePicker;
  ed: TWebEdit;
begin
  dt := TWebDateTimePicker.Create('mydp');
  dt.Kind := dtkTime;
end;

HTML in the template

<input id="mydp"></input>

Resulting HTML in the DOM:

<input id="mydp" step="1" type="TIME">

5

I'm creating mutiple label/Control pairs so I have a

ContainerPanel (placed at design time and which is the parent of the param_panels) which contains the following (all created at run time)

  • ParamPanel_1 (contains TWebLabel and TWebDateTimePicker)
  • ParamPanel_2 (contains TWebLabel and TWebDateTimePicker)
  • ParamPanel_2 (contains TWebLabel and TWebDateTimePicker)

Not the way to do it?

6

No HTML elements in the template will not be reparented.

7

I think I'm just being stupid here. How do they know where they belong/be rendered? the template only has ContainerPanel on it, which is where the ContainerPanel (TWebPanel) created at design time is displayed.

8

A HTML element in the template, just stays where it is in the template and is intended to be used this way.
If you nevertheless want to move it to another place in the DOM element hierarchy, you'd need to call someelement.appendChild(elementtomove) to move it in the DOM.

9

If I was working in raw JS that's what I would do. Actually creating the controls and setting the parent does actually give the nested structure you'd expect. I'll play around some more, but as you suggest may have to switch to raw JS, which seems to remove the benefits of webcore a bit.