[Solved] Focusing to Expanded item

[Chandran Chandran]

Hello Telerik,
                I am having nested grid which is also having two child grid placed in each tab section. The grid is also having the scrolling feature.

If I expand the last row parent item to view its corresponding child items, the grid focus does not go to my expanded child item. I need to scroll down  then only i can view the expanded child item.

When i expand any of parent row item at any position to see its child item, the grid need to automatically focus to last expanded item, So that we do not need to scroll down and up to view the expanded item.
I hope you could understand my scenario.  So please let me the possibilities of the scenario.

Regards,
Chandran

[Chandran Chandran]

Hi,
    Any guidence?

-Chandran

[Chandran Chandran]

Dear Telerik,
                     Is there any possibility to overcome the above mentioned scenario.

Thanks In Advance,
Chandran

[Chandran Chandran]

Dear Telerik,
                     Is there any possibility to overcome the above mentioned scenario.

Thanks In Advance,
Chandran

[Radoslav]

Hi Chandran,

Please check out the following forum threads which discuss a similar scenario:
http://www.telerik.com/community/forums/aspnet-ajax/grid/maintain-scrolling-position.aspx
http://www.telerik.com/community/forums/aspnet-ajax/grid/scrolling-frozencolumncount-grid-width.aspx
http://www.telerik.com/community/forums/aspnet-ajax/grid/repositioning-the-radgrid.aspx
http://www.telerik.com/community/forums/aspnet-ajax/general-discussions/saved-scrolling-position-on-ajax-call.aspx
http://www.telerik.com/community/forums/aspnet-ajax/grid/radgrid-issues.aspx

I hope this helps.

Regards,
Radoslav
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Chandran Chandran]

Hello Radoslav,
                      Thanks for yours kind response. I already aware and reviewed all of those help links. Unfortunately the same links are not matching with my scenario. I worked out many links but didn't solve my issue. 

As per my scenario,I am using nested grid feature, if the user expands a parent row that is near the bottom of the viewable area of the grid, the child grid will be created and expand but the user is required to scroll to see the child rows. I would like to come top eventually the when i expand any of the parent row to view the child item, so that there is no need to scrolling ups and down.

Hope now you are able to understand the scenario, guidance would be highly appreciable. It would be more fruitful if it guided with some sample of code.

-Thanks With Regards

[Radoslav]

Hi Chandran,

The desired functionality is a bit complicated and the RadGrid does not support it.

However you could try writing the custom algorithm for calculating the scroll position based on the expanded items. You could change the RadGrid scroll position by changing the $find("<%= RadGrid1.ClientID %>").GridDataDiv.scrollTop property. For more information please check out the following online documentation article:
http://www.telerik.com/help/aspnet-ajax/grdscrolltotheselecteditem.html

All the best,
Radoslav
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Chandran Chandran]

Hello,
I already used some of the client side events to set the height of the grid dynamically by the given code;

function GridCreated() {
            var myWidth = 0, myHeight = 0;
            if (typeof (window.innerWidth) == 'number') {
                //Non-IE
                myWidth = window.innerWidth;
                myHeight = window.innerHeight;
            } else if (document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight)) {
                //IE 6+ in 'standards compliant mode'
                myWidth = document.documentElement.clientWidth;
                myHeight = document.documentElement.clientHeight;
            } else if (document.body && (document.body.clientWidth || document.body.clientHeight)) {
                //IE 4 compatible
                myWidth = document.body.clientWidth;
                myHeight = document.body.clientHeight;
            }

            var iDivHeight = myHeight * 85 / 100;
            var iGridHeight = iDivHeight * 80 / 100;

            var thisthisObj = this;
            var dataDiv = document.getElementById("<%= RadFirmGrid.ClientID %>" + "_GridData");
            var div = document.getElementById("RadDiv");

            div.style.height = iDivHeight + "px";
            dataDiv.style.height = iGridHeight + "px";

            window.onresize = function() {
                div.style.height = iDivHeight + "px";
                dataDiv.style.height = iGridHeight + "px";
            };

        }

I am also followed some of the forum codes in order to view the expanded item  at the top;
ASPX Code

function Expand(itemID) {
            var Grid = $find('<%=RadFirmGrid.ClientID %>')
            var scrollArea = Grid.GridDataDiv;

            var rowElement = document.getElementById(itemID);
            //alert(rowElement)

            //check if the selected row is below the viewable grid area
            if ((rowElement.offsetTop - scrollArea.scrollTop) +
       rowElement.offsetHeight + 20 > scrollArea.offsetHeight) {

                //scroll down to selected row
                scrollAreascrollArea.scrollTop = scrollArea.scrollTop +
        (rowElement.offsetTop - scrollArea.scrollTop) +
        (rowElement.offsetHeight - scrollArea.offsetHeight) +
        rowElement.offsetHeight;
            }
            //chck if the selected row is above the viewable grid area
            else if ((rowElement.offsetTop - scrollArea.scrollTop) < 0) {
                //scroll the selected row to the top
                scrollArea.scrollTop = rowElement.offsetTop;
            }
        }

CS Code:

   if (e.Item is GridDataItem)
        {
            GridDataItem item = (GridDataItem)e.Item;

            item["ExpandColumn"].Attributes.Add("OnClick", "Expand('" + item.ClientID + "');");
        }

But all of the above codes  is not helping me to solve an issue. Since it is required with great extend. Please suggest me the possibilities to achieve the scenario (or) Is it default behavior and not possible to achieve with RadGrid.

Looking forward to know more about this;

-Regards,
Chandran
           

[Chandran Chandran]

Hello Radoslav ,

Kindly look into my above mentioned scenario and please let us know the possibilites

Regards,
Chandran

[Radoslav]

Hello Chandran,

Currently the RadGrid does not support the desired functionality. However you could try the following approach:
On RadGrid.ItemCommand event handler you could register start up script which calls the client side  function and pass it an expanded row ID:

protected void RadGrid1_ItemCommand(object source, GridCommandEventArgs e)
{
      if (e.CommandName == RadGrid.ExpandCollapseCommandName)
      {
          if (e.Item is GridDataItem)
          {
              GridDataItem item = (GridDataItem)e.Item;
              ScriptManager.RegisterStartupScript(Page, Page.GetType(), "scroll", "setTimeout(function(){ Expand('" + item.ClientID + "');}, 100);", true);
          }
      }
  }

On client side into the Expand(id) function you could change the RadGrid's scroll position:

function Expand(itemID)
{
    var Grid = $find('<%=RadGrid1.ClientID %>');
    var scrollArea = Grid.GridDataDiv;
    var rowElement = document.getElementById(itemID);
    scrollArea.scrollTop = rowElement.offsetTop;
}

I am sending you a simple example. It works only for the first level of the hierarchy. If you want to implement such a functionality for the nested detail tables, you need to sum the offsetTop property for all parent elements.
Additionally please note that this is not a supported scenario for the RadGrid and in some cases it may  not work properly.

Regards,
Radoslav
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Chandran Chandran]

Hi Radoslav,

Thanks for your reply. Your demo is working fine for my demo project. Applying the same logic to nested grid, it is working fine with out measuring any thing. I hope it is also ok with NestedGrid (or) should need to improve some part of code.

Before applying it to real-time project, I would like to share some informations;

* As you pointed in the forum, could you please tell me in which condition or scenario the above logic will not work.

* Whether it will affects any performance or loading time of the grid

* Applying this logic would affect any future enhancement.


Thanks With Regards,
Chandran

[Chandran Chandran]

Hi Radoslav,

Thanks for your reply. Your demo is working fine for my demo project. Applying the same logic to nested grid, it is working fine with out measuring any thing. I hope it is also ok with NestedGrid (or) should need to improve some part of code.

Before applying it to real-time project, I would like to share some informations;

* As you pointed in the forum, could you please tell me in which condition or scenario the above logic will not work.

* Whether it will affects any performance or loading time of the grid

* Applying this logic would affect any future enhancement.


Thanks With Regards,
Chandran

[Chandran Chandran]

Hello,

Have any clarifications to share with respect of above mentioned doubts.

-Thanks

[Radoslav]

Hello Chandran,

Like I said in my previous post, the described approach is not supported by the RadGrid. This is a custom logic for focusing on the RadGrid's expanded item. At this point I could not guarantee that it would not affect any future enhancement. If you want to know whether this approach is stable you could write a stress tests, jsUnit test and etc.

Greetings,
Radoslav
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.