跳转到RadGrid中的行

时间:2013-08-06 13:11:59

标签: telerik radgrid scrollto

我在EditForm模式下的所有行都有一个RadGrid。此Radgrid具有虚拟滚动功能。我需要跳转(滚动)到特定的行。

我尝试了几种选择。在这种情况下,在select中添加一行是不适用的。我现在尝试过:

RadScriptManager.RegisterStartupScript(Page, typeof(RadGrid), "myScript", "scrollItemToTop('" + e.Item.ClientID + "');", true);

在ItemDataBound中

,但是:

function scrollItemToTop(itemID) { $('.rgVragenPanel').scrollTo(0, $telerik.$($get(itemID)).offset().top); }

似乎不起作用。

关于如何最好地解决这个问题的任何想法?

1 个答案:

答案 0 :(得分:1)

试试这个Scrolling to the Selected Item

我在数据绑定事件中选择了后面代码中的项目。

   Set one of the items in the control as selected.
Provide a handler for the client-side GridCreated event.

    In the event handler, locate the selected row using the GridTableView object's get_selectedItems() method.

    Use the RadGrid object's GridDataDiv property to access the DOM element for the scrollable region of the grid.

    Use the DOM element for the row to check if it is visible in the scrollable region. If it is not, set the scrollTop property of the scrollable region to scroll the grid so that the selected row is showing. 

以下示例演示了此技术: CopyJavaScript

<script type="text/javascript">
function GridCreated(sender, eventArgs) {
    //gets the main table scrollArea HTLM element  
    var scrollArea = document.getElementById(sender.get_element().id + "_GridData");
    var row = sender.get_masterTableView().get_selectedItems()[0];

    //if the position of the selected row is below the viewable grid area  
    if (row) {
        if ((row.get_element().offsetTop - scrollArea.scrollTop) + row.get_element().offsetHeight + 20 > scrollArea.offsetHeight) {
            //scroll down to selected row  
            scrollArea.scrollTop = scrollArea.scrollTop + ((row.get_element().offsetTop - scrollArea.scrollTop) +
            row.get_element().offsetHeight - scrollArea.offsetHeight) + row.get_element().offsetHeight;
        }
        //if the position of the the selected row is above the viewable grid area  
        else if ((row.get_element().offsetTop - scrollArea.scrollTop) < 0) {
            //scroll the selected row to the top  
            scrollArea.scrollTop = row.get_element().offsetTop;
        }
    }
}

注意:该功能不适用于页面回发。你应该直接从javascript中取消(我注意到在Telerik示例中没有触发网格的ongridcreated事件)。 所以更好的方法是使用JQuery处理滚动:

1)为特定网格创建一个功能

2)在telerik代码中用var sender = $ find替换发件人(“&lt;%= RadGrid1.ClientID%&gt;”);

3)$(window).load(function(){                         thefunctiontoscrollthegrid();});