Row selection getting disabled on virtual scrolling with custom checkbox column

[nikhil22Participant]

Hi,
I have a requirement where checkbox column needs to be in the middle column.So for its implementation I followed the code snippet given in the link .It is working fine except when,

1)On virtual scrolling the previously selected rows are being unselected. The unselection happens only when any of the newly loaded row is selected,otherwise if none of the new row is selected then previous selection works.

2)On virtual scrolling even if the rows are selected the checkbox mark goes off as shown in the image .

I am using the same code that is present in the link above except that i am using virtual scroll and pagination is disabled.The row data is fetched from database.Can you please help me in solving the problem.

[nikhil22Participant]

The link that i am referring to include custom check box is .When i try to edit my previous post using edit link ,it is not getting edited,it is redirecting to home page :).

[nikhil22Participant]

Again,it seems i am not able to post links and here is the link i am referring to

http://www.jqwidgets.com/community/topic/to-have-jqxgrid-checkbox-column-in-the-column-other-than-the-first-column/

[Peter StoevKeymaster]

Hi nikhil22,

If you need to display a checkbox column, you should bind it to a datafield which is from your datasource and that datafield should have “type” set to “boolean” i.e follow the approach from our examples with checkbox column

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[nikhil22Participant]

Hi Peter,

Thanks for the reply.
Do you mean to say that in my database table i need to have another field of the type boolean. By mapping to that field,then only i can use the checkbox column(Irrespective of if i have default column with selectionmode: ‘checkbox’ or customised one to have it as one of the middle column)

[Peter StoevKeymaster]

Hi nikhil22,

If you have selectionmode: “checkbox”, that column will and cannot be displayed where you wish. It’s always displayed on the left side. If you want to display some custom column with checkboxes somewhere else, you should Bind it.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[nikhil22Participant]

Hi Peter,

I tried using selectionmode:’checkbox’ by removing all custom checkbox features.So,as per your previous comments this should work fine without corresponding boolean field being mapped to database table.

Following are my observations

1)Unlike the previous case the check marks are intact even after virtual scrolling.

2)I have a drop down option to clear checked rows.Now the selected rows are not getting unselected on selecting the drop down option.In my previous case it was getting unselected.

3)Similar to the case when custom checkbox was used, on virtual scrolling , the selected row data of rows selected previous to virtual scrolling are coming as null.I am fetching the row data in my java code using ajax on selecting “Assignment” drop down option.

Below is my code snippet

`
var ServerString=”http://cvg-000216b-006:9090/”;

var source = {};
var dataAdapter = “”;
var editrow=-1;
var dropdownItem=””;
var columnCheckBox = null;
var updatingCheckState = false;

$(document).ready(function () {

source =
{
datatype: “json”,
datafields: [
{ name: ‘RowId’ },
{ name: ‘LPID’ },
{ name: ‘InsuredName’ },
{ name: ‘LPSR_Coverage’ },
{ name: ‘LPC’ },
{ name: ‘LPC_Original’ },
{ name: ‘Requestor_FName’ },
{ name: ‘Requestor_LName’ }

],
id: ‘LPID’,
filter: function () {

$(“#jqxgrid”).jqxGrid(‘updatebounddata’,’filter’);
},
sort: function () {
$(“#jqxgrid”).jqxGrid(‘updatebounddata’, ‘sort’);
},
url: ServerString+”lpsr/WorkSpaceController”,

updaterow: function (rowid, rowdata, commit) {

commit(true);
},

cache: false,

};
dataAdapter = new $.jqx.dataAdapter(source, {
downloadComplete: function (data, status, xhr) { },
loadComplete: function (data) { },
loadError: function (xhr, status, error) { }
});

var dropdownsource=[
“Assignments”,
“Clear Checkboxes”,

];
$(“#jqxDropDownList”).jqxDropDownList({
source: dropdownsource
});

ShowResults();

$(‘#jqxDropDownList’).bind(‘select’, function (event) {

var args = event.args;
var item = $(‘#jqxDropDownList’).jqxDropDownList(‘getItem’, args.index);
dropdownItem=item.label;
var rowIndexes = $(‘#jqxgrid’).jqxGrid(‘getselectedrowindexes’);
var rowData= $(“#jqxgrid”).jqxGrid(‘selectedrowindexes’);
var rowIds = [];
var lpc=[];
var lpcOriginal=[];
var coverageCodes=[];
var reqFName=[];
var reLName=[];

for (var i = 0; i < rowIndexes.length; i++) {
var currentId = $(‘#jqxgrid’).jqxGrid(‘getrowid’, rowIndexes[i]);
var currentLpc=$(‘#jqxgrid’).jqxGrid(‘getcellvalue’,rowData[i],”LPC”);
var currentLpcOrg=$(‘#jqxgrid’).jqxGrid(‘getcellvalue’,rowData[i],”LPC_Original”);
var currCoverageCode=$(‘#jqxgrid’).jqxGrid(‘getcellvalue’,rowData[i],”LPSR_Coverage”);
var currReqFName=$(‘#jqxgrid’).jqxGrid(‘getcellvalue’,rowData[i],”Requestor_FName”);
var currReqLName=$(‘#jqxgrid’).jqxGrid(‘getcellvalue’,rowData[i],”Requestor_LName”);
rowIds.push(currentId);
lpc.push(currentLpc);
lpcOriginal.push(currentLpcOrg);
coverageCodes.push(currCoverageCode);
reqFName.push(currReqFName);
reLName.push(currReqLName);

};

if(dropdownItem==’Assignments’)

{
$.ajax({
type: “GET”,

data: JSON.stringify({lpIds:rowIds,
lpcs:lpc,lpcOrig:lpcOriginal,covCodes:coverageCodes,
reqFName:reqFName,reqLName:reLName}),
url: ServerString+”lpsr/MailController”,

success: function(data)
{
alert(“Mail sent successfully”);
$(“#jqxDropDownList”).jqxDropDownList(‘clearSelection’, true);
$(“.jqx-checkbox”).jqxCheckBox({ checked: false });

},
error:function(data)
{
alert(“There was an error in sending mail or all the mails are not sent”);
$(“#jqxDropDownList”).jqxDropDownList(‘clearSelection’, true);
$(“.jqx-checkbox”).jqxCheckBox({ checked: false });

}
});

}

}

else
if(dropdownItem==”Clear Checkboxes”)
{

$(“.jqx-checkbox”).jqxCheckBox({ checked: false });
$(“#jqxDropDownList”).jqxDropDownList(‘clearSelection’, true);
alert(“Checkboxes are cleared”);

}

});

});

function ShowResults(){

$(“#jqxgrid”).jqxGrid(
{
width: ‘50%’,
height: ‘100%’,
source: dataAdapter,
columnsresize: true,
showfilterrow: true,
filterable: true,
autoshowfiltericon: true,
sortable: true,
editable: true,
altrows: true,
theme: ‘classic’,
editmode: ‘selectedcell’,
selectionmode: ‘checkbox’,
keyboardnavigation: true,
showemptyrow: false,
virtualmode: true,
columnsreorder: true,
rendergridrows: function () {
return dataAdapter.records;
},
columns: [
{ text: ‘RowId’, datafield: ‘RowId’, width: 150, editable: false,hidden:true },
{ text: ‘Insured Name’, datafield: ‘InsuredName’, width: 250, columntype: ‘textbox’,editable: true, sortable:true },
{ text: ‘Coverage’, datafield: ‘LPSR_Coverage’, width: 110, columntype: ‘textbox’,editable: true, sortable:true },
{ text: ‘LPC’, datafield: ‘LPC’, width: 45, columntype: ‘textbox’,editable: true, sortable:true },
{ text: ‘LPC Original’, datafield: ‘LPC_Original’, width: 50, editable: true, sortable:true},
{ text: ‘Req F Name’, datafield: ‘Requestor_FName’, width: 170, editable: true, sortable:true },
{ text: ‘Requestor_LName’, datafield: ‘Requestor_LName’, width: 110, columntype: ‘textbox’,editable: true, sortable:true }

]
});
}

[Author]

Posts