binding to label in form

[MarinaParticipant]

I was trying to bind value to type label, but its not binding, as soon as i change type to text i can see bound value, but i need to be bound it to label.
{
name: ‘lblTargetRadioID’,
bind: ‘targetradioid’,
columnWidth: ‘150px’,
type: ‘label’,
rowHeight: ’40px’
}

[MarinaParticipant]

can someone answer if type label can be bound to values at all?

[HristoParticipant]

Hello Marina,

Could you clarify what you want to achieve?
If you want to set a new value for the label not on the widget then you could try this approach:

var template = [
  {
    bind: "numberinput",
    type: "number",
    label: "Number",
    required: true,
    labelWidth: "80px",
    width: "250px",
    component: "jqxNumberInput",
    init: function (component) {
      component.jqxNumberInput({ theme: "classic", width: "250px", height: "30px", inputMode: "simple", symbol: " pt", symbolPosition: "right", spinButtons: true });
    }
  },
  {
    bind: "city",
    type: "custom",
    label: "City",
    required: true,
    labelWidth: "80px",
    width: "250px",
    init: function (component) {
      var options = [
        { value: "California" },
        { value: "New York"},
        { value: "Oregon"},
        { value: "Illinois"},
        { value: "Texas"}
      ];
      component.jqxComboBox({
        width: 250,
        height: 30,
        source: options
      });
    }
  },
  {
    bind: "state",
    type: "option",
    label: "State",
    required: true,
    labelWidth: "80px",
    width: "250px",
    component: "jqxDropDownList",
    options: [
      { value: "California" },
      { value: "New York"},
      { value: "Oregon"},
      { value: "Illinois"},
      { value: "Texas"}
    ]
  },
  {
    name: "zipCode",
    bind: "zip",
    type: "text",
    label: "Zip code",
    required: true,
    labelWidth: "80px",
    width: "250px"
  },
  {
    type: "blank",
    rowHeight: "10px"
  },
  {
    columns: [
      {
        type: "button",
        text: "Sign up",
        width: "90px",
        height: "30px",
        rowHeight: "40px",
        columnWidth: "50%",
        align: "right"
      },
      {
        type: "button",
        text: "Cancel",
        width: "90px",
        height: "30px",
        rowHeight: "40px",
        columnWidth: "50%"
      }                
    ]
  }
];
var sampleValue = {
  numberinput: "1001",
  city: "San Antonio",
  state: "Texas",
  zip: "78209"
};

$("#sampleForm").jqxForm({
  template: template,
  value: sampleValue,
  padding: { left: 10, top: 10, right: 10, bottom: 10 }
});

setTimeout(function () {
  template[2].label = "USA State";  
  $("#sampleForm").jqxForm({ template: template });
  $("#sampleForm").jqxForm("refresh");
}, 1000);

I hope this will help.

Best Regards,
Hristo Hristov

jQWidgets team
https://www.jqwidgets.com

[Author]

Posts