jQuery UI Widgets Forums Angular Deletion of newly added row in jqxgrid

This topic contains 7 replies, has 4 voices, and was last updated by  BlackThunder 1 month ago.

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author

  • shakti_singh
    Participant

    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

    Deletion of newly added row in jqxgrid #99506

    Stanislav
    Participant

    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_singh
    Participant

    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.


    Stanislav
    Participant

    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_singh
    Participant

    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.


    Stanislav
    Participant

    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/

    Deletion of newly added row in jqxgrid #107559

    lucoe
    Participant

    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.

    • This reply was modified 1 month, 1 week ago by  lucoe.
    Deletion of newly added row in jqxgrid #107594

    BlackThunder
    Participant

    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

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.