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

User Control with event dynamic creation and ajaxifying it

3 Answers 207 Views

Ajax

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

Geoff asked on 30 Oct 2015, 07:01 PM

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:

<html xmlns="http://www.w3.org/1999/xhtml">

<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

}

3 Answers, 1 is accepted

answered on 05 Nov 2015, 08:04 PM

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);

}