The Self-Taught Programmer

Recipes from real-world experience with asp.net.

Posts Tagged ‘Callback

How To Process a Portion of a Form via Callback and Display a Results Message Using DevExpress Controls

leave a comment »

The Situation:

You have an ASP.NET page with multiple form sections, and you want to process only one section when an ASPxButton control is clicked. You also want to display a status message after processing.

A Solution:

This should be basic Ajax-type stuff, but as I am a self-taught programmer, I came to this late. Also, I am using DevExpress controls in my current application, which function a bit differently than standard Ajax. Without Ajax, you would just process the page on postback and set the results label in the code-behind. However, using a callback rather than postback is a great way to process only a portion of the page.

Many of the DevExpress controls have an CallbackComplete client-side event, so you would handle the callback event, return a result to the control, and use the CallbackComplete event to set the results message label’s text value.

However, the ASPxButton does NOT have an CallbackComplete event that you can use (inconvenient!). The way around this is to use an ASPxCallback control.

1) Add an ASPxCallback control to your page. Add text to the control’s client-side CallbackComplete event to update the results label.

<dx:ASPxCallback ID="cbSaveResults" runat="server" ClientInstanceName="cbSaveResults" OnCallback="cbSaveResults_Callback">
	<ClientSideEvents CallbackComplete="function(s, e) {
				lblResults.SetText(e.result);
			}" />
</dx:ASPxCallback>

 
2) Add a method to the code-behind to handle the callback:

protected void cbSaveResults_Callback(object source, DevExpress.Web.ASPxCallback.CallbackEventArgs e)
{
	string returnMessage = "";

	try
	{
		// PUT CODE HERE TO PROCESS THE FORM

		returnMessage = "Your Changes have been saved.";
	}
	catch (Exception ex)
	{
		returnMessage = String.Format("There was a problem saving your changes. The error message was '{0}'", ex.Message);
	}

	e.Result = returnMessage;
}

 
3) Finally, add an ASPxButton to your page and add code to its client-side Click event to call the ASPxCallback control’s server-side OnCallback event (and blank the results label). Don’t forget to set the ASPxButton’s AutoPostBack=”False”!

<dx:ASPxButton ID="btnSaveResults" runat="server" Text="Save" AutoPostBack="False">
	<ClientSideEvents Click="function(s, e) {
				lblStatus.SetText('');
				cbSaveResults.PerformCallback();
			}" />
</dx:ASPxButton>

 
That’s all. When your user clicks the button, the ASPxButton actually throws the processing over to the ASPxCallback control, which then finishes and updates the results label. ALMOST as good as if DevExpress had included the functionality into the ASPxButton itself.

Advertisements

Written by Jim McMullen

July 18, 2013 at 4:20 pm

How To Perform a Callback on an ASPxGridLookup Control

with one comment

The Situation:

You have a DevExpress ASPxGridLookup control on your page and need to update its contents when some event occurs (such as a parent drop-down value changes). The problem is that the ASPxGridLookup control does not implement an OnCallback event.

A Solution:

First of all, this is not my solution. I found it on the DevExpress support site. It took me a while to find it, and to decode it, so I am putting it here so that I will be able to find it easier next time. I am also going to outline what is happening and why it works. The original solution was posted here.

There are two main ways to go about this. The first is to embed the ASPxGridLookup in an ASPxCallbackPanel. This is the first one that comes to mind, but there is an even simpler solution that involves adding a custom callback event to the instance of the ASPxGridLookup control.

Here is an ASPxGridLookup control on an aspx page:

<dx:ASPxGridLookup ID="ASPxGridLookup1" runat="server" ClientInstanceName="ASPxGridLookup1"
	TextFormatString="{0}" KeyFieldName="ProdId"
	AutoGenerateColumns="False" oninit="ASPxGridLookup1_Init">
	<GridViewProperties>
		<SettingsBehavior AllowFocusedRow="True" AllowSelectSingleRowOnly="True" />
		<SettingsPager Mode="ShowAllRecords">
		</SettingsPager>
	</GridViewProperties>
	<Columns>
		<dx:GridViewDataTextColumn VisibleIndex="0" FieldName="ProdId" Width="85px" Caption="ID">
		</dx:GridViewDataTextColumn>
		<dx:GridViewDataTextColumn VisibleIndex="1" FieldName="Description" Width="250px" Caption="Description">
		</dx:GridViewDataTextColumn>
	</Columns>
	<ClientSideEvents Validation="function(s,e) {if(s.GetValue()=='0') { e.isValid=false; e.errorText='Please select a Network ID.';}}" />
	<ValidationSettings SetFocusOnError="True" ErrorDisplayMode="ImageWithTooltip" ValidationGroup="Profile">
		<RequiredField IsRequired="True" ErrorText="Network ID is required" />
	</ValidationSettings>
</dx:ASPxGridLookup>

 

Then attach javascript like this to a calling control, for example when the selected item of an ASPxComboBox is changed:

<script language="javascript" type="text/javascript">
	function OnComboBoxChangedEventHandler() {
		ASPxGridLookup1.GetGridView().PerformCallback();
	}
</script>

 

Now to make this work, you have to do two things in the the code behind.

(1) The ASPxGridLookup control contains an ASPxGridView inside it (that’s what makes it such a valuable control). So you need to attach a ASPxGridViewCustomCallbackEventHandler to the ASPxGridView in the ASPxGridLookup control on init. Do that like this:

using DevExpress.Web.ASPxGridLookup;
using DevExpress.Web.ASPxGridView;

protected void ASPxGridLookup1_Init(object sender, EventArgs e)
{
	ASPxGridLookup lookup = (ASPxGridLookup)sender;
	ASPxGridView gridView = lookup.GridView;
	gridView.CustomCallback += new ASPxGridViewCustomCallbackEventHandler(ASPxGridLookup1_gridView_CustomCallback);
}

 

(2) The final step is to add the code to handle your new custom callback event handler. Do that like this:

void ddlCompProdId_gridView_CustomCallback(object sender, ASPxGridViewCustomCallbackEventArgs e)
{
	ASPxGridView gridView = (ASPxGridView)sender;
	//Put code here to requery/rebind the datasource for the ASPxGridLookup control
	...
	gridView.DataBind();
}

 

That’s all. When your user triggers the callback, it should act just the same as if DevExpress had built callback functionality into the control.

Written by Jim McMullen

May 31, 2013 at 12:50 am