Forum

November 2nd, 2014
A A A
Avatar

Lost password?
Advanced Search

— Forum Scope —




— Match —





— Forum Options —





Minimum search word length is 3 characters - maximum search word length is 84 characters

The forums are currently locked and only available for read only access
sp_Feed Topic RSS sp_Related Related Topics sp_TopicIcon
multi-checkbox custom edittype solution
13/05/2010
10:00
Avatar
Gil
Member
Members
Forum Posts: 8
Member Since:
22/04/2010
sp_UserOfflineSmall Offline

I created a muti-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 />&nbsp;';
   }

   ctl = ctl.replace( /\<br \/\>\&nbsp;$/, '' );
   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;
}

28/09/2010
17:50
Avatar
downunder
Member
Members
Forum Posts: 9
Member Since:
12/11/2009
sp_UserOfflineSmall Offline

Nice work, but how do you bring the values to the checkboxes when you do an edit?

let's say I have 3 checkboxes:

test1 checked

test  not_checked

test3 checked

the value are saved in the database. Next time I want to edit the records the "test1" and "text3" should be already checked when openening the form. I tried to modifiy your script but couldn't find out how to bring the values from the json dataset to your function...

19/01/2011
11:05
Avatar
feasfeasf
New Member
Members
Forum Posts: 1
Member Since:
19/01/2011
sp_UserOfflineSmall Offline

note that there is a error 'Uncaught SyntaxError: Unexpected token &' on following line:

ctl = ctl.replace( /<br />&nbsp;$/, '' );

it could be fixed by :

ctl = ctl.replace( /<br \\/>&nbsp;$/, '' );

Forum Timezone: Europe/Sofia

Most Users Ever Online: 715

Currently Online:
41 Guest(s)

Currently Browsing this Page:
1 Guest(s)

Top Posters:

OlegK: 1255

markw65: 179

kobruleht: 144

phicarre: 132

YamilBracho: 124

Renso: 118

Member Stats:

Guest Posters: 447

Members: 11373

Moderators: 2

Admins: 1

Forum Stats:

Groups: 1

Forums: 8

Topics: 10592

Posts: 31289

Newest Members:

, razia, Prankie, psky, praveen neelam, greg.valainis@pa-tech.com

Moderators: tony: 7721, Rumen[Trirand]: 81

Administrators: admin: 66

Comments are closed.
Privacy Policy   Terms and Conditions   Contact Information