Refresh RadGrid when using RadAjaxManagerProxy

5 posts, 0 answers
  1. Yefta
    Yefta avatar
    14 posts
    Member since:
    Mar 2015

    Posted 25 May 2015 Link to this post

    Hai, i want to ask something about RadGrid and RadAjaxManagerProxy

    I'm have a webpage that contains 4 usercontrol. each usercontrol has RadGrid

    so i'm using RadAjaxManager in webpage and RadAjaxManagerProxy in usercontrol to handle the ajax.

    my problem is when i edit/insert RadGrid at usercontrol1, every RadGrid in webpage is refreshing.

    How to make only 1 RadGrid refreshed when i edit/insert? not every RadGrid.

    Here's my code:

    webpage.aspx

    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
    </telerik:RadAjaxManager>

    usercontrol1.ascx

    <telerik:RadAjaxLoadingPanel runat="server" ID="gridLoadingPanel" Skin="Default"></telerik:RadAjaxLoadingPanel>
    <telerik:RadAjaxManagerProxy ID="RadAjaxManagerProxy1" runat="server">
        <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:RadAjaxManagerProxy>
     

    usercontrol2.ascx

     

    <telerik:RadAjaxLoadingPanel runat="server" ID="gridLoadingPanel2" Skin="Default"></telerik:RadAjaxLoadingPanel>
    <telerik:RadAjaxManagerProxy ID="RadAjaxManagerProxy2" runat="server">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="RadAjaxManager1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadGrid2" LoadingPanelID="gridLoadingPanel2"></telerik:AjaxUpdatedControl>
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="RadGrid2">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadGrid2" LoadingPanelID="gridLoadingPanel2"></telerik:AjaxUpdatedControl>
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManagerProxy>

    usercontrol3.ascx

     

    <telerik:RadAjaxLoadingPanel runat="server" ID="gridLoadingPanel3" Skin="Default"></telerik:RadAjaxLoadingPanel>
    <telerik:RadAjaxManagerProxy ID="RadAjaxManagerProxy1" runat="server">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="RadAjaxManager1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadGrid3" LoadingPanelID="gridLoadingPanel3"></telerik:AjaxUpdatedControl>
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="RadGrid3">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadGrid3" LoadingPanelID="gridLoadingPanel3"></telerik:AjaxUpdatedControl>
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManagerProxy>

    usercontrol.ascx

    <telerik:RadAjaxLoadingPanel runat="server" ID="gridLoadingPanel4" Skin="Default"></telerik:RadAjaxLoadingPanel>
    <telerik:RadAjaxManagerProxy ID="RadAjaxManagerProxy1" runat="server">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="RadAjaxManager1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadGrid4" LoadingPanelID="gridLoadingPanel4"></telerik:AjaxUpdatedControl>
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="RadGrid3">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadGrid4" LoadingPanelID="gridLoadingPanel4"></telerik:AjaxUpdatedControl>
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManagerProxy>

    Thank you in advance

  2. Brett
    Brett avatar
    42 posts
    Member since:
    Aug 2014

    Posted 26 May 2015 Link to this post

    how are you declaring and handling the edit and insert in your usercontrol?.. 

    why are you defining the grids to update when the ajax manager is updated?
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Brett
    Brett avatar
    42 posts
    Member since:
    Aug 2014

    Posted 26 May 2015 Link to this post

    Here is a method to refresh the update control of the targeted ajaxcontrol.

    <telerik:RadScriptBlock id="ScriptBlock1" runat="server">
    <script>
    function getAjaxManager()
    {
       return $find("<%= RadAjaxManager1.ClientID %>");
    }
     
    function get_radGrid1_uniqueId()
    {
       return "<%= RadGrid1.UniqueID %>";
    }
    </script>
    </telerik:RadScriptBlock>
     
     
    getAjaxManager().ajaxRequestWithTarget(get_radGrid1_uniqueId(), "")


    this isn't an all encompassing answer though, because I'm not entirely sure how one captures and handles these targeted requests..

  5. Brett
    Brett avatar
    42 posts
    Member since:
    Aug 2014

    Posted 26 May 2015 Link to this post

    ah.. I missed the fine print on http://www.telerik.com/help/aspnet-ajax/ajax-client-side-api.html

    you'll have to override the OnRequestPostback event to capture and handle the resulting event/postback of using 'ajaxRequestWithTarget(eventTarget, eventArg)'



    <telerik:RadScriptBlock id="ScriptBlock1" runat="server">
    <script>
    function getAjaxManager()
    {
       return $find("<%= RadAjaxManager1.ClientID %>");
    }
      
    function get_radGrid1_uniqueId()
    {
       return "<%= RadGrid1.UniqueID %>";
    }
     
    function OnSomeClientEvent(sender, e)
    {
       var payload = {
          "MyCommandName" : "CustomCommand",
          "MyCommandArg" : "hello world"
       }
       getAjaxManager().ajaxRequestWithTarget(get_radGrid1_uniqueId(), JSON.stringify(payload));
    }
    </script>
    </telerik:RadScriptBlock>


    Page Code-Behind
    public partial class Default : System.Web.UI.Page
    {
       public override void RaisePostBackEvent(IPostBackEventHandler sourceControl, string eventArgument)
       {
          base.RaisePostBackEvent(sourceControl, eventArgument); //sourceControl will be the RadGrid instance
     
          System.Web.Script.Serialization.JavaScriptSerializer serializer = new System.Web.Script.Serialization.JavaScriptSerializer();
          var data = serializer.Deserialize<MyTargetEventArg>(eventArgument);
     
          if (data.MyCommandName == "CustomCommand")
          {
             //Do Something
          }
       }
    }
     
    public class MyTargetEventArg
    {
       public string MyCommandName { get; set; }
       public string MyCommandArgument { get; set; }
    }
  6. Brett
    Brett avatar
    42 posts
    Member since:
    Aug 2014

    Posted 26 May 2015 in reply to Brett Link to this post

    bah.. 

    typo
    MyCommandArg  &  MyCommandArgument should be consistent (one or the other)..

    also, needs a semi-colon (;) behind the 'payload' variable declaration in the OnSomeClientEvent.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017