This is a migrated thread and some comments may be shown as answers.

RadGrid in content page not updating

3 Answers 81 Views
Ajax
This is a migrated thread and some comments may be shown as answers.
Marcus
Top achievements
Rank 1
Marcus asked on 09 Dec 2019, 06:30 PM

Hello,

I have the following structure:

Master Page
         Master Menu
         Contentplaceholder (side bar)
         Contentplaceholder (main content)

The master menu loads content pages that have content specific navigation in the side bar.

The problem I'm having is with a content page that has a dropdown and a RadMenu in the "side bar" placeholder that are used to change selectparameters for a grid in the "main content" placeholder.
I can get a label in the "main content" to update, but the grid won't rebind. SQL server profiler shows no activity, so the rebind isn't firing for some reason.

Thx in advance for help and/or pointers !!

Mater Page

<telerik:RadScriptManager runat="server"></telerik:RadScriptManager>
<telerik:RadAjaxManager ID="AjaxMgr1" runat="server" />
    < ... some RadPageLayout directives ... >
 
        <%--Main Nav--%>   
        <telerik:RadMenu ID="RadMenu1" runat="server" RenderMode="Auto">
            <Items>
                <telerik:RadMenuItem Text="Home" NavigateUrl="Default.aspx" />
                < .. more stuff .. >
            </Items>
        </telerik:RadMenu>
 
 
                <%--Main--%>
                <telerik:LayoutRow>
                    <Columns>
 
                        <%--Sidebar--%>
                        <telerik:LayoutColumn Span="2" HiddenMd="true" HiddenSm="true" HiddenXs="true">
                            <asp:ContentPlaceHolder ID="SidebarPlaceHolder" runat="server">
                            </asp:ContentPlaceHolder>
                        </telerik:LayoutColumn>
 
                        <%--Content--%>
                        <telerik:CompositeLayoutColumn Span="10" SpanMd="12" SpanSm="12" SpanXs="12">
                            <Content>
                                <asp:panel runat="server" ID="GridPanel">
                                    <asp:ContentPlaceHolder ID="MainPlaceHolder" runat="server">
                                    </asp:ContentPlaceHolder>
                                </asp:panel>
                            </Content>
                        </telerik:CompositeLayoutColumn>
                    </Columns>
                </telerik:LayoutRow>

 

Content Page

<asp:Content ID="SBContent" ContentPlaceHolderID="SidebarPlaceHolder" Runat="Server">
    <telerik:RadAjaxManagerProxy runat="server">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="usrDD">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="GridPanel" LoadingPanelID="RadAjaxLoadingPanel1" />
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="RadMenu2">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="GridPanel" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManagerProxy>
 
    <telerik:RadDropDownList ID="usrDD" runat="server" Width="205px" ZIndex="10000" AutoPostBack="true"
        DataSourceID="employeeDS" DataValueField="idx" DataTextField="FullName" OnItemSelected="usrDD_ItemSelected">
        <Items><telerik:DropDownListItem Selected="true" Text="Select Employee" /></Items>
    </telerik:RadDropDownList>
 
    <telerik:RadMenu ID="RadMenu2" CssClass="sidebar" Flow="Vertical" runat="server" OnItemClick="RadMenu2_ItemClick" >
        <Items>
            <telerik:RadMenuItem Text="Common Systems" Value="1" Selected="true"/>
        < .. more stuff .. >
        </Items>
    </telerik:RadMenu>
 
<asp:SqlDataSource ID="employeeDS" .......
</asp:Content>
 
<asp:Content ID="MainContent" ContentPlaceHolderID="MainPlaceHolder" runat="server"
    <telerik:RadAjaxManagerProxy runat="server">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="RadGrid1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadGrid1" LoadingPanelID="RadAjaxLoadingPanel1" />
                    <telerik:AjaxUpdatedControl ControlID="SavedChangesList" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManagerProxy>
     
    <telerik:RadAjaxLoadingPanel runat="server" ID="RadAjaxLoadingPanel1"></telerik:RadAjaxLoadingPanel>
     
    <h3><asp:Label runat="server" ID="lblHeader" Text="some text" /></h3>
         
    <telerik:RadGrid RenderMode="Lightweight" ID="RadGrid1" GridLines="None" runat="server" AllowAutomaticDeletes="True"
             MasterTableView-CommandItemSettings-ShowAddNewRecordButton="false"
             AllowAutomaticInserts="true" PageSize="10" OnItemDeleted="RadGrid1_ItemDeleted" OnItemInserted="RadGrid1_ItemInserted"
             OnItemUpdated="RadGrid1_ItemUpdated" OnPreRender="RadGrid1_PreRender" AllowAutomaticUpdates="True" AllowPaging="True"
             AutoGenerateColumns="False" OnBatchEditCommand="RadGrid1_BatchEditCommand" DataSourceID="SqlDataSource1">
            <MasterTableView CommandItemDisplay="TopAndBottom" DataKeyNames="idx"
                DataSourceID="SqlDataSource1" HorizontalAlign="NotSet" EditMode="Batch" AutoGenerateColumns="False">
        < .. more grid stuff .. >
 
<asp:SqlDataSource ID="SqlDataSource1" ......
</asp:Content>

 

Content page Code

   protected void RadMenu2_ItemClick(object sender, RadMenuEventArgs e)
        {
            lblHeader.Text = e.Item.Text;
            SqlDataSource1.SelectParameters.Add("parent", e.Item.Value);
            SqlDataSource1.SelectParameters.Add("employee", usrDD.SelectedValue);
        }
 protected void usrDD_ItemSelected(object sender, DropDownListEventArgs e)
        {
            SqlDataSource1.SelectParameters.Add("employee", e.Value);
            SqlDataSource1.SelectParameters.Add("parent", RadMenu2.SelectedValue);
            RadGrid1.Rebind();
        }

3 Answers, 1 is accepted

Sort by
0
Attila Antal
Telerik team
answered on 12 Dec 2019, 12:14 PM

Hi Marcus,

The reason for this behavior is the nested ajax. 

Everything on the master page, including the ContentPlaceHolder is wrapped into AJAX, then on the content page, the controls are wrapped additionally into AJAX using AjaxManagerProxy.

More specifically, this part enables AJAX for the Panel that contains the ContentPlaceHolder.

<telerik:RadAjaxManagerProxy runat="server">
    <AjaxSettings>
        <telerik:AjaxSetting AjaxControlID="usrDD">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="GridPanel" LoadingPanelID="RadAjaxLoadingPanel1" />
            </UpdatedControls>
        </telerik:AjaxSetting>
        <telerik:AjaxSetting AjaxControlID="RadMenu2">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="GridPanel" />
            </UpdatedControls>
        </telerik:AjaxSetting>
    </AjaxSettings>
</telerik:RadAjaxManagerProxy>

 

<asp:panel runat="server" ID="GridPanel">
    <asp:ContentPlaceHolder ID="MainPlaceHolder" runat="server">
    </asp:ContentPlaceHolder>
</asp:panel>

 

Then, on the content page where the Grid is located, the Grid itself is being ajaxified again.

<telerik:RadAjaxManagerProxy runat="server">
    <AjaxSettings>
        <telerik:AjaxSetting AjaxControlID="RadGrid1">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="RadGrid1" LoadingPanelID="RadAjaxLoadingPanel1" />
                <telerik:AjaxUpdatedControl ControlID="SavedChangesList" />
            </UpdatedControls>
        </telerik:AjaxSetting>
    </AjaxSettings>
</telerik:RadAjaxManagerProxy>

You'll need to eliminate the nested structure and make sure controls are Ajaxified only once, see the following forum thread: https://www.telerik.com/forums/paging-not-work-after-the-first-click#V6RCv9jg6EqvK3rdcrWJeA

Kind regards,
Attila Antal
Progress Telerik

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Marcus
Top achievements
Rank 1
answered on 13 Dec 2019, 10:42 PM

Attila,

I have tried all the alternatives you reference in your other post and none of them achieve the desired result. Would you perhaps have a demo project available that uses Master-content pages with a grid in a placeholder that I can use as a reference?

Thx in advance - M.

0
Attila Antal
Telerik team
answered on 16 Dec 2019, 01:26 PM

Hi Marcus,

Below you can find an tow examples. One for showing how to enable AJAX for controls individually on the MasterPage, ContentPage and WebUserControl. The second example shows how to enable AJAX for ContentPage and their child controls from Master.

Enable AJAX individually for controls on the MasterPage, ContentPage and WebUserControl.

MasterPage.master

 

<%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>
<!DOCTYPE html>
<html>
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
            <Scripts>
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />
            </Scripts>
        </telerik:RadScriptManager>

        <%--AjaxManager for few controls on the Page, except for ContentPlaceHolder--%>
        <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
            <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="RadButton1">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="Label1" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
            </AjaxSettings>
        </telerik:RadAjaxManager>

         <%--Other Controls--%>
        <telerik:RadButton runat="server" ID="RadButton1" Text="Update Time (MasterPage)" AutoPostBack="true" OnClick="RadButton1_Click" />
        <asp:Label ID="Label1" runat="server" Text=""></asp:Label>
        <br />
        <%--ContentPage.aspx in the PlaceHolder will be Ajaxified on its own --%>
        <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
        </asp:ContentPlaceHolder>
    </form>
</body>
</html>

 

 

MasterPage.master.cs

 

using System;

public partial class MasterPage : System.Web.UI.MasterPage
{
    protected void RadButton1_Click(object sender, EventArgs e)
    {
        Label1.Text = DateTime.Now.ToLongTimeString();
    }
}

 

 

ContentPage.aspx

 

<%@ Page Language="C#" AutoEventWireup="true" MasterPageFile="~/MasterPage.master" CodeFile="ContentPage.aspx.cs" Inherits="ContentPage" %>

<%@ Register Src="~/WebUserControl.ascx" TagPrefix="uc1" TagName="WebUserControl" %>

<asp:Content ID="Content1" runat="server" ContentPlaceHolderID="ContentPlaceHolder1">
    <%--RadAjaxManagerProxy for controls on ContentPage except for UserControl--%>
    <telerik:RadAjaxManagerProxy ID="RadAjaxManager1" runat="server">
         <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="RadButton2">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="Label2" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
            </AjaxSettings>
    </telerik:RadAjaxManagerProxy>

    <telerik:RadButton ID="RadButton2" runat="server" Text="Update Time (ContentPage)" OnClick="RadButton2_Click"></telerik:RadButton>
    <asp:Label ID="Label2" runat="server" Text=""></asp:Label>
    <br />
    <%-- WebUserControl will be Ajaxified separately on its own --%>
    <uc1:WebUserControl runat="server" ID="WebUserControl" />
</asp:Content>

 

 

ContentPage.aspx.cs

 

using System;

public partial class ContentPage : System.Web.UI.Page
{
    protected void RadButton2_Click(object sender, EventArgs e)
    {
        Label2.Text = DateTime.Now.ToLongTimeString();
    }
}

 

 

WebUserControl.ascx

 

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="WebUserControl.ascx.cs" Inherits="WebUserControl" %>

<telerik:RadAjaxManagerProxy ID="RadAjaxManager1" runat="server">
    <AjaxSettings>
        <telerik:AjaxSetting AjaxControlID="RadButton3">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="Label3" />
            </UpdatedControls>
        </telerik:AjaxSetting>
    </AjaxSettings>
</telerik:RadAjaxManagerProxy>

<telerik:RadButton ID="RadButton3" runat="server" Text="Update Time (WebUserControl)" OnClick="RadButton3_Click"></telerik:RadButton>
<asp:Label ID="Label3" runat="server" Text=""></asp:Label>

 

 

WebUserControl.ascx.cs

 

using System;
public partial class WebUserControl : System.Web.UI.UserControl
{
    protected void RadButton3_Click(object sender, EventArgs e)
    {
        Label3.Text = DateTime.Now.ToLongTimeString();
    }
}

 

 

Enable AJAX for all ContentPages and their child controls

MasterPage.master

 

<%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>

<!DOCTYPE html>
<html>
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
            <Scripts>
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />
            </Scripts>
        </telerik:RadScriptManager>

        <%--Enable AJAX for Panel which contains controls from masterPage, the entire ContentPage and also the WebUserControl --%>
        <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
            <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="Panel1">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="Panel1" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
            </AjaxSettings>
        </telerik:RadAjaxManager>

        <asp:Panel ID="Panel1" runat="server">
            <telerik:RadButton runat="server" ID="RadButton1" Text="Update Time (MasterPage)" AutoPostBack="true" OnClick="RadButton1_Click" />
            <asp:Label ID="Label1" runat="server" Text=""></asp:Label>
            <br />
            <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
            </asp:ContentPlaceHolder>
        </asp:Panel>
    </form>
</body>
</html>

 

 

ContentPage.aspx

 

<%@ Page Language="C#" AutoEventWireup="true" MasterPageFile="~/MasterPage.master" CodeFile="ContentPage.aspx.cs" Inherits="ContentPage" %>

<%@ Register Src="~/WebUserControl.ascx" TagPrefix="uc1" TagName="WebUserControl" %>

<asp:Content ID="Content1" runat="server" ContentPlaceHolderID="ContentPlaceHolder1">
    <telerik:RadButton ID="RadButton2" runat="server" Text="Update Time (ContentPage)" OnClick="RadButton2_Click"></telerik:RadButton>
    <asp:Label ID="Label2" runat="server" Text=""></asp:Label>
    <br />
    <uc1:WebUserControl runat="server" ID="WebUserControl" />
</asp:Content>

 

 

WebUserControl.ascx

 

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="WebUserControl.ascx.cs" Inherits="WebUserControl" %>

<telerik:RadButton ID="RadButton3" runat="server" Text="Update Time (WebUserControl)" OnClick="RadButton3_Click"></telerik:RadButton>
<asp:Label ID="Label3" runat="server" Text=""></asp:Label>

 

 

The same theory applies for other controls as well.

 

Kind regards,
Attila Antal
Progress Telerik

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
Ajax
Asked by
Marcus
Top achievements
Rank 1
Answers by
Attila Antal
Telerik team
Marcus
Top achievements
Rank 1
Share this question
or