3

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?

Improve this question
1
  • hi, have you tried my code yet? Commented Jul 2, 2011 at 17:44

4 Answers 4

Reset to default
5

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 ;]

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

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.

Improve this answer

2 Comments

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?
@Ricky: You should include multiselect:true on the same place of the jqGrid definition where you use all other jqGrid options like datatype, rowNum and so on. You can find here 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?
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')); }); });
Improve this answer

Comments

-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 }
Improve this answer

2 Comments

What do you mean by you have to find out the current row here where do i need to use current row?
@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('<tr>').css(), something like this) and apply css to that row...sorry to not answer at your context. :(