Binding Lists and combos

With jQXB is possible to bind a list or combo to a datasource specifying which datasource containing an array of values to connect and which members use to bind the value and the text to display.

The required attributes are:

  • jqxb-listsource
  • jqxb-listvalue
  • jqxb-listtext
  • jqxb-listdatapath (ver. 2.1 only)

HTML Declaration

<table>	
 <tr>
   <td>SKU</td>
   <td><input type="text" jqxb-datasource="product" jqxb-datamember="sku"/></td>		
 </tr>
 <tr>
   <td>DESCRIPTION</td>
   <td><input type="text" jqxb-datasource="product" jqxb-datamember="description"/></td>		
 </tr>
 <tr>
   <td>COLOUR</td>
   <td><select jqxb-datasource="product" jqxb-datamember="colour" jqxb-listsource="colourslist" jqxb-listvalue="id" jqxb-listtext="description"></select></td>
<tr>
  <tr>
    <td valign="top">OPTIONS</td>
    <td><select multiple="multiple" jqxb-datasource="product" jqxb-datamember="options" jqxb-listsource="optionslist" jqxb-listvalue="id" jqxb-listtext="value"></select></td>		
  </tr>
  <tr>
    <td valign="top">AVAILABLE</td>
    <td><input type="checkbox" jqxb-datasource="product" jqxb-datamember="available" jqxb-bindedattribute="checked"></select></td>		
  </tr>
</table>

jQXB code

<script type="text/javascript">
	var viewModel = {
			"colours": [{"id": 1,"description": "Red"},{"id": 2,"description": "Blue"},{"id": 3,"description": "White"}],
			"options": [{"id": 1,"value":"skin"},{"id":2,"value":"bottle"},{"id":3,"value":"6 march"}],
			
			"data": {"sku": "109-106","description": "bycicle","options":[1,3],"colour":3,"available":true}
			};
        jQuery(document).ready(function () {
        jQXB.initialize();
		jQXB.setDataSource("colourslist",viewModel.colours).doBind("colourslist");
		jQXB.setDataSource("optionslist",viewModel.options).doBind("optionslist");
        jQXB.setDataSource("product", viewModel.data).doBind("product");
		
    });
</script>

Last edited Aug 18, 2013 at 12:54 AM by lightcode, version 9

Comments

No comments yet.