Monday, October 15, 2012

ASPxPopUpControl from DevExpress in a GridView in ASP.Net 4.0

Well… I didn’t think it was humanly possible but someone has finally wrote documentation that is worse than anything Microsoft has out so far.  DevExpress if documentation were computers, you’d be the proud owner of a solar calculator.  Yes, honestly your documentation sucks that bad. 
I actually found a request where the user asked if it was possible to program the ASPxPopupControl from code behind and the moderator answered absolutely yes and pointed to an article that showed how to do it in Javascript.  Awesome.  You can view the Support Request Here.  You just can’t make this stuff up…
BTW DexExpress, I am being sincerely honest when I say you have some awesome videos in your documentation… except… Who in the hell (that considers themselves a professional programmer) develops in design mode?  I’ll go ahead and answer that for you – NO ONE!!
Design mode is like AOL for the internet.  It is where all the kindergartners hang out.  Seriously, why would you make a getting started video on how to program a control and include absolutely NO CODE… Take it out of kindergarten and show some code, eh?

Anyways, we are going to accomplish what the user originally wanted in the first place.  We are going to open an ASPxPopupControl from a GridView.
In this particular instance, I had a requirement for work where they wanted an announcement board on our intranet site.  So it will display date of post and the posts title.  The title will be clickable so that we know they want more information and will open the popup with all the information inside.  The ASPxPopupControl is specifically designed for this task.  In fact, we can use the control for a number of options, however the scope of this article is the one listed above.  So let’s get programming…

Our first order of business? Let’s start up a new website and add a gridview like the one that follows:
<asp:GridView ID="gdvMessages" runat="server" AutoGenerateColumns="false" 
BorderWidth="0" ShowHeader="false" AllowPaging="true"
PageSize="8" GridLines="None" DataKeyNames="MessageID">
asp:BoundField ItemStyle-Font-Italic="true"
DataFormatString="{0:M/d/yyyy}" DataField="StartDate" />
asp:ButtonField DataTextField="MessageSubject"
CommandName="popupWindow" ItemStyle-Font-Bold="true" />

Just your basic gridview.  Notice that we have one BoundField and one ButtonField that has a CommandName property defined as “popupWindow”.  Now, directly below that, add a label and the ASPxPopupControl:

<asp:Label ID="lblTitle" runat="server" />
dx:aspxpopupcontrol id="ASPxPopupControl1" runat="server"
popupelementid="lblTitle" closeaction="CloseButton"
popupverticalalign="WindowCenter" scrollbars="Auto" modal="True"
popuphorizontalalign="WindowCenter" allowdragging="True" allowresize="True"
maxheight="600px" maxwidth="800px" width="800px" height="400px"
theme="Office2003Blue" showfooter="True">
HeaderImage Url="images/favicon.ico" />

There are a lot of properties I have defined here.  The most important would of course be that the label DOES NOT have any text assigned.  This is on purpose, it renders it hidden on the page.  Secondly, the ASPxPopupControl popupelementid is set to the label.  Thus, unless invoked programmatically in the code behind, the popup will never render.  The rest of the properties effect position and such.

Now all we have left to do is make the control render.  We need to do this in the RowCommand event of the GridView:

Protected Sub gdvMessages_RowCommand(sender As Object, _
e As System.Web.UI.WebControls.GridViewCommandEventArgs)
Handles gdvMessages.RowCommand
If e.CommandName = "popupWindow" AndAlso e.CommandArgument <> Nothing Then
rowIndex As Integer = Convert.ToInt32(e.CommandArgument)
Dim key As String = gdvMessages.DataKeys(rowIndex).Values(0).ToString()
Dim mess As MessageBoardDetails = New MessageBoardDetails

mess.MessageID = key
Dim popup As ASPxPopupControl = _
DirectCast(Page.FindControl("ASPxPopupControl1"), ASPxPopupControl)
Dim l As Literal = New Literal
'l is a literal and you are setting the Text property
'to what you want to see in the body of the popup
l.Text = mess.MessageText
'This is the window title
popup.HeaderText = mess.MessageSubject
'You can add text to the footer also
popup.FooterText = String.Empty
popup.ShowOnPageLoad = True
End If
End Sub

Obviously here we are using the RowCommand event of the GridView.  Then we are checking to make sure our command name is the one we want.

From there we are obtaining the rowIndex of the title that was clicked on.

We need to get our key because in the next line, we are calling a class that performs ADO.Net and gets the values that we need to populate the popup and puts them in the mess object.

Then we are dimensioning an ASPxPopUpControl and DirectCasting the one we created in the HTML to populate our dimensioned variable. 
Here we create a literal so that I can populate it with HTML or general text for the announcement which is in the mess.MessageText.  We could also say l.Text = “Chad was here”.  Whatever we want to show in the body of the popup.  We then add the control to the popup control.  Add some header and footer text.  Then we make the popup show.


Simple stuff right?

We’ll look at some other DevExpress products as time pogresses.  These are very interesting controls and have a lot of power behind them.  I’m lucky enough that the firm I work for bought a package, and I get to learn them.  Telerik products seem a lot harder to work with and program, but their documentation is light years beyond DevExpress. 
There is another drawback to the DevExpress documentation.  Before you can find the documentation for the specific control you are working on, you have to know how they categorize them.  Sure, it would be common sense to see the ASPxMenu in the Navigation category.  Where would you expect to see the ASPxTreeView?  Is it in Navigation or Data?  So you spend a little time looking around for the specific control you want.  And then there is even a catch all category called ASPxExperience.  So after hunting around and guessing where the control would be, you finally check there.

So tired of amateurish documentation.  Companies spend all their time developing controls and no time documenting.  I am a die hard documenter.  I document it all, from the perspective of a programmer who has never seen my code before.  Why is it so hard for a company with a team of programmers to make some half decent documentation?


Håþþ¥ .ñꆆïñg…

1 comment: