jqgrid - dynamically change mask based on a previous column value

Question

I am using jquery.maskedinput-1.3.js

In column 1, are the phone types. In column 2 the phone numbers.

{ name: 'PhoneTypeId', index: 'PhoneTypeId', hidden: true, editable: true, sortable: true},

{ name: 'Phone', index: 'Phone', width: 150, editable: true, editoptions: { dataInit: function (elem) { $(elem).mask("[phone]"); }, dataEvents: [{ type: 'change', fn: function (e) { hasChanges=true } }]}, editrules:{required: true}, sortable: true },

I'd like to dynamically change the mask based on the type of phone. Is this possible?

My data is json serialized objects: datatype: "local", data: @Html.Raw(ViewBag.Phones) editurl: 'clientArray'

Thanks, Gen

Answer 1

You can add change event (using dataInit) of the phone type and based on this you can change the mask (if this plugin allows this). Initially when you start editing (depending on the edit type - form edit or inline edit) you can use some events before editing by example beforeShowForm for form edit or beforeEditRow for inline edit. If you use Guriddo jqGrid JS you can look at the documentation here

EDIT:

In case the field phonetype is not editable by the user then

{ name: 'Phone', index: 'Phone', width: 150, editable: true, 
    editoptions:{ 
        dataInit: function (elem, options) { 
           // use the id of the row
           var id = options.rowId;
           // content of the phonetype cell
           var phonetypeval = $(this).jqGrid('getCell', id, 'PhoneTypeId')
           if( phonetypeval === 'something') {
               mask = 'mask1';
           } else {
               mask = 'mask2';
           }
           $(elem).mask(mask); 
        }, 
        dataEvents: [{
            type: 'change', fn: function (e) { hasChanges=true } }
        ]}
    , editrules:{required: true}, 
    sortable: true}

Note that this code is valid for inline and form edit.