jQgrid change element in form based on another August 12, 2011

David Hansen, 2009/09/19 15:59

Here’s an example of using editoptions dataEvents to change another form element based on an onChange event in a <select>. In this case, the form contains Job_Name and Job_Number fields. The value of the Job_Number field is set using the value of the selected Job_Name option.

 {  name:   'Job_Number',
    index: '`Job #`',
    editable: true,
    edittype: 'text',
    editoptions: { size: 10, readonly: 'readonly'},
    editrules: {required: true },
    formoptions: { label: 'Job #' },
    width: 10,
    formatter: 'integer',
    formatoptions: { thousandsSeparator: '' },
    searchoptions: { sopt: ['eq','ne','lt','le','gt','ge', 'in', 'ni'] },
    align: 'right',
    sortable: true
 },
 {  name:   'Job_Name',
    index: '`Job Name`',
    editable: true,
    edittype: 'select',
    editoptions: { size: 1,
                   dataUrl: 'Includes/tblJobSelect.php',
                   dataEvents: [
                      {  type: 'change',
                         fn: function(e) {
                            $('input#Job_Number').val(this.value);
                         }
                      }
                   ]
    },
    formoptions: { label: 'Job Name' },
    searchoptions: { sopt: ['eq','ne','lt','le','gt','ge', 'cn', 'nc', 'bw', 'bn'] },
    align: 'right',
    width: 150,
    align: 'left',
    sortable: true
 },

this – in $(‘input#Job_Number’).val(this.value); – refers to the DOM element associated with the onChange event, the Job_Name <select>, in this case.

The dataUrl returns plain text HTML ”<select><option value=999>Some Job Name</option>…</select>” that jqGrid uses to create the select.

Notice the use of the readonly attribute on the Job_Number field.

http://www.trirand.com/jqgridwiki/doku.php?id=wiki:common_rules

Advertisement