Unable to select more than two checkboxes on a grid

[jschultz0614Participant]

I am using the following set of code:

		var GenerateUOMCountEachMulticolumnRow = function (i) {
			var newRow = {};
			newRow["UOMCountEachIndex"] = '';
			newRow["UOMCountEachAddItem"] = F;
			newRow["UOMCountEachName"] = '';
			newRow["UOMCountEachAbbreviation"] = '';
			newRow["UOMCountEachConversion"] = '';
			return row;
		}

		var data = new Array();

		var jqxUOMCountEachIndex = [""];
		var jqxUOMCountEachName = [""];
		var jqxUOMCountEachAbbreviation = [""];
		var jqxUOMCountEachConversion = [""];
		var jqxUOMCountEachAddItem = F;

		if(@(Html.Raw(JsonConvert.SerializeObject(ViewBag.UoMRelated_ID))) !== null){
			var jqxUOMCountEachIndex = @(Html.Raw(JsonConvert.SerializeObject(ViewBag.UoMRelated_ID)));
			var jqxUOMCountEachName = @(Html.Raw(JsonConvert.SerializeObject(ViewBag.UoMRelated_Name)));
			var jqxUOMCountEachAbbreviation = @(Html.Raw(JsonConvert.SerializeObject(ViewBag.UoMRelated_Abbreviation)));
			var jqxUOMCountEachConversion = @(Html.Raw(JsonConvert.SerializeObject(ViewBag.UoMRelated_ConversionOfBaseUnits)));
			var jqxUOMCountEachBaseUnitID = @(Html.Raw(JsonConvert.SerializeObject(ViewBag.UoMRelated_UnitOfMeasureBaseUnitID)));
		};

		for (var i = 0; i < jqxUOMCountEachIndex.length; i++) {
			var row = {};
			row["UOMCountEachIndex"] = jqxUOMCountEachIndex[i];
			row["UOMCountEachAddItem"] = jqxUOMCountEachAddItem[i]
			row["UOMCountEachName"] = jqxUOMCountEachName[i];
			row["UOMCountEachAbbreviation"] = jqxUOMCountEachAbbreviation[i];
			row["UOMCountEachConversion"] = jqxUOMCountEachConversion[i];
			data[i] = row;
		}
		var source = {
			localdata: data,
			datatype: "array",
			datafields:
				[{
					name: 'UOMCountEachIndex',
					type: 'string'
				}, {
					name: 'UOMCountEachAddItem',
					type: 'bool'
				}, {
					name: 'UOMCountEachName',
					type: 'string'
				}, {
					name: 'UOMCountEachAbbreviation',
					type: 'string'
				}, {
					name: 'UOMCountEachConversion',
					type: 'number'
				}],
			addrow: function (rowid, rowdata, position, commit) {
				commit(T);
			},
			updaterow: function (rowid, newdata, commit) {
				commit(T);
			}
		};

		var dataAdapter = new $.jqx.dataAdapter(source);

		$("#jqxUOMCountEachDropdownGrid").jqxGrid({
			width: 500,
			height: 200,
			source: dataAdapter,
			editable: T,
			selectionmode: 'singlecell',
			theme: 'energyblue',
			showtoolbar: T,
			rendertoolbar: function (toolbar) {
				var me = this;
				var container = $("<div style='margin: 5px;'></div>");
				toolbar.append(container);
				container.append('<input id="addrowbutton" type="button" value="Add New Row" />');
				container.append('<input style="margin-left: 5px;" id="addmultiplerowsbutton" type="button" value="Add Multiple New Rows" />');
				$("#addrowbutton").jqxButton();
				$("#addmultiplerowsbutton").jqxButton();

				// create new row.
				$("#addrowbutton").on('click', function () {
					$("#jqxUOMCountEachDropdownGrid").jqxGrid('beginupdate');
					var datarow = GenerateUOMCountEachMulticolumnRow();
					var commit = $("#jqxUOMCountEachDropdownGrid").jqxGrid('addrow', null, datarow);
					$("#jqxUOMCountEachDropdownGrid").jqxGrid('endupdate');
				});

				// create new rows.
				$("#addmultiplerowsbutton").on('click', function () {
					$("#jqxUOMCountEachDropdownGrid").jqxGrid('beginupdate');
					for (var i = 0; i < 10; i++) {
						var datarow = GenerateUOMCountEachMulticolumnRow();
						var commit = $("#jqxUOMCountEachDropdownGrid").jqxGrid('addrow', null, datarow);
					}
					$("#jqxUOMCountEachDropdownGrid").jqxGrid('endupdate');
				});
			},
			columns: [{
					text: '',
					editable: F,
					datafield: 'UOMCountEachIndex',
					width: 0
				}, {
					text: 'Add',
					editable: T,
					datafield: 'UOMCountEachAddItem',
					columntype: 'checkbox',
					width: 40
				}, {
					text: 'Name',
					editable: T,
					datafield: 'UOMCountEachName',
					columntype: 'textbox',
					width: 200
				}, {
					text: 'Abbreviation',
					editable: T,
					datafield: 'UOMCountEachAbbreviation',
					columntype: 'textbox',
					width: 100
				}, {
					text: '# of EA',
					editable: T,
					datafield: 'UOMCountEachConversion',
					columntype: 'textbox',
					width: 100
			}]
		});

		// select or unselect rows when the checkbox is checked or unchecked.
		$("#jqxUOMCountEachDropdownGrid").bind('cellendedit', function (event) {
			if (event.args.value) {
				$("#jqxUOMCountEachDropdownGrid").jqxGrid('selectrow', event.args.rowindex);
			}
			else {
				$("#jqxUOMCountEachDropdownGrid").jqxGrid('unselectrow', event.args.rowindex);
			}
		});

When I click on the add row or add rows buttons, I definitely get the desired effect, however, the last row of data is replicated n number of times and the checkboxes in the grid for those new rows are only selectable one at a time.

What am I missing?

[ivailoParticipant]

Hi jschultz0614,

If you want to add an empty row – try this $("#jqxUOMCountEachDropdownGrid").jqxGrid('addrow', null, {});.

Best Regards,
Ivailo Ivanov

jQWidgets Team
http://www.jqwidgets.com

[Author]

Posts