Moving to bottom of grid after RadWindow dialog closed

[Steve]

Hi,
Currently I have a 'add' button on a webform.

When clicked, a RadWindowsManager dialog window is displayed.

Clicking 'save' in that dialog, closes the dialog, adds a record to database table, and uses the client 'RefreshGrid' to update a grid on-screen with that extra record.

This all works fine- thanks to the great Telerik documentation!

However, as the record is added to the bottom of the grid, I would like the client to automatically scroll to the bottom.

I've tried using javascript before and after the '_doPostBack' call in 'refreshGrid', but the browser ignores it.

Do you have any suggestions?

Thanks,
Steve

[Princy]

Hi Steve,

I guess you are having the same code as that of demo and you donot have paging, hence you want to focus to last row. Please take a look at the following code snippet. To identify if a row is inserted, in the EditFormCs page, on the CloseAndRebind function we can pass a variable to main page through window and have the ItemCommand event fired and set focus to last row.

EditFormCS.aspx:

<script type="text/javascript">
    function CloseAndRebind(args) {
        GetRadWindow().BrowserWindow.refreshGrid(args);
        var oArg = new Object();
        if (args != "undefined") {
          //To identify an Insert
            oArg.txtValue = 1;
        }
          //Passing the value to window
        GetRadWindow().close(oArg);
    }
   //Rest of the code
</script>

Default.aspx:

<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
    <script type="text/javascript">
      //Rest of the code
        function OnClientClose(oWnd, args) {
            var arg = args.get_argument();
            if (arg) {
                var grid = $find("<%=RadGrid1.ClientID %>");
                var master = grid.get_masterTableView();
                master.fireCommand("InsertAlert", arg.txtValue);
            }
        }
    </script>
</telerik:RadCodeBlock>

<telerik:RadWindowManager ID="RadWindowManager1" runat="server" EnableShadow="true">
    <Windows>
        <telerik:RadWindow ID="UserListDialog" runat="server" OnClientClose="OnClientClose". . .>
        </telerik:RadWindow>
    </Windows>
</telerik:RadWindowManager>

Default.CS:

protected void RadGrid1_ItemCommand(object sender, GridCommandEventArgs e)
{
  if (e.CommandName == "InsertAlert")
  {
    RadGrid1.Rebind();
    int count=RadGrid1.Items.Count;
    //Set focus to last row
    RadGrid1.MasterTableView.Items[count-1].Focus();
  }
}

Thanks,
Princy

[Steve]

Princy, Hi,
Thanks for that.

I moved the code across- the only change I had to make was to use 'oArg=1' (as it didn't like txtValue) and  then 'master.fireCommand("InsertAlert", arg);'.

I can prove it gets to, and runs, the '.Focus();' instruction, but the browser window is still displaying the top of the web-page, not the bottom.

Before I go and send the relevant code across, is there anything obvious that I need to double-check?
Cheers, Steve

[Princy]

Hi Steve,

Please try the below sample code snippet, it works as expected at my end.

Default.ASPX:

<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
    <script type="text/javascript">
        function ShowEditForm(id, rowIndex) {
            var grid = $find("<%= RadGrid1.ClientID %>");
            var rowControl = grid.get_masterTableView().get_dataItems()[rowIndex].get_element();
            grid.get_masterTableView().selectItem(rowControl, true);
            window.radopen("EditFormCS.aspx?EmployeeID=" + id, "UserListDialog");
            return false;
        }
        function ShowInsertForm() {
            window.radopen("EditFormCS.aspx", "UserListDialog");
            return false;
        }
        function refreshGrid(arg) {
            if (!arg) {
                $find("<%= RadAjaxManager1.ClientID %>").ajaxRequest("Rebind");
            }
            else {
                $find("<%= RadAjaxManager1.ClientID %>").ajaxRequest("RebindAndNavigate");
            }
        }
        function RowDblClick(sender, eventArgs) {
            window.radopen("EditFormCS.aspx?EmployeeID=" + eventArgs.getDataKeyValue("EmployeeID"), "UserListDialog");
        }
        function OnClientClose(oWnd, args) {
            var arg = args.get_argument();
            var grid = $find("<%=RadGrid1.ClientID %>");
            var master = grid.get_masterTableView();
            if (arg.txtValue == 1) {
                master.fireCommand("InsertAlert", arg.txtValue);
            }
            else {
                arg.txtValue = 0;
                master.fireCommand("UpdateAlert", arg.txtValue);
            }
        }
    </script>
</telerik:RadCodeBlock>
<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" OnAjaxRequest="RadAjaxManager1_AjaxRequest">
    <AjaxSettings>
        <telerik:AjaxSetting AjaxControlID="RadAjaxManager1">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="RadGrid1" LoadingPanelID="gridLoadingPanel">
                </telerik:AjaxUpdatedControl>
            </UpdatedControls>
        </telerik:AjaxSetting>
        <telerik:AjaxSetting AjaxControlID="RadGrid1">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="RadGrid1" LoadingPanelID="gridLoadingPanel">
                </telerik:AjaxUpdatedControl>
            </UpdatedControls>
        </telerik:AjaxSetting>
    </AjaxSettings>
</telerik:RadAjaxManager>
<telerik:RadAjaxLoadingPanel runat="server" ID="gridLoadingPanel">
</telerik:RadAjaxLoadingPanel>
<telerik:RadGrid OnItemCreated="RadGrid1_ItemCreated" ID="RadGrid1" runat="server" DataSourceID="SqlDataSource1" OnItemCommand="RadGrid1_ItemCommand">
    <MasterTableView AutoGenerateColumns="False" DataKeyNames="EmployeeID" ClientDataKeyNames="EmployeeID" CommandItemDisplay="Top">
        <Columns>
         . . . .
            <telerik:GridTemplateColumn UniqueName="TemplateEditColumn">
                <ItemTemplate>
                    <asp:HyperLink ID="EditLink" runat="server" Text="Edit">
                    </asp:HyperLink>
                </ItemTemplate>
            </telerik:GridTemplateColumn>
        </Columns>
        <CommandItemTemplate>
            <a href="#" onclick="return ShowInsertForm();">Add New Record</a>
        </CommandItemTemplate>
    </MasterTableView>
    <ClientSettings>
        <Selecting AllowRowSelect="true"></Selecting>
        <ClientEvents OnRowDblClick="RowDblClick"></ClientEvents>
    </ClientSettings>
</telerik:RadGrid>
<telerik:RadWindowManager ID="RadWindowManager1" runat="server" EnableShadow="true">
    <Windows>
        <telerik:RadWindow ID="UserListDialog" runat="server" Title="Editing record" Height="320px" Width="310px" Left="150px" ReloadOnShow="true" ShowContentDuringLoad="false" OnClientClose="OnClientClose" Modal="true">
        </telerik:RadWindow>
    </Windows>
</telerik:RadWindowManager>
<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:ConnectionString %>" SelectCommand="SELECT [EmployeeID], [FirstName], [LastName], [Title] FROM [Employees]">
</asp:SqlDataSource>

Default.CS:

protected void RadGrid1_ItemCreated(object sender, GridItemEventArgs e)
{
    if (e.Item is GridDataItem)
    {
        GridDataItem dataItem = (GridDataItem)e.Item;
        HyperLink editLink = (HyperLink)e.Item.FindControl("EditLink");
        editLink.Attributes["href"] = "javascript:void(0);";
        editLink.Attributes["onclick"] = String.Format("return ShowEditForm('{0}','{1}');", e.Item.OwnerTableView.DataKeyValues[e.Item.ItemIndex]["EmployeeID"], e.Item.ItemIndex);
    }
}

protected void RadAjaxManager1_AjaxRequest(object sender, AjaxRequestEventArgs e)
{
    if (e.Argument == "Rebind")
    {
        RadGrid1.MasterTableView.SortExpressions.Clear();
        RadGrid1.MasterTableView.GroupByExpressions.Clear();
        RadGrid1.Rebind();
    }
    else if (e.Argument == "RebindAndNavigate")
    {
        RadGrid1.MasterTableView.SortExpressions.Clear();
        RadGrid1.MasterTableView.GroupByExpressions.Clear();
        RadGrid1.MasterTableView.CurrentPageIndex = RadGrid1.MasterTableView.PageCount - 1;
        RadGrid1.Rebind();
    }
}

protected void RadGrid1_ItemCommand(object sender, GridCommandEventArgs e)
{
    if (e.CommandName == "InsertAlert")
    {
        RadGrid1.Rebind();
        int count = RadGrid1.Items.Count;
        RadGrid1.MasterTableView.Items[count - 1].Focus();
    }
    if (e.CommandName == "UpdateAlert")
    {
        RadGrid1.Rebind();
    }
}

EditFormCS.aspx:

<script type="text/javascript">
    function CloseAndRebind(args) {
        var oArg = new Object();
        if (args == undefined)
            oArg.txtValue = 0;
        else
            oArg.txtValue = 1;
        GetRadWindow().BrowserWindow.refreshGrid(args);
        GetRadWindow().close(oArg);
    }

    function GetRadWindow() {
        var oWindow = null;
        if (window.radWindow) oWindow = window.radWindow;
        //Will work in Moz in all cases, including clasic dialog

        else if (window.frameElement.radWindow) oWindow = window.frameElement.radWindow; //IE (and Moz as well)
        return oWindow;
    }
    function CancelEdit() { GetRadWindow().close(); }
</script>
<asp:ScriptManager ID="ScriptManager2" runat="server" />
<telerik:RadFormDecorator ID="RadFormDecorator1" runat="server" Skin="Vista" DecoratedControls="All" />
<asp:DetailsView ID="DetailsView1" DataKeyNames="EmployeeID" runat="server" AutoGenerateRows="False" DataSourceID="SqlDataSource1" Height="50px" Width="125px" OnItemCommand="DetailsView1_ItemCommand" BorderWidth="0" CellPadding="0" CellSpacing="7" GridLines="None" OnItemUpdating="DetailsView1_ItemUpdating">
    <Fields>
        <asp:BoundField DataField="FirstName" HeaderText="FirstName" SortExpression="FirstName" />
        <asp:BoundField DataField="LastName" HeaderText="LastName" SortExpression="LastName" />
        <asp:BoundField DataField="Title" HeaderText="Title" SortExpression="Title" />
        <asp:CommandField ShowEditButton="True" ButtonType="Button" />
        <asp:CommandField ShowInsertButton="True" ButtonType="Button" />
    </Fields>
</asp:DetailsView>
<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:ConnectionString %>"
    InsertCommand="INSERT INTO [Employees] ([LastName], [FirstName], [Title]) VALUES (@LastName, @FirstName, @Title)"
    SelectCommand="SELECT [EmployeeID], [FirstName], [LastName], [Title] FROM [Employees] WHERE ([EmployeeID] = @EmployeeID)"
    UpdateCommand="UPDATE [Employees] SET [LastName] = @LastName, [FirstName] = @FirstName, [Title] = @Title WHERE [EmployeeID] = @EmployeeID">
    <InsertParameters>
        <asp:Parameter Name="LastName" Type="String" DefaultValue="" ConvertEmptyStringToNull="false" />
        <asp:Parameter Name="FirstName" Type="String" DefaultValue="" ConvertEmptyStringToNull="false" />
        <asp:Parameter Name="Title" Type="String" />
    </InsertParameters>
    <UpdateParameters>
        <asp:Parameter Name="LastName" Type="String" DefaultValue="" ConvertEmptyStringToNull="false" />
        <asp:Parameter Name="FirstName" Type="String" DefaultValue="" ConvertEmptyStringToNull="false" />
        <asp:Parameter Name="Title" Type="String" />
        <asp:Parameter Name="EmployeeID" Type="Int32" />
    </UpdateParameters>
    <SelectParameters>
        <asp:QueryStringParameter Name="EmployeeID" QueryStringField="EmployeeID" Type="Int32" />
    </SelectParameters>
</asp:SqlDataSource>

EditFormCS.cs:

protected override void OnInit(EventArgs e)
{
    base.OnInit(e);

    if (Request.QueryString["employeeid"] == null)
    {
        DetailsView1.DefaultMode = DetailsViewMode.Insert;
    }
    else
    {
        DetailsView1.DefaultMode = DetailsViewMode.Edit;
    }
    this.Page.Title = "Editing record";
}

protected void DetailsView1_ItemCommand(object sender, DetailsViewCommandEventArgs e)
{
    if (e.CommandName == "Update")
    {
        ClientScript.RegisterStartupScript(Page.GetType(), "mykey", "CloseAndRebind();", true);
    }
    else if (e.CommandName == "Insert")
    {
        ClientScript.RegisterStartupScript(Page.GetType(), "mykey", "CloseAndRebind('navigateToInserted');", true);
    }
    else
    {
        ClientScript.RegisterStartupScript(Page.GetType(), "mykey", "CancelEdit();", true);
    }
}

protected void DetailsView1_ItemUpdating(object sender, DetailsViewUpdateEventArgs e)
{
    //logic to truncate long string to prevent SQL error
    for (int i = 1; i < 4; i++)
    {
        string val = e.NewValues[i - 1].ToString();
        int maxLength = i * 10;
        if (val.Length > maxLength) e.NewValues[i - 1] = val.Substring(0, maxLength);
    }
}

Thanks,
Princy