Jason.Bie said:

this method will add a cross line on the "deleted row", not really remove the row.

This is actually a by-default behavior caused by the igGrid's autoCommit option of the igGrid - that option is set to TRUE by default and thus provides batch updating. So the cross line indicates that that update is still not committed and can possibly be undone.
However, if you wish to have immediate updating (and row deleting in specific), you can simply set that option to FALSE and you'll be all set.

Jason.Bie said:

I want to know is there a way to remove rows from igGrid, 
also I don't want to user to see the updating styles like the delete button pops up when mouse on it.

There is not option about disabling the "delete"  button I'm afraid - setting the igGridUpdating feature's enableDeleteRow option to FALSE will also disallow row deleting.

Thus you need a custom solution. The one that I came up with is to hide the delete button whenever it may appear while you're hovering over the igGrid's records:

$("#grid1 tbody").hover(function() {
    $(".ui-iggrid-deletebutton").hide();
});

I've also attached a simple HTML sample to my reply in which you can see both of my suggestions in action.

Please let us know if there's anything else we can help you with.
All the best,
Borislav 

Hi Jason,

Please take a look at the MVC sample project I've attached to my current reply.
I had to make the delete-button-hiding more elaborate, because the simple one from the HTML sample didn't work :D (the delete button wan't appended to the DOM tree when the hover event occurred).

Also, you will notice the "Submit Grid Changes" button below the grid - it will call the igGrid's saveChanges() API function which is required in order to make the apply the changes to your data on the server-side.

Here is my solution on how to hide the delete button - it isn't pretty, but it's the best I could come up with:
[code]

$("#Grid1").igGrid("container").live("mouseenter", function (evt) {
                var lookForAndHideDeleteButton;
                lookForAndHideDeleteButton = setInterval(function () {
                    if ($("#Grid1").igGrid("container").find(".ui-iggrid-deletebutton").length != 0) {
                        $(".ui-iggrid-deletebutton").hide();
                        clearInterval(lookForAndHideDeleteButton);
                    }
                },
                1);
            });

[/code]
All in all, the Updating feature is a complex one so I strongly suggest that you carefully read the help article on it http://help.infragistics.com/NetAdvantage/jQuery/2012.1/CLR4.0?page=igGrid_Updating.html

Jason.Bie said:

I tried to remove the html element tr to show the selected line in javascript, it works but the background- color is not good, so I want to know if there is a better way to implement it.

 
I'm afraid that I cannot understand you.
Can you please elaborate on what exactly do you want to do?
(A screenshot of the current and desired states of the igGrid will also help :))

Thank in advance!

$("#Grid1").igGrid("widget").live("iggridupdatingrowdeleting", function (evt, ui) {
    var dataRecord = $("#Grid1").igGrid("findRecordByKey", ui.rowID);
    $("#Grid2").igGridUpdating("addRow", dataRecord);
    $("#Grid2").igGrid("submitChanges");
});

• the rowDeleting event of the Updating feature,
• the findRecordByKey API method of the igGrid
• and the addRow API method of the Updating feature