Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
1175
Understanding how to repositionate the edit row template
posted

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

Parents
No Data
Reply
  • 7499
    posted

    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_behaviors()

                    .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.

Children