ListGrid radiobutton - is this the correct way?

[vina]

Hi, I have spent some time trying to figure this out (also searched the forums). I have a need to have a column behaving as radiobuttons in a listgrid. Note that this is a client only grid, with the rows supplied in the data property.

I know the recommended approach is to use the selectionAppearance as 'checkbox', but this forces the button that behaves as a radio in the leftmost column of the grid. I needed it in a normal column, showing more to the right.

In the end, I was able to achieve the behavior using the code below for that field:

{
	name: 'Autoincrement',
	title: 'Autoincrement',
	type: 'boolean',
	editorEnter: function (record, value, rowNum, colNum, grid) {
		if ((grid.getFieldName(colNum) == 'Autoincrement') && value)
		{
			grid.cancelEditing();
			for (i = 0; i < grid.data.getLength(); i++)
				if ((i != rowNum) && (typeof grid.data[i].Autoincrement != 'undefined'))
				{
					grid.data[i].Autoincrement = undefined;
					grid.refreshCell(i, colNum);
				}

			grid.data[rowNum].Autoincrement = true;
		}
	}
},

Seeking confirmation that this is indeed a correct way of addressing the problem and there's no other, built in, or more elegant way. It wouldn't be the first time I spent time trying to achieve something that was already built in.

Thanks,
Sorin

[Isomorphic]

You can make this a bit shorter using canToggle:true, but it's true that radio behavior is not built in, so you would need to search other rows and change them, as you're doing.

[vina]

I tried to use canToggle, but it doesn't seem to work as expected when combined with editEvent: "click". Meaning that it will move the field into editing and set the new value only after exiting the field.

[Isomorphic]

The value changes immediately, but it is after the recordClick event if that's what you tried to use. The most convenient API to use is probably Changed on the field.