Deletion of newly added row in jqxgrid

[shakti_singhParticipant]

Hi Team,

In jqxGrid using angular,when i am adding new row then it’s row id is showing as 0. But on deleting row having id 0(new row), the newly added row is not getting deleted. It is deleting the next row having id 1.What i am looking for is to be able to delete newly added row.

Thanks

[StanislavParticipant]

Hello shakti_singh,

To delete a row you need to select it.
When you select the row, you get its id and delete the row by that.
If you don’t have anything selected, nothing is going to be deleted, unless you have some custom logic.

Can you please provide us with an example of this case?

Best Regards,
Stanislav

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

[shakti_singhParticipant]

Hi,
On deleting the newly added row, the row having id 1 is getting deleted, that is the second row. I want to delete the first row which is added.
I would need some help regarding this.

Thanks.

[StanislavParticipant]

Hello shakti_singh,

You have to use this method:

this.myGrid.deleterow( id );

When you pass the ID of a row to the delete method, the row will be deleted.
If you want to delete the row you added, you need to take its ID and pass it to this method.

Here is an example:
app.component.html

<jqxGrid #myGrid [width]="850" [height]="350" [source]="dataAdapter" 
		 [columns]="columns" [pageable]="true" [editable]="true">
</jqxGrid>

<jqxButton(onClick)="addRow()">Add Row</jqxButton>
<jqxButton(onClick)="deleteRow()">Delete Row</jqxButton>

app.component.ts

export class AppComponent {
	@ViewChild('myGrid') myGrid: jqxGridComponent;

	source: any =
	{
		datatype: 'xml',
		datafields: [
			{ name: 'ProductName', type: 'string' },
			{ name: 'QuantityPerUnit', type: 'int' },
			{ name: 'UnitPrice', type: 'float' },
			{ name: 'UnitsInStock', type: 'float' },
			{ name: 'Discontinued', type: 'bool' }
		],
		root: 'Products',
		record: 'Product',
		id: 'ProductID',
		url: '../assets/sampledata/products.xml'
	};

	dataAdapter: any = new jqx.dataAdapter(this.source);

	columns: any[] =
	[
		{ text: 'Product Name', columngroup: 'ProductDetails', datafield: 'ProductName', width: 250 },
		{ text: 'Quantity per Unit', columngroup: 'ProductDetails', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right' },
		{ text: 'Unit Price', columngroup: 'ProductDetails', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2' }
	];

	addRow() {
		this.myGrid.addrow(0, { ProductName: 'New Product' }, 'first');
	}

	deleteRow() {
		let value = this.myGrid.getrows();
		let RowId = value[0].uid;
		this.myGrid.deleterow(RowId);
	}
}

Best Regards,
Stanislav

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

[shakti_singhParticipant]

Hi,

Thanks for the reply.
I checked this, but it is still not working. When i am deleting the new row, it is deleting the second row.

[StanislavParticipant]

Hello shakti_singh,

The app.component.ts is the same as i posted in my previos post.

App.component.ts

export class AppComponent {
	@ViewChild('myGrid') myGrid: jqxGridComponent;

	//Grid source
	source: any =
	{
		datatype: 'xml',
		datafields: [
			{ name: 'ProductName', type: 'string' },
			{ name: 'QuantityPerUnit', type: 'int' },
			{ name: 'UnitPrice', type: 'float' },
			{ name: 'UnitsInStock', type: 'float' },
			{ name: 'Discontinued', type: 'bool' }
		],
		root: 'Products',
		record: 'Product',
		id: 'ProductID',
		url: '../assets/sampledata/products.xml'
	};

	//grid dataAdapter
	dataAdapter: any = new jqx.dataAdapter(this.source);

	//Grid columns
	columns: any[] =
	[
		{ text: 'Product Name', columngroup: 'ProductDetails', datafield: 'ProductName', width: 250 },
		{ text: 'Quantity per Unit', columngroup: 'ProductDetails', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right' },
		{ text: 'Unit Price', columngroup: 'ProductDetails', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2' }
	];

	//OnButtonClick this will add a row in the begining of the grid(as a first row) 
	addRow() {
		this.myGrid.addrow(0, { ProductName: 'New Product' }, 'first');
	}

	//OnButtonClick this will remove(delete) a row
	deleteRow() {
		let GridRowsCollection = this.myGrid.getrows();		//This will return all of the row in the grid.
		let FirstRowId = GridRowsCollection[0].uid;			//When using '[0].uid' the returned value is going to be the ID of the first element of a colection. In this case the first row in the grid.
		this.myGrid.deleterow(FirstRowId);					//This method will delete the row from the grid. For the 'deleterow' method to work, you need to pass the ID of the row you want to delete.
	}
}

You need to make sure that ‘GridRowsCollection[0].uid’ is set to [0], otherwise it will not select the first element of the grid.

If this doesn’t help you, can you please send us an example of how are you deleting the row?

Best Regards,
Stanislav

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

[lucoeParticipant]

Hi, Stanislav.
I was trying to use jqxGrig with [everpresentrowactions]=”‘add update remove reset'” like is showed in demo, but it did not work.
When I changed “remove” by “delete” it worked.
Take a look at this, please, to verify if “remove” is really wrong.

[BlackThunderParticipant]

Hello shakti_singh,

rowid and rowindex of a row differs in some cases. It is better to get row id using rowindex and proceed with delete

e.g.

let rowscount = this.myGrid.getdatainformation().rowscount;
let rowid = this.myGrid.getrowid(rowscount - 1); // assuming row is added to bottom, rowscount - 1 gives rowindex of last row
this.myGrid.deleterow(rowid);

Hope this helps

Regards,
BlackThunder

[Author]

Posts