User Control with event dynamic creation and ajaxifying it

4 posts, 0 answers
  1. Geoff
    Geoff avatar
    27 posts
    Member since:
    May 2012

    Posted 30 Oct 2015 Link to this post

    I have a user control creates a control which includes a RadDateTimePicker. The datetimepicker has a SelectedDateChanged event that fires and runs the code accordingly. Since it is dynamically created, I need to dynamically add it to the RadAjaxManager that already exists. My current approach doesn't seem to work, and I get a full postback.

     

    User Control

     

    public partial class CategoryHolder : System.Web.UI.UserControl
        {
            public string _category;
            public string _mptt;
            public DateTime _startDate;
            public DateTime _endDate;
            public EventHandler startDateChanged;
            public EventHandler endDateChanged;
     
     
            public string Category
            {
                get
                {
                    return _category;
                }
     
                set
                {
                    _category = value;
     
     
                }
            }
     
            public string MPTT
            {
                get
                {
                    return _mptt;
                }
     
                set
                {
                    _mptt = value;
                    
     
                }
            }
     
            public DateTime StartDate
            {
                get
                {
                    return _startDate;
                }
     
                set
                {
                    _startDate = value;
                     
     
                }
            }
     
            public DateTime EndDate
            {
                get
                {
                    return _endDate;
                }
     
                set
                {
                    _endDate = value;
                     
                }
            }
     
            protected void Page_Init(object sender, EventArgs e)
            {
     
            }
     
            protected void Page_Load(object sender, EventArgs e)
            {
                Label lbl = new Label();
                HiddenField hf = new HiddenField();
                RadDateTimePicker start = new RadDateTimePicker();
                RadDateTimePicker end = new RadDateTimePicker();
     
                start.AutoPostBack = true;
                start.SelectedDateChanged += new Telerik.Web.UI.Calendar.SelectedDateChangedEventHandler(start_SelectedDateChanged);
                start.ClientIDMode = System.Web.UI.ClientIDMode.Static;
                start.ID = MPTT + "StartControl";
                start.DatePopupButton.Visible = false;
                start.TimePopupButton.Visible = false;
     
                end.AutoPostBack = true;
                end.SelectedDateChanged += new Telerik.Web.UI.Calendar.SelectedDateChangedEventHandler(end_SelectedDateChanged);
                end.ClientIDMode = System.Web.UI.ClientIDMode.Static;
                end.ID = MPTT + "EndControl";
                end.DatePopupButton.Visible = false;
                end.TimePopupButton.Visible = false;
                 
     
                lbl.Text = Category;
                hf.Value = MPTT;
                start.SelectedDate = StartDate;
                end.SelectedDate = EndDate;
     
                this.Controls.Add(lbl);
                this.Controls.Add(hf);
                this.Controls.Add(start);
                this.Controls.Add(end);
     
            }
     
     
            void start_SelectedDateChanged(object sender, Telerik.Web.UI.Calendar.SelectedDateChangedEventArgs e)
            {
                if (this.startDateChanged != null)
                {
                    this.startDateChanged(this, e);
                }
            }
     
            void end_SelectedDateChanged(object sender, Telerik.Web.UI.Calendar.SelectedDateChangedEventArgs e)
            {
                if (this.endDateChanged != null)
                {
                    this.endDateChanged(this, e);
                }
            }
        }

     

    Test Page using control:

     

    <head runat="server">
        <title></title>
    </head>
    <body>
        <form id="form1" runat="server">
        <telerik:RadScriptManager ID="rsm" runat="server"></telerik:RadScriptManager>
        <telerik:RadAjaxManager ID="ram" runat="server"></telerik:RadAjaxManager>
        <div>
        <asp:PlaceHolder ID="Placeholder" runat="server"></asp:PlaceHolder>
        </div>
        </form>
    </body>
    </html>

    Test Page C#:

    protected void Page_Load(object sender, EventArgs e)
     {
         CategoryHolder ch = new CategoryHolder();
     
         ch.Category = "Test Category";
         ch.MPTT = "dfdfdopfksdopfsdop";
         ch.StartDate = DateTime.Today;
         ch.EndDate = DateTime.Today.AddDays(5);
         ch.startDateChanged += new EventHandler(startPicker_SelectedDateChanged);
     
         RadAjaxManager manager = RadAjaxManager.GetCurrent(Page);
         RadAjaxLoadingPanel loadingPanel = new RadAjaxLoadingPanel();
     
         Placeholder.Controls.Add(ch);
     
         manager.AjaxSettings.AddAjaxSetting(ch, ch, loadingPanel);
         manager.AjaxSettings.AddAjaxSetting(ch, Placeholder, loadingPanel);
     }
     
     void startPicker_SelectedDateChanged(object sender, EventArgs e)
     {
         //Yay it runs, but on a full postback
     }

  2. Eyup
    Admin
    Eyup avatar
    3014 posts

    Posted 03 Nov 2015 Link to this post

    Hi Geoff,

    Try applying the programmatic settings during the PreRender event handler of the picker control:
    http://docs.telerik.com/devtools/aspnet-ajax/controls/ajax/radajaxmanager/how-to/add-ajaxsettings-programmatically

    Hope this helps.

    Regards,
    Eyup
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Geoff
    Geoff avatar
    27 posts
    Member since:
    May 2012

    Posted 05 Nov 2015 Link to this post

    Thanks. That did help with getting the ajax to work. However, the loadingpanel doesn't give any visual response. Load times on occasion can take a bit so a visual load trigger is much needed.

     

    protected void Page_PreRender(object sender, EventArgs e)
    {
        RadAjaxManager manager = RadAjaxManager.GetCurrent(Page);
        RadAjaxLoadingPanel loadingPanel = new RadAjaxLoadingPanel();
     
        foreach (HtmlGenericControl containerDiv in CateogriesAddPlaceHolder.Controls)
        {
           foreach (CategoryHolder ch in containerDiv.Controls)
           {
                   RadDateTimePicker startPicker = (RadDateTimePicker)ch.FindControl(ch.MPTT + "StartControl");
     
                   manager.AjaxSettings.AddAjaxSetting(startPicker, CateogriesAddPlaceHolder, loadingPanel, UpdatePanelRenderMode.Inline);
                   manager.AjaxSettings.AddAjaxSetting(startPicker, startPicker, loadingPanel, UpdatePanelRenderMode.Inline);
     
           }
        }
    }

  5. Maria Ilieva
    Admin
    Maria Ilieva avatar
    4017 posts

    Posted 10 Nov 2015 Link to this post

    Hi,

    Try adding a Skin for the RadAjaxLoadingPanel and see how this will work.

    Regards,
    Maria Ilieva
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top