RadWindow to refresh usercontrol's grid

[Darshan Sedani]

Hi,

I have a page which contain 5 user controls in it. In each user control i am using Rad Window to insert master data.  On closing i need to display that inserted data in its respective user control so i want to update that user control only. Currently i am reloading whole page to update respective Grid resides in the user control so because of that all user controls get refreshed and page gets slow.

Can you some provide example.

Thanks.

[Shinu]

Hi Darshan Sedani,

Please have a look into the sample code snippet which works fine at my end.

ASPX:

<asp:Label ID="lblHead" runat="server" Text="UserControlPage1">
</asp:Label>
<uc1:Grid1 ID="Grid11" runat="server" />
<br />
<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
</telerik:RadAjaxManager>

ASPX.CS:

protected void Page_Load(object sender, EventArgs e)
{
    RadGrid Grid1 = (RadGrid)Grid11.FindControl("RadGrid1");
    RadAjaxManager1.AjaxSettings.AddAjaxSetting(Grid11, Grid1);
}

UserControlPage ASCX:

<telerik:RadGrid 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>
        </Columns>
        <CommandItemTemplate>
            <a href="#" onclick="return ShowInsertForm();">Add New Record</a>
        </CommandItemTemplate>
    </MasterTableView>
    <ClientSettings>
        <Selecting AllowRowSelect="true"></Selecting>
    </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" Modal="true">
            <ContentTemplate>
                <asp:DetailsView ID="DetailsView1" DataKeyNames="EmployeeID" runat="server" AutoGenerateRows="False" DataSourceID="SqlDataSource2" Height="50px" Width="125px" OnItemCommand="DetailsView1_ItemCommand" 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" />
                        <asp:CommandField ShowInsertButton="True" ButtonType="Button" />
                    </Fields>
                </asp:DetailsView>
                <asp:SqlDataSource ID="SqlDataSource2" runat="server" ConnectionString="<%$ ConnectionStrings:ConnectionString %>" InsertCommand="INSERT INTO [Employees] ([LastName], [FirstName], [Title]) VALUES (@LastName, @FirstName, @Title)">
                    <InsertParameters>
                        <asp:Parameter Name="LastName" Type="String"  ConvertEmptyStringToNull="false" />
                        <asp:Parameter Name="FirstName" Type="String"  ConvertEmptyStringToNull="false" />
                        <asp:Parameter Name="Title" Type="String" />
                    </InsertParameters>
                </asp:SqlDataSource>
            </ContentTemplate>
        </telerik:RadWindow>
    </Windows>
</telerik:RadWindowManager>
<telerik:RadAjaxManagerProxy ID="RadAjaxManagerProxy1" runat="server">
    <AjaxSettings>
        <telerik:AjaxSetting AjaxControlID="RadAjaxManager1">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="RadGrid1"></telerik:AjaxUpdatedControl>
            </UpdatedControls>
        </telerik:AjaxSetting>
        <telerik:AjaxSetting AjaxControlID="RadGrid1">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="RadGrid1"></telerik:AjaxUpdatedControl>
            </UpdatedControls>
        </telerik:AjaxSetting>
    </AjaxSettings>
</telerik:RadAjaxManagerProxy>
<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:ConnectionString %>" SelectCommand="SELECT [EmployeeID], [FirstName], [LastName], [Title] FROM [Employees]">
</asp:SqlDataSource>

UserControlPage ASCX.CS:

protected void DetailsView1_ItemCommand(object sender, DetailsViewCommandEventArgs e)
{
    if (e.CommandName == "Insert")
    {
        string script = "function f(){CloseAndRebind('navigateToInserted'); Sys.Application.remove_load(f);}Sys.Application.add_load(f);";
        ScriptManager.RegisterStartupScript(Page, Page.GetType(), "key", script, true);
    }
}
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";
}

UserControlPage JavaScript:

function ShowInsertForm() {
    $find("<%=UserListDialog.ClientID%>").show();
    return false;
}
function CloseAndRebind(args) {
    $find("<%=UserListDialog.ClientID%>").close();
}

Thanks,
Shinu.