Does anyone know what the possible ColumnTypes are for the jQWidgets grid are?

[jschultz0614Participant]

I am trying to build an editable jqwidget grid with a checkbox and I can not find in the API documentation what the possible columntypes are.

[ivailoParticipant]

Hi jschultz0614,

You can build an editable jqxGrid with a checkbox column. Please take a look at the following example at: http://jsfiddle.net/jqwidgets/8BE5w/

Here is the info:
columntype – sets the column’s type.
Possible values:
‘number’ – readonly column with numbers.
‘checkbox’ – readonly checkbox when the editing is disabled. Checkbox input when editing is enabled.
threestatecheckbox – determines whether the checkbox has an indeterminate state when the value is null. The default value is false.
‘numberinput’ – sets a number input editor as a default editor for the column. Requires: jqxnumberinput.js
‘dropdownlist’ – sets a dropdownlist editor as a default editor for the column. Requires: jqxlistbox.js and jqxdropdownlist.js
‘combobox’ – sets a combobox editor as a default editor for the column. Requires: jqxlistbox.js and jqxcombobox.js
‘datetimeinput’ – sets a datetimeinput editor as a default editor for the column. Requires: jquery.global.js, jqxcalendar.js and jqxdatetimeinput.js
‘textbox’ – sets a textbox editor as a default editor for the column.
‘template’ – sets a custom editor as a default editor for the column. The editor should be created in the “createeditor” callback. The editor should be synchronized with the cell’s value in the “initeditor” callback. The editor’s value should be retrieved in the “geteditorvalue” callback.
‘custom’ – sets a custom editor as a default editor for a cell. That setting enables you to have multiple editors in a Grid column. The editors should be created in the “createeditor” callback – it is called for each row when the “columntype=custom”. The editors should be synchronized with the cell’s value in the “initeditor” callback. The editor’s value should be retrieved in the “geteditorvalue” callback.

http://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxgrid/jquery-grid-api.htm

Best Regards,
Ivailo Ivanov

jQWidgets Team
http://www.jqwidgets.com

[jschultz0614Participant]

thnak you

[jschultz0614Participant]

@ivailo, Ive got a working grid with checkboxes, however I can only select two checkboxes when there are 10 rows. What am I doing wrong?

function UOMCountEachMulticolumn(){
		// Start Multicolumn for Unit Of Measure for Count -> Each
		// prepare the data

		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.jqxUOMCountEachIndex))) !== null){
			var jqxUOMCountEachIndex = [@(Html.Raw(JsonConvert.SerializeObject(ViewBag.jqxUOMCountEachIndex)))];
			var jqxUOMCountEachName = [@(Html.Raw(JsonConvert.SerializeObject(ViewBag.jqxUOMCountEachName)))];
			var jqxUOMCountEachAbbreviation = [@(Html.Raw(JsonConvert.SerializeObject(ViewBag.jqxUOMCountEachAbbreviation)))];
			var jqxUOMCountEachConversion = [@(Html.Raw(JsonConvert.SerializeObject(ViewBag.jqxUOMCountEachConversion)))];
		};

		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: "local",
			datafields:
				[
					{ name: 'UOMCountEachIndex', type: 'string' },
					{ name: 'UOMCountEachAddItem', type: 'string' },
					{ 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: 'row',
			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', 
					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 
				}
			]
		});

		$("#jqxUOMCountEachDropdownGrid").bind('cellendedit', function (event) {
			if (event.args.value){
				$("#jqxUOMCountEachDropdownGrid").jqxGrid('selectrow', event.args.rowindex);
			} else {
				$("#jqxUOMCountEachDropdownGrid").jqxGrid('unselectrow', event.args.rowindex);
			}
		});

		// 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);
			}
		});
		//End Multicolumn for Sales Accounts
	}

[ivailoParticipant]

Hi jschultz0614,

You are duplicated your post. Look here about the answer.

Best Regards,
Ivailo Ivanov

jQWidgets Team
http://www.jqwidgets.com

[Derek BroughtonParticipant]

FYI: I don’t see any of that information in http://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxgrid/jquery-grid-api.htm

[Derek BroughtonParticipant]

Actually, I do see that info if I browse the source code of the page, but I can’t imagine what link I’d have to click on to make it visible!

Also, FYI, it says (even in the recently downloaded api examples) that the datetimeinput column-type requires jquery.global.js (a long-dead project!), while the examples for the jqxDateTimeInput show it using globalize.js

[Peter StoevKeymaster]

jquery.global.js is the previous name of globalize.js and so the widget works with both. These are columns properties and in the Javascript you add column properties and we think it’s OK to assume that you should expand the columns property in the Grid API to see the columns sub properties.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[Derek BroughtonParticipant]

Peter, you may think it’s OK, but those of us who are new to the product don’t have a clue where these things are. Your API documentation is practically opaque! And I’m not the first to think so. It’s especially difficult since I’m working with the .Net Core Tag Helper, which doesn’t even make it entirely clear that <jqx-grid-column> translates to the columns property in the API, nor how to hyphenate tag attributes to map to the correct API properties.

Regardless, the documentation should NOT be pointing to jquery.global.js, since it’s not in your package, and it’s not easily available on the net, while globalize is not only easy to find… you’ve included it!

[adminKeymaster]

Hi Derek Broughton,

Yes, things can always be improved.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[Author]

Posts