CODEWITHSUNDEEP
javascriptjquerycheckboxjqgrid
gamini2006
gamini2006

Reputation: 299

jqGrid how to add multiple checkboxes to a column

I want to add multiple check boxes to a column on edit/add mode. Now this column has a select box with multiple option enabled. I want to replace it with checkbox list or radio button list

My idea is: user should be able to select the relevant options as he desired by checking the check boxes which are listed in a particular cell(on add or edit mode:inline). Once the row is saved should show only the selected option user selected(without check boxes).

Below is my code snippet for the select box for particular column:

{
     name: 'RoomTypes', index: 'RoomTypes', width: 300, editable: true, edittype: 'select',
                   editoptions: {
                         value: roomTypesFormatterEdit,
                         custom_element: function (value, options) {
                             return $.jgrid.createEl.call(this, "select",
                                 $.extend(true, {}, options, { custom_element: null, custom_value: null }),
                                 value);
                         },
                         custom_value: function ($elem, operation, value) {
                             if (operation === "get") {
                                 return $elem.val();
                             }
                         },
                         multiple: true
                     },
                     align: 'left', formatter: roomTypesFormatter
                 },

Where "roomTypesFormatterEdit" return list of hotel room names which will display in select box.

Also I want to re-arrange the height of the editing(edit mode) row to fit with the height of the check boxes or to show all the items in the select box

Please Help Thank you all

Upvotes: 0

Views: 2836

Answers (1)

Oleg
Oleg

Reputation: 221997

I think that you don't need to write your custom editing control (custom_element and custom_value) or custom formatter (formatter and unformat). Instead of that you need just add multiple: true property to editoptions to have base multiselect functionality. To improve visibility you can use some existing controls like jQuery UI MultiSelect Widget or Select2. The answer and this one provide demos which uses jQuery UI MultiSelect Widget. One more answer and this one provide demos which use Select2. The demos don't use multiselect functionality of Select2, but it's just an option of the control (see the documentation).

Upvotes: 2

Related Questions