Hello Almond,

In order to customize the edit template you can just access the dialog element in the rowEditDialogContentsRendered event. Once you have the dialog element you can append the image that you want to it.

For example this line will append an image just below the editable fields:

in js:

         //Bind after initialization

         $(document).delegate("#grid1", "iggridupdatingroweditdialogcontentsrendered", function (evt, ui) {

             ui.dialogElement.children('.ui-dialog-content').append('<img src="http://localhost:39783/Images/tick.png" />');

         });

if you want to access the titlebar you could try:

ui.dialogElement.children('.ui-dialog-titlebar')

with this lime you could access the buttons:

ui.dialogElement.children('.ui-dialog-buttonpane')

More about the customizing of the dialog you could find in our documentation:

Hello Almond ,

If you handle the RowEditDialogContentsREndered event you can customize this dialog the way you want:

         $(document).delegate("#grid1", "iggridupdatingroweditdialogcontentsrendered", function (evt, ui) {

             //return the triggered event

             evt;

             // get reference to igGridUpdating widget

             ui.owner;

             // get reference to the row edit dialog DOM element

             ui.dialogElement;

             // get reference to the row edit dialog titlebar

             ui.dialogElement.children('.ui-dialog-titlebar');

             // get reference to the row edit dialog content element

             ui.dialogElement.children('.ui-dialog-content').css("marginLeft", "-100");

         });

As you can see from the snippet that I have provided, in this element you can get all of the elements in this dialog. Then you can use jQuery  append and prepend functions in order to add some additional elements and style them in order to suit your design: