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

scrolling to detail selected record in client

3 Answers 93 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Maas Prog
Top achievements
Rank 1
Maas Prog asked on 21 Apr 2010, 05:44 PM

Hi All -
I'm pulling my hair out a bit -- I have a self-referencing hierarchical grid and I want to automatically scroll to the selected record when I post back (when adding or editing a record). I can select the record on postback fine, and when the record is in the master tableview the position works, but if the selected record is in a child tableview, the position does not work. Below is the code I am using... any ideas?

Thanks
Ford





           function GridCreated() {  
            // This code will position visible part of grid on selected item even when item is off visible area

               var RadGrid1 = $find("<%= RadGrid1.ClientID %>");
               var found = 0;

              // look for selected row in master table
              var row = RadGrid1.get_masterTableView().get_selectedItems()[0];
                
              if (row) {
                  found = 1;
              //    alert('In Master');

              }

              else {

                 // alert("not found in parent");
                  for (var j = 0; j < RadGrid1.get_detailTables().length; j++) {
                      var childSelectedRows = RadGrid1.get_detailTables()[j].get_selectedItems();
                  }
                  var childSelIDs = new Array(childSelectedRows.length);
                  for (var i = 0; i < childSelectedRows.length; i++) {
                      var row = childSelectedRows[i];
                      if (row) {
                          found = 1;
                  //        alert('In Child');
                      }

                  }
               }

                 // alert('testing');

                  if (found == 1) {
                      alert('positining');
                      setTimeout(function() {
                          var rowElement = row.get_element();
                          //get the main table scrollArea HTML element
                          var scrollArea = RadGrid1.GridDataDiv;

                          //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
                              scrollArea.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;
                          }
                      }, 200);
                  }
             }

3 Answers, 1 is accepted

Sort by
0
Veli
Telerik team
answered on 23 Apr 2010, 01:35 PM
Hi Ford,

If you are using server-side selection, meaning that you are selecting your item on the server, there is a very easy approach you can use, i.e. registering a small startup script that will scroll the selected item into view:

string script = String.Format("$get('{0}').scrollIntoView();", RadGrid1.SelectedItems[0].ClientID);
Page.ClientScript.RegisterStartupScript(typeof(Page), "scrollToSelectedItem", script, true);

Check it out.

Regards,
Veli
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
Maas Prog
Top achievements
Rank 1
answered on 23 Apr 2010, 05:21 PM
Hi  -- I put the code in place where I select the record (in the ItemDataBound Event) and am getting this error (I am using VB so had to convert...not sure I did it right)

Specified argument was out of the range of valid values.
Parameter name: ItemHierarchicalIndex

Description: An unhandled exception occurred during the execution of the current web request. Please review the stack trace for more information about the error and where it originated in the code.

Exception Details: System.ArgumentOutOfRangeException: Specified argument was out of the range of valid values.
Parameter name: ItemHierarchicalIndex

Source Error:

Line 386:                nSelectedRowID = 0
Line 387:
Line 388: Dim script As String = String.Format("$get('{0}').scrollIntoView();", RadGrid1.SelectedItems(0).ClientID)
Line 389: Page.ClientScript.RegisterStartupScript(Page.GetType(), "scrollToSelectedItem", script, True)

0
Maas Prog
Top achievements
Rank 1
answered on 23 Apr 2010, 11:24 PM
Finally figured it out... though not sure why I got the error above. To make it work, I am subscribing to a Java Script Function ScrollToSelected() in my grid client like so:

 <ClientSettings AllowExpandCollapse="true"
            <Selecting AllowRowSelect="True" /> 
            <Scrolling AllowScroll="True" UseStaticHeaders="True" SaveScrollPosition="True" ScrollHeight="50%" /> 
            <ClientEvents OnRowContextMenu="RowContextMenu" OnRowSelected="RowSetSelected" OnGridCreated="ScrollToSelected" OnRowDblClick="RowDoubleClick" ></ClientEvents
        </ClientSettings> 

and in the java script:

         function ScrollToSelected() {   
            // This code will position visible part of grid on selected item even when item is off visible area 
 
               var RadGrid1 = $find("<%= RadGrid1.ClientID %>"); 
               var found = 0
              // look for selected row in master table 
              var row = RadGrid1.get_masterTableView().get_selectedItems()[0]; 
              if (row) { 
                  found = 1
              } 
              else {    //not found in master table view so look in detail views recursively 
                 for (var j = 0; j < RadGrid1.get_detailTables().length; j++) { 
                     var childSelectedRows = RadGrid1.get_detailTables()[j].get_selectedItems(); 
                     var childSelIDs = new Array(childSelectedRows.length); 
                     for (var i = 0; i < childSelectedRows.length; i++) { 
                         var row = childSelectedRows[i]; 
                         if (row) { 
                             found = 1
                             break; 
                         } 
 
                     } 
                     if (found == 1) { 
                         break; 
                     } 
                 } 
               } 
               if (found == 1) { 
                     setTimeout(function() { 
                              var dd = row.get_id(); 
                              var ss = document.getElementById(dd); 
                              ss.scrollIntoView(false); 
 
                    }, 200); 
                  } 
             } 

Seems to work now, but it would be great to have a built in function that simply finds the selected record without having to manually traverse all the detail views....

F.


Tags
Grid
Asked by
Maas Prog
Top achievements
Rank 1
Answers by
Veli
Telerik team
Maas Prog
Top achievements
Rank 1
Share this question
or