scrolling to detail selected record in client

[Maas Prog]

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);

                  }

             }

[Veli]

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.

[Maas Prog]

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)

[Maas Prog]

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.