1

I am still trying to find out if I can have a cell in a jqGrid, and when I pull up the edit form for that row, I need a GUI that can display that column as a multiselect list.

This could either be:

  1. List of checkboxes
  2. Select List with checkboxes so you can select more than one.

Is this possible in jqGrid?

Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
leora
  • 188,729
  • 360
  • 878
  • 1,366

1 Answers1

3

jqGrid supports multiselect editing. It uses no ceckboxes for selection, but multiselect select element. I made the demo using inline editing on double-click. enter image description here

Here is the corresponding code:

jQuery(document).ready(function() {
    var lastSel, mydata = [
        {id:0, Name:"Lukas Podolski",     Category:"1", Subcategory:"1"},
        {id:1, Name:"Michael Schumacher", Category:"1", Subcategory:"2"},
        {id:2, Name:"Albert Einstein",    Category:"2", Subcategory:"3,4"},
        {id:3, Name:"Blaise Pascal",      Category:"2", Subcategory:"4"}
    ], grid = jQuery("#list");
    grid.jqGrid({
        data: mydata,
        datatype: 'local',
        colModel: [
            { name: 'Name', index: 'Name', width: 130, editable: true },
            {
                name: 'Category', index: 'Category', width: 100,
                formatter:'select', editable: true, edittype:'select',
                editoptions: {
                    value: '1:sport;2:science',
                    multiple: true,
                    size: 2
                }
            },
            {
                name: 'Subcategory', index: 'Subcategory', width: 250,
                formatter:'select', editable:true, edittype:'select',
                editoptions: {
                    value: '1:football;2:formula 1;3:physics;4:mathematics',
                    multiple: true,
                    size: 4
                }
            }
        ],
        sortname: 'Name',
        viewrecords: true,
        rownumbers: true,
        sortorder: 'desc',
        pager: '#pager',
        height: '100%',
        editurl: 'clientArray',
        ondblClickRow: function(rowid) {
            jQuery(this).jqGrid('editRow', rowid, true, null, null, 'clientArray');
        },
        onSelectRow: function(id){
            if (id && id!==lastSel){
                jQuery(this).restoreRow(lastSel);
                lastSel=id;
            }
        },
        caption: 'Selects with multiselect'
    });
});

By the way during creating the demo I find out, that one can't use select elements having "0" as the id, which are not full supported. For example, '1:sport;2:science' works, but not '0:sport;1:science'. In the case the selection of the 'sport' item will not saved.

If you need to use more comfortable controles with checkboxes you have to implement the behavior with respect of custom editing.

Oleg
  • 220,925
  • 34
  • 403
  • 798
  • @Oleg - thanks for this. My issues is that my list is pretty long (about 100 items) so the above solution is a hard UI to track compared to displaying a list of checkboxes in a table for example. – leora Feb 13 '11 at 17:45
  • @ooo: The `size` property can be helpfull. It say how many items from the select will be shown. The rest will be seen with respect of scrolling. On the other side if you want display multiselect box with 100 items it will be not so comfortable for the user. In the case one additional jqGrid table with multiselect feature enabled seems me more suitable as any kind of multiselect checkbox. One more idea: you can consider the scenario where autocomplete jQuery UI control will be used. – Oleg Feb 13 '11 at 18:07
  • @ooo: Of course you can use multiselect select element which I described in **all kind** of editing, for example form editing. – Oleg Feb 13 '11 at 19:20
  • @Oleg - can you clarify what you mean by "one more jqgrid table" are you saying you can have a jqgrid table as a custom edit of a field value ?? – leora Feb 13 '11 at 21:04
  • @ooo: Custom editing is one of the possible ways (see the last sentence of my answer. In general you can popup jQuery UI dialog to choose the options which you need. It can be jQuery UI dialog having jqGrid inside. It can have jQuery UI Autocomplete control or it can be Multiselect plugin used for example for the column chooser (see http://www.trirand.com/jqgridwiki/doku.php?id=wiki:jquery_ui_methods#column_chooser). In all described solution ways I speak **not about jqGrid feature** like in case of demo from my answer. You have to write JavaScript code which can be not very small. – Oleg Feb 13 '11 at 21:18
  • @Oleg - i tried to copy this solution that is in this question: http://stackoverflow.com/questions/2825000/jqgrid-multi-checkbox-custom-edittype-solution . .which seems to work ok . . the one issue is the the list: Check1, Check2 . . is all locally hard coded . .is there anyway to get that list of data from the server? – leora Feb 13 '11 at 21:33
  • @ooo: You don't need the `list:` during the grid initialization. So You can make an ajax call to the server after the grid initialization and use `setColProp` (see http://www.trirand.com/jqgridwiki/doku.php?id=wiki:methods) inside of `success` handle. In the way you can set `editoptions:{list:dataFromTheServer}`. – Oleg Feb 13 '11 at 21:50
  • @Oleg - thanks for your response. i agree that i don't need this list during initialization. Where would i put that setColProp line and how would that look to get if from an ajax call ?? – leora Feb 13 '11 at 21:56
  • @ooo: The code example is too long for the comment. I found your new question and posted the answer http://stackoverflow.com/questions/4987123/in-jqgrid-is-there-anyway-to-use-ajax-to-get-data-for-your-custom-element/4987250#4987250 – Oleg Feb 13 '11 at 22:13