scroll horizontal by javascript

[Reiner Ebel]

Hello,
How can I scroll automatically horizontal by script? I save the RadGrid1.GridDataDiv object status before the RadGrid change:

<script type="text/javascript">
    var usersmatrix1scrollArea;

    function OnClientScript(args) {
        var RadGrid1 = $find("<%= RadGrid1.ClientID %>");
        usersmatrix1scrollArea = RadGrid1.GridDataDiv;
    }

    function GridCreated() {
        var RadGrid1 = $find("<%= RadGrid1.ClientID %>");
        var scrollArea = RadGrid1.GridDataDiv;

        if (usersmatrix1scrollArea != null) {
            scrollArea = usersmatrix1scrollArea;
        }
    }
</script>

This works only vertically, no horizontal. How can I scroll to the correct Item horizontal?

Reiner

[Dimo]

Hi Reiner,

Your code snippet does not show how you try to scroll the RadGrid manually. This is done with the scrollLeft and scrollTop properties of the GridDataDiv.

Using these properties is demonstrated in this forum post:

http://www.telerik.com/community/forums/aspnet/grid/radgrid-with-rtl-direction-issues.aspx#1268887

Greetings,
Dimo
the Telerik team

[Reiner Ebel]

Thank you, Dimo.
Unfortunately, I get it still not go.

Here is the Code:
aspx:

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
    <link href="../css/matrix.css" rel="stylesheet" type="text/css" />

    <script type="text/javascript">

        var usersmatrix1top = 0;
        var usersmatrix1left = 0;

        function OnClientScript(args) {
            var RadGrid1 = $find("<%= RadGrid1.ClientID %>");
            var usersmatrix1scrollArea = RadGrid1.GridDataDiv;
            usersmatrix1top = usersmatrix1scrollArea.scrollTop;
            usersmatrix1left = usersmatrix1scrollArea.scrollLeft;
        }

        function GridCreated() {
            setTimeout(function() {
                var RadGrid1 = $find("<%= RadGrid1.ClientID %>");
                var scrollArea = RadGrid1.GridDataDiv;
                scrollArea.scrollTop = usersmatrix1top;
                scrollArea.scrollLeft = usersmatrix1left;
            }, 200);
        }
    </script>

</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
    <asp:ScriptManagerProxy ID="ScriptManagerProxy1" runat="server">
    </asp:ScriptManagerProxy>

    <div style="margin:20px 3px;" id="RadGridContainerArea">
    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate>

            <telerik:RadGrid ID="RadGrid1" runat="server" Width="900" Height="400"
                Skin="Office2007"
                onitemdatabound="RadGrid1_ItemDataBound"
                onitemcommand="RadGrid1_ItemCommand" >
                <ClientSettings>
                    <Scrolling AllowScroll="true" UseStaticHeaders="true" SaveScrollPosition="true"  FrozenColumnsCount="1" />
                    <ClientEvents OnGridCreated="GridCreated"  />
                </ClientSettings>
                <MasterTableView TableLayout="Auto" />
                <HeaderStyle Width="100px" Height="35px" />
                <ItemStyle Height="25px" />
                <AlternatingItemStyle Height="25px" />
            </telerik:RadGrid>

        </ContentTemplate>
        <Triggers>
            <asp:AsyncPostBackTrigger ControlID="RadGrid1" EventName="ItemCommand" />
        </Triggers>
    </asp:UpdatePanel>
    </div>
</asp:Content>

C#:

protected void RadGrid1_ItemDataBound(object sender, Telerik.Web.UI.GridItemEventArgs e)
{
    if (e.Item is GridDataItem)
    {
        if (rolesnames.Length > 0)
        {
            GridDataItem item = (GridDataItem)e.Item;
            for (int i = 0; i < rolesnames.Length; i++)
            {
                ImageButton imgbtn = new ImageButton();

                imgbtn.CommandArgument = item[""].Text.Trim() + "|" + rolesnames[i].Trim();
                imgbtn.OnClientClick = "OnClientScript(\"imgbtn" + e.Item.RowIndex.ToString("0000") + i.ToString("0000") + "\");";
                imgbtn.ID = "imgbtn" + e.Item.RowIndex.ToString("0000") + i.ToString("0000");
                if (item[rolesnames[i]].Text == "true")
                {
                    imgbtn.CommandName = "del";
                    imgbtn.ImageUrl = "../img/ok.gif";
                    item[rolesnames[i]].Controls.Add(imgbtn);
                    item[rolesnames[i]].HorizontalAlign = HorizontalAlign.Center;
                }
                else if (item[rolesnames[i]/*.Replace(" ","_")*/].Text == "false")
                {
                    imgbtn.CommandName = "add";
                    imgbtn.ImageUrl = "../img/cancel.gif";
                    item[rolesnames[i]].Controls.Add(imgbtn);
                    item[rolesnames[i]].HorizontalAlign = HorizontalAlign.Center;
                }
            }
        }
    }
}

How can I solve my problem? How can i scroll automatically horizontal after the ImageButton click?

Reiner

[Dimo]

Hello Reiner Ebel,

When using frozen columns, the approach is different with regard to horizontal scrolling.

By the way, you don't have to use $find() for the RadGrid client object in RadGrid event handlers - you already have a reference to the control's instance in the event arguments.

<telerik:RadGrid ID="RadGrid1" runat="server" Width="900" Height="400"
    Skin="Office2007"
    OnNeedDataSource="RadGrid1_NeedDataSource"
    OnItemDataBound="RadGrid1_ItemDataBound">
    <ClientSettings>
        <Scrolling AllowScroll="true" UseStaticHeaders="true" SaveScrollPosition="true" FrozenColumnsCount="1" />
        <ClientEvents OnGridCreated="GridCreated"  />
    </ClientSettings>
    <HeaderStyle Width="200px" />
    <MasterTableView CommandItemDisplay="Top" />
</telerik:RadGrid>

<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
<script type="text/javascript">

var usersmatrix1top = 0;
var usersmatrix1left = 0;

function OnClientScript(args) {
    var frozenScroller = $get("<%= RadGrid1.ClientID %>_Frozen");
    var verticalScroller = $find("<%= RadGrid1.ClientID %>").GridDataDiv;
    usersmatrix1top = verticalScroller.scrollTop;
    usersmatrix1left = frozenScroller.scrollLeft;
}

function GridCreated(sender, args) {
    setTimeout(function() {
        var frozenScroller = $get(sender.get_id() + "_Frozen");
        var verticalScroller = sender.GridDataDiv;
        verticalScroller.scrollTop = usersmatrix1top;
        frozenScroller.scrollLeft = usersmatrix1left;
    }, 200);
}

</script>
</telerik:RadCodeBlock>

Greetings,
Dimo
the Telerik team