Hello there,
I'd like to set the edit row not under the clicked row but use it as overlay.
So my approach was, after you set the row I get the height of the row and set the margin.
This works most of the time, but it seems that sometimes its quite strange.
Another problem is, the grid wants to positionate the edit row sometimer on top of the clicked row, namely when the last row is clicked.
Sadly I really cant name WHEN it doesnt work proper, what I can say is, that the divParent.margin-top is not setted proper in some circumstances.
Is there a special behavior when the second last row is selected?
function enterRolesEditMode(btnClientId) { var btn = document.getElementById(btnClientId); var tr = $(btn).closest('tr'); PageMethods.SetEditModeButtonId(btnClientId); GridRowEnterEditMode(btn, 'EditRole'); var templateId = $find('dgrRoles').get_behaviors().get_editingCore()._behaviors._behaviors[0]._templateId; var divParent = $('#' + templateId); var divToChange = divParent.children('div'); //if there is not enought space at the end of the grid (f.e. last row), it wants to show the edit grid at the top //Thats why we check if the row is the last one and calculate the margin like this var id = tr.attr('id'); var index = id.indexOf('adr:'); id = id.substring(index + 4, index + 5); var rows = $find('dgrRoles').get_rows(); var margin = parseFloat(divParent.css('margin-top')); if (rows.get_length() - 1 == id) { margin = margin + tr.height(); } else { margin = margin - tr.height(); } divParent.css('margin-left', "1px"); divToChange.height(tr.height() + "px"); divToChange.width(tr.width() + "px"); divParent.css('margin-top', margin + "px"); }
Or is there a easier solution to make this working?
Thanks as usual =)
Matthias
Hello Matthias,
The best way is to handler templateopened client side event and set the margin’s for the container like below:
function onTemplateOpened(grid, args)
{
var container = grid
.get_behaviors()
.get_editingCore()
.get_rowEditingTemplate()
.get_dropDownBehavior()
.get_targetContainer();
container.style.marginLeft = "0px";
container.style.marginTop = "0px";
container.style.left = "100px";
container.style.top = "100px";
}
I suggest you to go through the following video which will explain you how you can explicitly set the Location of the Row Edit Template in the WebDataGrid:
http://www.youtube.com/watch?v=2Ta7epycraU
Please let me know if I can provide any further assistance regarding this matter.
Hell Prabha,
thanks for your response, but as far as you can see in my post im already at this point. The problem is, I need to understand how you set the top value of the editing template, since this seems to change from on the top of the selected row to under the selected row at some times.
Attached sample demonstrates how you can overlay RowEditTemplate on top of the selected row.
Please let me know if you have any questions regarding this matter
Hello Prabha, thanks for your example.
Sadly I cant use the opened event, you shoot this only when its entered by CLICK-Event.
I set this from the code, so I'd have to read the row manually. Is there a way to do this? The sender is no problem, since its just the grid.
I changed some of my code (accessing __internalEnterEditMode) to get the event.
The problem is, the position of the edit row is absolute, which cant work.
Even if I set it to relative, it doesnt seem to work.
Tripple answer inc: Finally I have the solution, I want to share with you:
function RowEditing_TemplateOpened(sender, eventArgs) { var container = $(sender .get_behaviors() .get_editingCore() .get_behaviors() .get_rowEditingTemplate() .get_dropDownBehavior() .get_targetContainer()); var row = eventArgs.get_row().get_element(); var parent = row.offsetParent; var rowOffset = eventArgs.get_row().get_element().offsetTop; var offset = $(parent).offset(); var newOffsetTop = offset.top + rowOffset; var newOffsetLeft = offset.left; container.offset({top: newOffsetTop, left: newOffsetLeft}); container.width($(row).outerWidth()); //We set the height for the div, the child-div AND the table, to show it proper var newOuterHeight = $(row).outerHeight(true); var editTable = container.find('#tableEditRoles'); var firstDiv = container.children().first(); container.css('height', newOuterHeight + "px"); editTable.css('height', newOuterHeight + "px"); firstDiv.css('height', newOuterHeight + "px"); //The webdatagrid sets IFrames, which dont get removed after setting the editing row //Do this manually container.parent().children('iframe').remove(); }
THe IFrames are the original edit rows, so I remove them manually.