Hi,
I am using igGrid control in an Asp.net MVC3 project, I know that in igGridUpdating there is an method called deleteRow, this method will add a cross line on the "deleted row", not really remove the row.
$('#grid1'). igGridUpdating('deleteRow', "AFG");
'#grid1'
'deleteRow'
"AFG"
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.
Oh, I forgot to mention - here's how the "magic" is implemented:[code]
$("#Grid1").igGrid("widget").live("iggridupdatingrowdeleting", function (evt, ui) { var dataRecord = $("#Grid1").igGrid("findRecordByKey", ui.rowID); $("#Grid2").igGridUpdating("addRow", dataRecord); $("#Grid2").igGrid("submitChanges"); });
[/code]
I'm relying on:
Hi Jason,First of all, sorry for the long delay - I'm a volunteer in the forums so I come where in my free time :)Now, about the solution - it's absolutely doable.I've attached a new sample to my current reply which (hopefully) illustrates the scenario you're trying to implement: you can select one or more rows from the 1st grid and use the Delete keyboard key to delete them. Those rows will appear in the second grid in a jiff.Note that the way I've implemented it is applied only to the grid's local data - this means that if you rebind either grid or if you reload the pages, all changes (deleted rows/added rows) will be lost.Notice that I've set up UpdateURLs for both grids and I've commented them out - you can uncomment them in order to be able to move the rows from one grid to another on the server-side if you have to.Cheers,Borislav
Hi Borislav,
Thanks for you reply.
There are two igGrids(for example grid1, grid2) on one page, there is a button called Move on this page, what I want to do is select some rows from grid1 and click the Move button, the selected rows in grid1 should be moved to grid2. My solution is make an ajax call to move the records on server, then add rows in grid2 and remove rows in grid1. Do you understand what I am talking about?
Right now I haven't find a good way to remove the rows in grid1, I just remove the html element. Do you have a better way to do this?
Best regards
Jason
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!
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.