Relevant problem #1
Grid update mode is row.
The default delete hover buttons are not actually placed in the row but it is an element that "attempts" to absolutely position it after the row end. This of course fails and the delete button is broken.
Problem #2
Note* I have used jQuery to remove the default non-working delete hover button.
So to fix the above I have added an unbound row which I populate using a formula to place a Delete button within the grid. First issue I faced was with the Delete button when clicking that it causes the whole row to become edited. This is not ideal, because then it blocks the Delete button click. This is fixed by disabling the column field as an editable field.
// Prevents the Delete column being editable $(document) .delegate("#igGrid", "iggridupdatingeditcellstarting", function (evt, ui) { if (ui.columnKey === "Delete") { return false; } return true; });
This is fine but not ideal as when I click the Delete button the rest of the row is still going into edit mode. So here comes the final problem and the one this topic is trying to address. When I press the Delete button, my own function to delete the row fires but then also the "iggridupdatingeditrowended" fires. This causes 2 transactions to occur, 1st to delete the row and then 2nd to update the non-existent row. When in the MVC controller I just process the delete row the Editrowended is re-added the deleted row back to the iggrid.
Is there a fix and perhaps a more elegant solution to my problem? Is there no solution and must I use some external dialogs/views/controls outside of igniteui to edit/delete the rows?
Hello Jagdip,
By design the delete button position is calculated according to the igGrid scroll container.
In order to accomplish repositioning of the "Delete" button the showDeleteButton function can be modified to change the position of the button. In your case, since you would like to position the button in the last cell "left" css property should be modified. Calculations should take row width, and the button width under consideration. For example:
var origPositioning = $("#grid1").data("igGridUpdating").showDeleteButtonFor; $("#grid1").data("igGridUpdating").showDeleteButtonFor = function (row) { origPositioning.apply($("#grid1").data("igGridUpdating"), [row]); var db = $("#" + this.grid.id() + "_updating_deletehover"); // reposition db.css("left", row.outerWidth() - db.outerWidth() - 5); };
I am attaching a small sample for your reference. Please test it on your side and feel free to contact me if you have any additional questions regarding this matter.
Thanks for getting back to me.
This is fine and it will work. However the latest css files are therefore broken. When I include an older set of css for infragistics it is positioned correctly.
Also the css of the delete button was least of the problems I was having, the deleting row functionality is what was troubling me.
Kind regards.
Please let me know which is the version of Ignite UI that you are experiencing css issues with?
Starting with version 12.2 the updating feature of igGrid provides a row edit dialog and allows end users to edit records in a pop up dialog as compared to inline editing. I believe this functionality will help you achieve your requirement.
The editMode property has "dialog" value which should be set. When row edit dialog is automatically generated it is based on the data types of the columns. It reads the columnSettings for the updating feature in order to determine what kind of editor will be rendered. If you set the unbound column with the Delete button to readOnly and you set the showReadOnlyEditors option to false no editor will be displayed in the dialog for this column. For example:
features: [ { name: "Updating", editMode: "dialog", columnSettings: [ { columnKey: "Delete", readOnly: true } ], rowEditDialogOptions: { showReadonlyEditors: false } } ]
In case that my suggestion for repositioning the delete button works in your scenario you could also remove the unbound column with the delete button and rely on the built in delete row functionality of igGrid.
I am attaching a small sample for your reference. Please have a look at this sample and let me know whether it meets your requirements.
Hello Vasya, thank you for your response.
Version of Infragistics I'm using is 2016 Volume 1 - a downloaded version and I included the files manually in my project as per the basic getting started instructions.
I'm going to have a look at look at your sample and give the inbuilt row deletion a try. If it doesn't work then I'll switch to the above method.
Tried the fix you provided Vasya. The code works, the selector is doing what its intended to do however it doesn't work on the version of Infragistics I'm using.
Also there are 2 icons that are generated in my hove function. Firstly there is a checkbox and then there is the 'x' icon. If I reposition the checkbox the circle does follow it however it is offset as shown in the screenshot.
So I'm going to try and offset the 'x' circle and not the checkbox as that seems to be positioned correctly. The 'x' icon is a child element of the checkbox.
UPDATE
The way I fixed it was using the following. As explained above it's the 'x' icon that needs updating.
$(function () { // Quick fix to manually position delete hover button as per infragistics help // http://www.infragistics.com/community/forums/p/107777/507972.aspx#507972 var origPositioningFunction = $("#igGrid").data("igGridUpdating").showDeleteButtonFor;
$("#igGrid").data("igGridUpdating").showDeleteButtonFor = function (row) { origPositioningFunction.apply($("#igGrid").data("igGridUpdating"), [row]);
var $deleteCheckbox = $("#" + this.grid.id() + "_updating_deletehover"); var $deleteIcon = $deleteCheckbox.find('span.ui-iggrid-deleteicon');
// reposition $deleteIcon.css("left", $deleteCheckbox.outerWidth() - 20); $deleteIcon.css("top", $deleteCheckbox.outerWidth() - 20); }; });
I am glad that you managed to achieve your requirement.
Please feel free to contact me if you need any further assistance with this matter.