jQuery Grid Plugin - jqGrid - Topic: Dynamic Checkboxes in form but not table

OlegK on Dynamic Checkboxes in form but not table

Sun, 27 Feb 2011 23:13:25 +0200

Instead of usage of $.get('/async/groups.lasso',{x:1}, ...); you can use dataUrl option of the editoptions.

About your problem with multiselect elements it is difficult to recommend you one way. You can either use multilelect elements (see the answer with the demo) or custom formatter with custom editing which do this (see this and this).

Another way could be to use additional multiselect grid for editing purpose.

One more option is to use many columns with checkboxes. To make all more compact I use column headers with vertical texts. See the answer for example, with the demo. I use personally frequently the way in my projects. The main advantage of the way is simple filtering. Combining this way with the toolbar filtering having stringResult:true and advanced searching one can gives users easy way to analyse the displayed data. The main disadvantage is: the vertical textes looks not perfect in the Internet Explorer, but the tooltips on the column header (see headertitles:true) reduce the problem.

Best regards
Oleg

Steffan on Dynamic Checkboxes in form but not table

Sun, 27 Feb 2011 21:04:08 +0200

I'm still hoping someone can chine in on checkboxes but perhaps the multiple select is the best option. Is there a way to add tool tips to the multiple select directing how to select multiple?

Anyway here is what I used. If you have suggestions on how to improve this, let me know. It seems there has to be a better way to get the groups on onload without wrapping the grid in the get statement.

$.get('/async/groups.lasso',{x:1}, function(groups){

$("#navgrid").jqGrid({

url:"/async/users.lasso",

datatype: "XML",

hidegrid: false,

colNames:["User ID","First Name","Last Name","Email","Password","Groups","Notes","Admin"],

colModel:[

{name:'id', index:'id', width:55, editable:false, editoptions:{readonly:true,size:10}, hidden:true},

{name:'firstname', index:'firstname', width:100, editable:true, editoptions:{size:25}, editrules:{required:true}},

{name:'lastname', index:'lastname', width:100, editable:true, editoptions:{size:25}, editrules:{required:true}},

{name:'email', index:'email', width:100, editable:true, editoptions:{size:25}, editrules:{email:true, required:true}},

{name:'password', index:'password', width:100, editable:true, editoptions:{size:25}, editrules:{edithidden:true}, hidden:true },

{name:'groups', index:'groups', width:100, editable:true, edittype:"select", editoptions:{multiple:true, size:3, value: groups }, sortable:false},

{name:'notes', index:'notes', width:200, editable:true, edittype:"textarea", editoptions:{rows:"3",cols:"26"}, sortable:false},

{name:'isadmin', index:'isadmin', width:60, editable:true, edittype:"checkbox", editoptions:{value:"Yes:No"}, align:"center" }

rowNum:10,

rowList:[10,20,30],

pager: '#pagernav',

sortname: "id",

viewrecords: true,

sortorder: "desc",

caption:"Existing Users",

editurl:"/async/users.lasso",

height:210

});

$("#navgrid").jqGrid('navGrid','#pagernav',

{}, //options

{height:320,reloadAfterSubmit:false}, // edit options

{height:320,reloadAfterSubmit:false}, // add options

{reloadAfterSubmit:false}, // del options

{} // search options

);

},"json");

Steffan on Dynamic Checkboxes in form but not table

Sun, 27 Feb 2011 19:31:48 +0200

Ok, I'm a bit closer. I tried a multiple select which will do the same thing but the checkboxes are a bit nicer. Also, is how to load those multiple select values and how do you load one's values and set it as selected? Does it require an ajax query to get the groups and somehow set the selected one upon showing the edit form??

Steffan on Dynamic Checkboxes in form but not table

Sun, 27 Feb 2011 19:09:33 +0200

I'm trying to figure out if my description is confusing. On a regular form, I have those checkboxes shown in my post which are pulled from a MySQL table. How can I get those to load into the jqGrid form for adding a new records or for editing purposes?

Steffan on Dynamic Checkboxes in form but not table

Sun, 27 Feb 2011 17:13:52 +0200

I am converting from a multi page scenario of having a page for adding and a page for editing/deleting. The grid is wonderful for this purpose. One thing I am not sure how to do is on my normal add page is I display a bunch of checkboxes of options pulled from a database and those options are then added to a table when submitted.

Here is an example of how I show the options:

Keep in mind these are dynamic and will change as more are added. My problem is how to get them to show in the form but not the table. I can serve these as the grid is loaded but how would I build that into the table?