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();
}
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With