I'm using the templating feature in order to put a button in each row of my grid. I need this do a bunch of business logic and then remove the row. I'm removing the row by doing this: button.parent().parent().remove(); This works wonderfully. However, when I remove the rows from the grid this way, the grid gets confused because it thinks the rows are still there and thus does not update the row count on the bottom left corner of the grid (1 - X of X records).
As you can see from the example below, there are clearly only 6 row but the count still shows there are 8.
Is there any way to tell the grid to recalculate without having to completely reload it?
What is the best way to handle this issue?
Hello William ,
I recommend you using the deleteRow method
http://help.infragistics.com/jQuery/2012.2/ui.iggridupdating_hg#methods
You can use the onClick event and invoke it by passing the rowId as parameter.
.....
{ key: "Color", headerText: "Color", dataType: "string", width: "150px",
template: "<input type='button' value='Delete row' data-id='${ProductID}' onClick ='deleteRow(${ProductID});' />" }
function deleteRow(rowID) {
$("#grid1").igGridUpdating("deleteRow", rowID);
$("#grid1").igGrid("commit");
}
I invoke commit because of issue 125209
http://ko.infragistics.com/community/forums/t/74779.aspx
You may use unbound column in order to render a button in the grid.
Sample
http://ko.infragistics.com/products/jquery/sample/grid/unbound-column
Blog posts
http://ko.infragistics.com/community/blogs/damyan_petev/archive/2012/10/16/how-to-get-started-with-jquery-grid-unbound-columns.aspx
http://ko.infragistics.com/community/blogs/damyan_petev/archive/2012/10/16/jquery-grid-unbound-column-how-to-make-the-most-of-it.aspx
Hope this helps.
Hi Tsvetelina,
Thank you for the suggestion. When I tried your method I got the error, "cannot call methods on igGridUpdating prior to initialization; attempted to call method 'deleteRow'".
Also, it appears in the demo that "deleteRow" simply draws a line through the values in each cell and adds italics. This is not the behavior I want. I physically want to remove the row and update the count.
- Wil
Hello Wil,
I guess you have looked at the sample. The autoCommit property is set to false there.
If autoCommit = true, the row is removed from the grid and the row count is updated.
Regarding the error I suppose that you haven't included the Updating resources or you haven't declared the featyre in the grid.
If you don't want to have updating feature your alternative option is to delete the row from the dataSource and rebind the grid
$("#grid1").data("igGrid").dataSource.deleteRow(rowId, true);
$("#grid1").data("igGrid").dataBind();
I am attaching a working sample with the RTM of v12.2
Thank you! For my business requirement, I needed the solution where you remove the row from the data source and then rebind. One problem I was having is that I was not specifying a primaryKey entry when I defined the iggrid. I added that and it worked perfectly!