Create a control at runtime


#1

Dear All,

My new question is about creating controls at run time.
Specifically, the controls I am most interested in are:
a. Textbox control
b. RadialGauge control

I have managed to accomplish this for the textarea using:

  obj = document.createElement("textarea");
  FlexBox1.appendChild(obj); 

embedding it in a FlexBox control; but can’t seem to manage to do so for textbox or RadialGauge control (jqWidget).

BR


#2

You can create/add any control or element at runtime by using JavaScript to insert the control/element into the placeholder. The issue will be if a control your inserting needs some sort of “configuration” that would occur after the element is inserted. A great example would be inserting an href under jquery mobile. As a normal insert you’d get a typical link but jquery mobile would turn this into a button.


#3

If you look at the code generated by the RadialGauge sample, you’ll see this:

  NSB.jqxSettings['RadialGauge1']={
    disabled:false,
    width:'213',
    height:'178',
    theme:'classic',
    colorScheme:'scheme09',
  }
  $('#RadialGauge1').jqxGauge(NSB.jqxSettings['RadialGauge1'])

This code assumes you have already created an HTML element called RadialGauge1.


#4

ok, I am trying the following:

var c = document.createElement("RadialGauge1");
document.body.appendChild(c);

This runs on the click of a button but, no element is created…
What do you think is the problem here?


#5

Let me ask a more fundamental question: why do you need to create it at runtime?

Could you create it at Design Time and keep it hidden until needed?


#6

Well, this could be the case but I guess I would then have some limitations as for the amount of controls the user could use…
I’ll give it a try and let you know…


#7

How would I add a control by creating its name dynamically?
Example ‘TextBox’ + n = TextBox1


#8

Did you see this?

https://blog.appstudio.dev/2012/10/creating-runtime-buttons-bonus-a-single-event-for-all-your-buttons/

The reason createElement("RadialGauge1") does not work is that the argument for createElement needs to be an HTML element, like div, button, input, etc. RadialGauge is a control, built on top of a number of HTML elements.