This is a migrated thread and some comments may be shown as answers.

Focusing to Expanded item

13 Answers 87 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Chandran Chandran
Top achievements
Rank 1
Chandran Chandran asked on 12 May 2010, 11:27 AM
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

13 Answers, 1 is accepted

Sort by
0
Chandran Chandran
Top achievements
Rank 1
answered on 12 May 2010, 04:05 PM
Hi,
    Any guidence?

-Chandran

0
Chandran Chandran
Top achievements
Rank 1
answered on 13 May 2010, 04:30 PM
Dear Telerik,
                     Is there any possibility to overcome the above mentioned scenario.

Thanks In Advance,
Chandran
0
Chandran Chandran
Top achievements
Rank 1
answered on 14 May 2010, 11:03 AM
Dear Telerik,
                     Is there any possibility to overcome the above mentioned scenario.

Thanks In Advance,
Chandran
0
Radoslav
Telerik team
answered on 14 May 2010, 11:24 AM
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.
0
Chandran Chandran
Top achievements
Rank 1
answered on 14 May 2010, 11:53 AM
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
0
Radoslav
Telerik team
answered on 14 May 2010, 01:30 PM
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.
0
Chandran Chandran
Top achievements
Rank 1
answered on 14 May 2010, 02:17 PM
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 = 0myHeight = 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
           
0
Chandran Chandran
Top achievements
Rank 1
answered on 17 May 2010, 10:53 AM
Hello Radoslav ,

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

Regards,
Chandran
0
Radoslav
Telerik team
answered on 17 May 2010, 12:33 PM
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.
0
Chandran Chandran
Top achievements
Rank 1
answered on 17 May 2010, 03:11 PM

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

0
Chandran Chandran
Top achievements
Rank 1
answered on 18 May 2010, 02:41 PM

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


0
Chandran Chandran
Top achievements
Rank 1
answered on 19 May 2010, 12:34 PM
Hello,

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

-Thanks
0
Radoslav
Telerik team
answered on 19 May 2010, 01:04 PM
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.
Tags
Grid
Asked by
Chandran Chandran
Top achievements
Rank 1
Answers by
Chandran Chandran
Top achievements
Rank 1
Radoslav
Telerik team
Share this question
or