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.