jqGrid multi-checkbox custom edittype solution
- by gsiler
For those of you trying to understand jqGrid custom edit types ...
I created a multi-checkbox form element, and thought I'd share. This was built using version 3.6.4. If anyone has a more efficient solution, please pass it on.
Within the colModel, the appropriate edit fields look like this:
edittype:'custom'
editoptions:{ custom_element:MultiCheckElem, custom_value:MultiCheckVal, list:'Check1,Check2,Check3,Check4' }
Here are the javascript functions (BTW, It also works – with some modifications – when the list of checkboxes is in a DIV block):
//————————————————————
// Description:
// MultiCheckElem is the "custom_element" function that builds the custom multiple check box input
// element. From what I have gathered, jqGrid calls this the first time the form is launched. After
// that, only the "custom_value" function is called.
//
// The full list of checkboxes is in the jqGrid "editoptions" section "list" tag (in the options
// parameter).
//————————————————————
function MultiCheckElem( value, options )
{
//———-
// for each checkbox in the list
// build the input element
// set the initial "checked" status
// endfor
//———-
var ctl = '';
var ckboxAry = options.list.split(',');
for ( var i in ckboxAry )
{
var item = ckboxAry[i];
ctl += '<input type="checkbox" ';
if ( value.indexOf(item + '|') != -1 )
ctl += 'checked="checked" ';
ctl += 'value="' + item + '"> ' + item + '</input><br /> ';
}
ctl = ctl.replace( /<br /> $/, '' );
return ctl;
}
//————————————————————
// Description:
// MultiCheckVal is the "custom_value" function for the custom multiple check box input element. It
// appears that jqGrid invokes this function the first time the form is submitted and, the rest of
// the time, when the form is launched (action = set) and when it is submitted (action = 'get').
//————————————————————
function MultiCheckVal(elem, action, val)
{
var items = '';
if (action == 'get') // the form has been submitted
{
//———-
// for each input element
// if it's checked, add it to the list of items
// endfor
//———-
for (var i in elem)
{
if (elem[i].tagName == 'INPUT' && elem[i].checked )
items += elem[i].value + ',';
}
// items contains a comma delimited list that is returned as the result of the element
items = items.replace(/,$/, '');
}
else // the form is launched
{
//———-
// for each input element
// based on the input value, set the checked status
// endfor
//———-
for (var i in elem)
{
if (elem[i].tagName == 'INPUT')
{
if (val.indexOf(elem[i].value + '|') == -1)
elem[i].checked = false;
else
elem[i].checked = true;
}
} // endfor
}
return items;
}
