Add multiple input elements in a custom edit type field

by

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.

More Related Contents:

  1. Adding new row to jqGrid using modal form on client only
  2. Stopping columns resizable in jqgrid
  3. Adding a CSS class to a column
  4. how to persist current row in jqgrid
  5. Browser Memory Usage Comparison: inline onClick vs. using JQuery .bind()
  6. jQGrid, how to make a column editable in the add dialog but not during (inline) edits
  7. jqgrid: how to set toolbar options based on column value in row selected
  8. Unable to position pager (navigation bar) above jqGrid
  9. Get all rows not filtered from jqGrid
  10. jqGrid client-side searching
  11. Custom jQGrid post action
  12. jqgrid: How to set cell specific css class at generation time
  13. postData not passing any parameters!
  14. How to get a jqGrid cell value when editing
  15. JQgrid checkbox onclick update database
  16. jqGrid Not Loading Data
  17. jqGrid implementing of custom cell: integration of raty-plugin
  18. JQGrid Programmatically Select Grid Row
  19. jqGrid need a field editable on Add dialog but not Edit dialog
  20. Load local JSON data in jQgrid without AddJsonRows
  21. Real-time data in a grid – better method
  22. JQGrid – How Can We make an Custom Row Detail
  23. jqGrid – format ratio field as percent value
  24. jqGrid – How to modify form_editing construction?
  25. Filtering jqGrid datetime columns using date picker just on date
  26. jqGrid Subgrid with “local” Data
  27. jqgrid change cell value and stay in edit mode
  28. jqGrid Pager Area – Using Font Awesome Icons
  29. Setting data attribute on each row of a jqgrid table
  30. How to delete rows with local data in jqgrid

Leave a Comment