Refresh RadGrid on RadWindow close.

7 posts, 1 answers
  1. Anly
    Anly avatar
    14 posts
    Member since:
    Feb 2013

    Posted 14 Feb 2013 Link to this post

    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.
  2. Answer
    Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 15 Feb 2013 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Anly
    Anly avatar
    14 posts
    Member since:
    Feb 2013

    Posted 15 Feb 2013 Link to this post

    Thanks princy for your valuable solution. This worked fine and helps me to sort out the issue.
  5. sf
    sf avatar
    103 posts
    Member since:
    Apr 2009

    Posted 03 Sep 2013 Link to this post

    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
  6. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 04 Sep 2013 Link to this post

    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.
  7. sf
    sf avatar
    103 posts
    Member since:
    Apr 2009

    Posted 04 Sep 2013 Link to this post

    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
  8. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 05 Sep 2013 Link to this post

    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.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017