Add multiple input elements in a custom edit type field

Question

Is there a way to create a custom field that has multiple input elements? I'm consulting the documentation and creating a single input element is pretty straight forward, but I'm not exactly sure how you'd add more than one.

Has anyone crossed this bridge before? If so, how did you do it?

Here's some sample code:

...
{name: 'Dimensions', index: 'Dimensions', hidden: true, editable: true, 
edittype: 'custom', editoptions: {custom_element: dimensionsElement, 
custom_value: dimensionsValue}, editrules: {edithidden: true}},
...


function dimensionsElement(value, options) {
    var el = document.createElement("input");
    el.type = "text";
    el.value = value;
    return el;
}

function dimensionsValue(elem) {
    return $(elem).val();
}

Solution

You can use jQuery to create multiple input elements. So if your field is for example a persons full name you can use following

{ name: 'FullName', editable: true, edittype: 'custom', width: 300,
  editoptions: {
      custom_element: function(value, options) {
          // split full name to the first and last name
          var parts = value.split(' ');
          // create a string with subelements
          var elemStr = '<div><input id="'+options.id +
                        '_first" size="10" value="' + parts[0] +
                        '" /></br><input id="'+options.id + '_last' +
                        '"size="20" value="' + parts[1] + '" /></div>';
          // return DOM element from jQuery object
          return $(elemStr)[0];
      },
      custom_value: function(elem) {
          var inputs = $("input", $(elem)[0]);
          var first = inputs[0].value;
          var last = inputs[1].value;
          return first + ' '+ last;
      }
  }},

It is of cause a raw code fragment and you should improve the layout of input elements (the value of size attribute for example). It shows the main concept of building of custom edit elements.

UPDATED: If you use custom editing it is important to use recreateForm: true parameter (see http://www.trirand.com/jqgridwiki/doku.php?id=wiki:form_editing). See jqgrid - Set the custom_value of edittype: 'custom' for details.