Checkbox State Change Issue on Scroll of Grid

[jkapasiParticipant]

Hello,

I am having a Grid initialized as follows:

          var source = {
		datatype: "json",
		datafields: [
			{"name": "Role1"},
			{"name": "Role2"},
			{"name": "Role3"},
			{"name": "Role4"},
			{"name": "Role5"}
		],
		url: "ServerUrl",
		filter: function ()
		{
			$("#jqxgrid").jqxGrid('clearselection');
			$("#jqxgrid").jqxGrid('updatebounddata');
		},
		sort: function (datafield, sortdirectior)
		{
			$("#jqxgrid").jqxGrid('clearselection');
			$('#jqxgrid').jqxGrid('gotopage', 0);
			$("##jqxgrid").jqxGrid('updatebounddata');
		},
		root: 'Rows',
		beforeprocessing: function (data)
		{
			source.totalrecords = data[0].TotalRows;
		}
	};

	var dataadapter = new $.jqx.dataAdapter(source, {
		loadError: function (xhr, status, error)
		{
			alert(error);
		}
	});

	$("#jqxgrid").jqxGrid({
		source: dataadapter,
		altrows: true,
		width: "100%",
		enablebrowserselection: true,
		columnsresize: true,
		rendergridrows: function ()
		{
			return dataadapter.records;
		},
		columns: [
			{"pinned": true, "hidden": false, "text": "Admin Role 1", "datafield": "Role1", "width": 150},
			{"pinned": false, "hidden": false, "text": "Admin Role 2", "datafield": "Role2", "width": 24},
			{"pinned": false, "hidden": false, "text": "Admin Role 3", "datafield": "Role3", "width": 152},
			{"pinned": false, "hidden": false, "text": "Admin Role 4", "datafield": "Role4", "width": 40},
			{"pinned": false, "hidden": false, "text": "Admin Role 5", "datafield": "Role5", "width": 96}
		]
	});

In the data, I create an html checkbox element for each datafield as follows:

[{“Role1″:”<input class=’checkboxRole’ align=’center’ type=’checkbox’ name=’checkRoles’ title=’chkboxTitle1′ value=’Value1′ checked >”},
{“Role2″:”<input class=’checkboxRole’ align=’center’ type=’checkbox’ name=’checkRoles’ title=’chkboxTitle2′ value=’Value2′ >”},
{“Role3″:”<input class=’checkboxRole’ align=’center’ type=’checkbox’ name=’checkRoles’ title=’chkboxTitle3′ value=’Value3′ checked >”},
{“Role4″:”<input class=’checkboxRole’ align=’center’ type=’checkbox’ name=’checkRoles’ title=’chkboxTitle4′ value=’Value4′ >”},
{“Role5″:”<input class=’checkboxRole’ align=’center’ type=’checkbox’ name=’checkRoles’ title=’chkboxTitle5′ value=’Value5′ checked >”}]

The grid is displayed properly with the checkboxes and allows me to edit the checkboxes.

The problem I am facing is: After I check a checkbox and scroll down the grid to see other data, the checkbox which I checked changes back to unchecked state.

Please help me to solve the problem.

Thank You.

Regards
Jash Kapasi

[VapegnastParticipant]

Did you try to uncheck the first one , scroll down the grid and see if the checkbox will change back to checked state? I’m a beginner but when I see

columns: [
			{"pinned": true, "hidden": false, "text": "Admin Role 1", "datafield": "Role1", "width": 150},
			{"pinned": false, "hidden": false, "text": "Admin Role 2", "datafield": "Role2", "width": 24},
			{"pinned": false, "hidden": false, "text": "Admin Role 3", "datafield": "Role3", "width": 152},
			{"pinned": false, "hidden": false, "text": "Admin Role 4", "datafield": "Role4", "width": 40},
			{"pinned": false, "hidden": false, "text": "Admin Role 5", "datafield": "Role5", "width": 96}
		]

I think that they will change back to unchecked statut, you can try to remove “true” and “false”

[Peter StoevKeymaster]

Hi Jash,

You are trying to do something which we do not support in that way. I would suggest you to take a look at the Grid’s cells rendering demos, the checkbox column demo, the Grid widget column demo, too. These will give you a start point about that widget.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

[Author]

Posts