[Solved] move data rows between two grids

[ben]

Hi,

My question is, how can I programatically add or remove grid rows client side using jquery or javascript?

I'm using a grid to display a list of objects (PlantItemTypesDto) that have a collection of other objects (ServiceTypesDto) as one of it's properties:

{
    [KnownType(typeof(PlantItemTypeDto))]
   // [TypeConverter(typeof(PlantItemTypeDtoConverter))]
    public class PlantItemTypeDto
    {
        private int _Id;
        public int Id
        {
            get { return _Id; }
            set { _Id = value; }
        }

        private string _Name;
        public string Name
        {
            get { return _Name; }
            set { _Name = value; }
        }

        private string _Description;
        public string Description
        {
            get { return _Description; }
            set { _Description = value; }
        }

        private ServiceCycleDto _ServiceCycle;

        [UIHint("ServiceCycleDto")]
        public ServiceCycleDto ServiceCycle
        {
            get { return _ServiceCycle; }
            set { _ServiceCycle = value; }
        }

        private IList<ServiceTypeDto> _ServiceTypes;
        [UIHint("ServiceTypesDtoGrid")]
        public IList<ServiceTypeDto> ServiceTypes
        {
            get { return _ServiceTypes; }
            set { _ServiceTypes = value; }
        }

I've written an edit template and am using two grids to display
1: the servicetypes currently associated with the PlantItemType and 
2: another grid that displays all the servicetypes currently not associated with the plantitemtype.

The idea is users can add or remove plantitem types using left or right arrows to move the servicetypes between the grid.