Binding data to Dynamic HTML control

Feb 2, 2012 at 5:09 AM
Edited Feb 2, 2012 at 5:13 AM

Hi,

Its really nice to use jQXB. 

How to bind datasource of jQXB to HTML controls which are added dynamically?

Like this:

function AddControls() {
var test = '<select jqxb-datasource="PersonalDetails" jqxb-datamember="Prefix" jqxb-listsource="PrefixList" jqxb-listvalue="id" jqxb-listtext="description"></select>';

document.getElementById('divDyn').innerHTML = test;
}

But i could not able to bind the datasource to this control which is added dynamically.

Thanks,

Siva

Editor
Feb 2, 2012 at 7:12 AM

Hi sivaram,

 This worked for me:

 

var Person1 = { 'Name': 'Anthony', 'Surname': 'Murray' ,'Address': { 'Street': 'Carnaby Street', 'ZipCode': 'YTSCH', 'Phones': [{ 'prefix': '010', 'number': 23094895 }, { 'prefix': '0185', 'number': 2930940 }, {'prefix': '03485','number' : 3234567}] }, 'MonthlyAmount' : [13498, 23456, 12345, 12345, 38728, 0, 34231, 39748.95, 34534, 2134, 567, 666, 345]

};

 

var test1 = '<select id="listBox1" jqxb-listsource="ListSource" jqxb-listvalue="prefix" jqxb-listtext="number"></select>';

document.getElementById('MyDiv').innerHTML = test1;

jQXB.initialize();

jQXB.setDataSource("ListSource", Person1.Address.Phones).doBind("ListSource" );

 

Feb 2, 2012 at 8:18 AM

Hi anatolii,

Thanks for your reply. 

Here you are adding the control and then initializing jQXB.  But i want that to happen after some user event like below.

function AddControls() { 
var test = '<select jqxb-datasource="PersonalDetails" jqxb-datamember="Prefix" jqxb-listsource="PrefixList" jqxb-listvalue="id" jqxb-listtext="description"></select>';  
document.getElementById('divDyn').innerHTML = test; 
}
Html: 
<input type="button" value="Add Control" onclick="AddControls();"/>
If i click on this button, i need to have that control with databinding. How can i achieve this?
Help me..
Thanks,
Siva
Coordinator
Feb 2, 2012 at 8:20 AM

Hi sivaram,

as Anatolii explained in the previous post, with JQXB it's very simple to bind data with html controls added on the fly. If you add html element you wish to be binded after the initialization process, it's sufficient to call the doBind method for the datasource the new control is binded to.

ex:

<same code from Anatolii>

// New funtion to add a second html element

function addnewcontrol()
{
       document.getElementById('MyDiv2').innerHTML = test1;
       JQXB.doBind("ListSource");
}

Thanks for using JQXB

Feb 2, 2012 at 8:28 AM
Edited Feb 2, 2012 at 8:29 AM

Hi... 

I got the solution from anatolii and worked for meTo make this learning complete, i am posting the code here which i got in mail from LightCode

 

 

Hi sivaram,

as Anatolii explained in the previous post, with JQXB it's very simple to bind data with html controls added on

the fly. If you add html element you wish to be binded after the initialization process, it's sufficient to call the

doBind method for the datasource the new control is binded to.

 

ex:

<same code from Anatolii>

// New funtion to add a second html element

function addnewcontrol()
{
       document.getElementById('MyDiv2').innerHTML = test1;
       JQXB.doBind("ListSource");
}

 

Thanks for using JQXB

 

 Thanks,

Siva