Refresh RadGrid on RadWindow close.

[Anly]

Hi,

I am facing an issue with radgrid refreshing. I am updating one of my grid field values through a RadWindow and once I press the update button inside the RadWindow, it closes but the change is not replected in the Grid.

Please provide help,
Anly.

[Princy]

Hi Anly,

Please take a look into the following code I tried to update a RadGrid using a RadWindow. I have used an asp:DetailView as the Editform for the Parent radgrid. I have used a Javascript function which can be invoked in the ItemCommand event of the DetailView in order to refresh the RadGrid as in this Demo.

Javascript:

<script type="text/javascript">
    function CloseAndRebind(args) {
        GetRadWindow().BrowserWindow.refreshGrid(args);
        GetRadWindow().close();
    }

    function GetRadWindow() {
        var oWindow = null;
        if (window.radWindow) oWindow = window.radWindow;
        else if (window.frameElement.radWindow) oWindow = window.frameElement.radWindow;
        return oWindow;
    }
</script>

C#:

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

Thanks,
Princy.

[Anly]

Thanks princy for your valuable solution. This worked fine and helps me to sort out the issue.

[sf]

hi Princy

My scenario is slightly further:
I navigate to the 3rd page in the RadGrid, and clicked on the ViewDetails button on a particular item to open a radwindow. After radwindow is closed, your recommended code rebinds the parent RadGrid, which is good. However after rebind the RadGrid returns to first page.

Is there a way the RadGrid can remain on 3rd page after rebind?

thanks in advance

[Shinu]

Hi sf,

When you rebind the RadGrid the page index does not change and it is not expected. As per my understanding, on clicking the ViewDetails you are viewing the details and so there is no need to rebind as rebinding is needed especially when you update or edit the information. Please have a look at the following code I tried which works fine at my end. On clicking the View button I am opening a new page View.aspx inside the RadWindow and displaying the details there using an ASP DetailsView.

ASPX:

<telerik:RadGrid OnItemCreated="RadGrid1_ItemCreated" ID="RadGrid1" runat="server"
    AllowPaging="True" Width="97%" DataSourceID="SqlDataSource1">
    <PagerStyle Mode="NumericPages"></PagerStyle>
    <MasterTableView AutoGenerateColumns="False" DataKeyNames="EmployeeID" ClientDataKeyNames="EmployeeID"
        Width="100%" CommandItemDisplay="Top" PageSize="5">
        <Columns>
            <telerik:GridBoundColumn DataField="EmployeeID" HeaderText="EmployeeID" ReadOnly="True"
                SortExpression="EmployeeID" UniqueName="EmployeeID">
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="FirstName" HeaderText="FirstName" SortExpression="FirstName"
                UniqueName="FirstName">
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="LastName" HeaderText="LastName" SortExpression="LastName"
                UniqueName="LastName">
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="Title" HeaderText="Title" SortExpression="Title"
                UniqueName="Title">
            </telerik:GridBoundColumn>
            <telerik:GridTemplateColumn UniqueName="TemplateViewColumn">
                <ItemTemplate>
                    <asp:HyperLink ID="ViewLink" runat="server" Text="View"></asp:HyperLink>
                </ItemTemplate>
            </telerik:GridTemplateColumn>
        </Columns>
    </MasterTableView>
</telerik:RadGrid>
<telerik:RadWindowManager ID="RadWindowManager1" runat="server" EnableShadow="true">
    <Windows>
        <telerik:RadWindow ID="UserListDialog" runat="server" Title="View Record" Height="320px"
            Width="310px" Left="150px" ReloadOnShow="true" ShowContentDuringLoad="false"
            Modal="true">
        </telerik:RadWindow>
    </Windows>
</telerik:RadWindowManager>
<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString35 %>"
    SelectCommand="SELECT [EmployeeID], [FirstName], [LastName], [Title] FROM [Employees]">
</asp:SqlDataSource>

C#:

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

JavaScript:

<script type="text/javascript">
    function showRadWindow(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("View.aspx?EmployeeID=" + id, "UserListDialog");
        return false;
    }
</script>

ASPX (View.aspx)

<asp:DetailsView ID="DetailsView1" DataKeyNames="EmployeeID" runat="server" AutoGenerateRows="False"
    DataSourceID="SqlDataSource1" Height="50px" Width="125px" BorderWidth="0" CellPadding="0"
    CellSpacing="7" GridLines="None">
    <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" />
    </Fields>
</asp:DetailsView>
<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString35 %>"
    SelectCommand="SELECT [EmployeeID], [FirstName], [LastName], [Title] FROM [Employees] WHERE ([EmployeeID] = @EmployeeID)">
    <SelectParameters>
        <asp:QueryStringParameter Name="EmployeeID" QueryStringField="EmployeeID" Type="Int32" />
    </SelectParameters>
</asp:SqlDataSource>

C#:

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 = "Viewing record";
}

Thanks,
Shinu.

[sf]

hi Shinu

thanks very much for your response. The reason why I need to rebind the parent page RadGrid is that in the ViewDetails popup RadWindow I make some changes to the details, and update the record, and when I return to the parent page, I want to see the change reflected in the RadGrid.

I am still investigating why the rebind changes page index in RadGrid as you suggested it shouldn't. Any further assistance would be much appreciated.

thanks again Shino

[Shinu]

Hi sf,

You can try the following code to achieve your requirement. The RadGrid is updated as soon as it is edited and the page index is not changed upon rebinding.

ASPX:

<div>
    <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 refreshGrid(arg) {
                if (!arg) {
                    $find("<%= RadAjaxManager1.ClientID %>").ajaxRequest("Rebind");
                }
            }
        </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"
        AllowPaging="True" Width="97%" DataSourceID="SqlDataSource1">
        <PagerStyle Mode="NumericPages"></PagerStyle>
        <MasterTableView AutoGenerateColumns="False" DataKeyNames="EmployeeID" ClientDataKeyNames="EmployeeID"
            Width="100%" CommandItemDisplay="Top" PageSize="5">
            <Columns>
                <telerik:GridBoundColumn DataField="EmployeeID" HeaderText="EmployeeID" ReadOnly="True"
                    SortExpression="EmployeeID" UniqueName="EmployeeID">
                </telerik:GridBoundColumn>
                <telerik:GridBoundColumn DataField="FirstName" HeaderText="FirstName" SortExpression="FirstName"
                    UniqueName="FirstName">
                </telerik:GridBoundColumn>
                <telerik:GridBoundColumn DataField="LastName" HeaderText="LastName" SortExpression="LastName"
                    UniqueName="LastName">
                </telerik:GridBoundColumn>
                <telerik:GridBoundColumn DataField="Title" HeaderText="Title" SortExpression="Title"
                    UniqueName="Title">
                </telerik:GridBoundColumn>
                <telerik:GridTemplateColumn UniqueName="TemplateEditColumn">
                    <ItemTemplate>
                        <asp:HyperLink ID="EditLink" runat="server" Text="Edit"></asp:HyperLink>
                    </ItemTemplate>
                </telerik:GridTemplateColumn>
            </Columns>
        </MasterTableView>
    </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"
                Modal="true">
            </telerik:RadWindow>
        </Windows>
    </telerik:RadWindowManager>
    <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString35 %>"
        SelectCommand="SELECT [EmployeeID], [FirstName], [LastName], [Title] FROM [Employees]">
    </asp:SqlDataSource>
</div>

C#:

protected void RadGrid1_ItemCreated(object sender, GridItemEventArgs e)
{
    if (e.Item is GridDataItem)
    {
        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();
    }
}

ASPX :(EditForm.ASPX in RadWindow)

<div>
    <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
        <script type="text/javascript">
            function CloseAndRebind(args) {
                GetRadWindow().BrowserWindow.refreshGrid(args);
                GetRadWindow().close();
            }

            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>
    </telerik:RadCodeBlock>
    <asp:DetailsView ID="DetailsView1" DataKeyNames="EmployeeID" runat="server" AutoGenerateRows="False"
        DataSourceID="SqlDataSource1" Height="50px" Width="125px" BorderWidth="0" CellPadding="0"
        OnItemCommand="DetailsView1_ItemCommand" CellSpacing="7" GridLines="None">
        <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:NorthwindConnectionString35 %>"
        SelectCommand="SELECT [EmployeeID], [FirstName], [LastName], [Title] FROM [Employees] WHERE ([EmployeeID] = @EmployeeID)"
        UpdateCommand="UPDATE [Employees] SET [LastName] = @LastName, [FirstName] = @FirstName, [Title] = @Title WHERE [EmployeeID] = @EmployeeID">
        <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>
</div>

C#: (EditForm.CS)

protected override void OnInit(EventArgs e)
{
    base.OnInit(e);
    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
    {
        ClientScript.RegisterStartupScript(Page.GetType(), "mykey", "CancelEdit();", true);
    }
}

Thanks,
Shinu.