Events inside JqGrid Add Form

Question

Is there a way to add events inside Add Form in jqgrid. Say For example in below Add form, i want to set size avg value based on the value from size i enter. (Here 3/6). i don't want to set the value in onSubmit event but before selecting Size Rem

{name:'size', index:'size', width:80, align:'right', hidden: false, editable:true},  
{name:'sizeavg', index:'sizeavg', width:80, align:'right', editable:true, hidden: false}, 
{name:'sizerem', index:'sizerem', width:80, align:'right', editable:true, hidden: false, 
    edittype:'select',align:'left',
    editoptions:{value:{F:'F',S:'S',FS:'F/S',NA:'Double Butt'}},
}, 

Any help will be appreciated.

Answer 1

jqGrid provides you many ways to implement any scenario which you need. First of all you need understand that form editing, which you use now, assigns id attribute on every input field in the form. The value of id attribute is equal to the value of name property of the column in colModel. So to access sizeavg input field for example you can use $("#sizeavg").val(). It gives you simple way to modify the field on some conditions or in case of some event.

To catch an event you need to bind it to the corresponding input field. One way to do this is to use dataEvents property of editoptions. You can find examples of event binding here, here and many other answers.

So you can bind change, focusout, keydown or some other event to size or sizerem columns. You can get the current values using $("#size").val() and $("#sizerem option:selected").val() and then if required modify the value of sizeavg using $("#sizeavg").val("new nalue").