How to select jqGrid row on checkbox click?

Question

Below is my code for jqGrid, i'd like to select row or highlight the current row, when i check a particular checkbox inside jqgrid row. right now onSelectRow I am making the checkbox get checked.

var xmlDoc = $.parseXML(xml); 
         $('#configDiv').empty();
            $('<div width="100%">')
            .attr('id','configDetailsGrid')
            .html('<table id="list1" width="100%"></table>'+
                    '<div id="gridpager"></div>'+
                '</div>')       
            .appendTo('#configDiv');    

            var grid = jQuery("#list1");

            grid.jqGrid({

              datastr : xml,
              datatype: 'xmlstring',
              colNames:['cfgId','','Name', 'Host', 'Description','Product', 'Type', 'Last Updated Time','Last Updated By',''],
              colModel:[
                  {name:'cfgId',index:'cfgId', width:90, align:"right", hidden:true},
                  {name:'',index:'', width:15, align:"right",edittype:'checkbox',formatter: "checkbox",editoptions: { value:"True:False"},editable:true,formatoptions: {disabled : false}},
                  {name:'cfgName',index:'cfgName', width:90, align:"right"},
                  {name:'hostname',index:'hostname', width:90, align:"right"},
                  {name:'cfgDesc',index:'cfgDesc', width:90, align:"right"},
                  {name:'productId',index:'productId', width:60, align:"right"},
                  {name:'cfgType',index:'cfgType', width:60, align:"right"},
                  {name:'updateDate',index:'updateDate',sorttype:'Date', width:120, align:"right"},
                  {name:'emailAddress',index:'emailAddress', width:120, align:"right"},
                  {name:'absolutePath',index:'absolutePath', width:90, align:"right", hidden:true},
              ],
              pager : '#gridpager',
              rowNum:10,
              scrollOffset:0,
              height: 'auto',

              autowidth:true,
              viewrecords: true,
              gridview: true,
              xmlReader: {
                  root : "list",
                  row: "com\\.abc\\.db\\.ConfigInfo",
                  userdata: "userdata",
                  repeatitems: false
              },
              onSelectRow: function(id,status){
                  var rowData = jQuery(this).getRowData(id); 
                  configid = rowData['cfgId'];
                  configname=rowData['cfgName'];
                  configdesc=rowData['cfgDesc'];
                  configenv=rowData['cfgType'];

                  if(status==true)
                  {

                  }

                  rowChecked=1;
                  currentrow=id;
                  },
              onCellSelect: function(rowid, index, contents, event) {
                  if(index==2)
                  {

                        $(xmlDoc).find('list com\\.abc\\.db\\.ConfigInfo').each(function()
                        {
                            //alert($(this).find('cfgId').text()+" "+configid);
                            if($(this).find('cfgId').text()==configid)  
                            {
                                configname=$(this).find('cfgName').text(); 
                                configdesc=$(this).find('cfgDesc').text();
                                configenv=$(this).find('cfgType').text();
                                filename=$(this).find('fileName').text();
                                updatedate=$(this).find('updateDate').text();
                                absolutepath=$(this).find('absolutePath').text();
                                productname=productMap[$(this).find('productId').text()];
                            }
                        });

                  }
               }

            });
            grid.jqGrid('navGrid','#gridpager',{edit:false,add:false,del:false});

So how would I select current row on checkbox selected?

hi, have you tried my code yet? – WooDzu Jul 02 '11 at 17:44 — WooDzu, Jul 02 '11 at 17:44

WooDzu · Accepted Answer · 2011-06-27T07:31:35.040

Put this at the and of your JS code in order to run selection when clicking a checkbox

$("#list1").find('input[type=checkbox]').each(function() {
    $(this).change( function(){
        var colid = $(this).parents('tr:last').attr('id');
        if( $(this).is(':checked')) {
           $("#list1").jqGrid('setSelection', colid );
           $(this).prop('checked',true);
        }
        return true;
    });
});

example UPDATED AGAIN: http://jsfiddle.net/vCWNP/

edit: this also should be done every time a new row is added. let me know if something else is to be fixed ;]

score 4 · Answer 2 · answered Jun 24 '11 at 13:00

4

It seems to me, that you could solve your problem very easy. What you try to do is already implemented in the jqGrid. If you remove the column name:'',index:'' which has empty name, which is NOT PERMITTED and include an additional jqGrid parameter multiselect:true all will work like you as need.

answered Jun 24 '11 at 13:00

Oleg

220,925
34
403
798

Where should i add `multiselect:true`? Also I have CRUD, so when i click update button and there is more than 1 checkbox selected, it should prompt user, ie., it should not go for update, how can i achieve this in this case? – Jun 30 '11 at 04:34
@Ricky: You should include `multiselect:true` on the same place of the jqGrid definition where you use all other [jqGrid options](http://www.trirand.com/jqgridwiki/doku.php?id=wiki:options) like `datatype`, `rowNum` and so on. You can find [here](http://stackoverflow.com/questions/3717969/jqgrid-multiselect-behavior-when-pressing-special-key/3719637#3719637) some demos how multiselect can be used. About your second question with update button I am not sure that I correct understand what you mean. Probably you can explain what you need more detailed? Which editing mode you plan to use? – Oleg Jun 30 '11 at 12:26

score 1 · Answer 3 · edited Nov 14 '12 at 21:54

1

One simple way to do that:

jQuery(".jqgrow td input").each(function () {
    jQuery(this).click(function () {
        $("#grid").jqGrid('setSelection', $(this).parents('tr').attr('id'));
    });
});

edited Nov 14 '12 at 21:54

bfavaretto

71,580
16
111
150

answered Jul 15 '11 at 10:31

Timeternity

297
3
10

score -1 · Answer 4 · answered Jun 24 '11 at 11:01

-1

on your onSelectRow function add:

var flag = jQuery(this).find('#'+id+' input[type=checkbox]').prop('checked');
if(flag){
      jQuery(this).css('background-color', 'red' )// row will be in red if checkbox is selected, you have to find out the current row here
}

answered Jun 24 '11 at 11:01

Vivek

10,978
14
48
66

What do you mean by `you have to find out the current row here ` where do i need to use current row? – Jun 24 '11 at 11:08
@Ricky: i am not familar with jqgrid, but the code which i have written will give you checked checkbox in every row(i suppose), now it's you, who have to find row(this.closet('').css(), something like this) and apply css to that row...sorry to not answer at your context. :( – Vivek Jun 24 '11 at 12:00

How to select jqGrid row on checkbox click?

4 Answers4

Linked