jQuery UI Widgets Forums Form binding to label in form

This topic contains 2 replies, has 2 voices, and was last updated by  Hristo 7 months ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • binding to label in form #107756

    Marina
    Participant

    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’
    }

    binding to label in form #107770

    Marina
    Participant

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

    binding to label in form #107774

    Hristo
    Participant

    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

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.