February 2007 - Posts

I am about to destroy a segment of code in one of my projects, but before I do, I think it can help someone:

<asp:GridView ID="gvwProjects" runat="server" ShowHeader="false" EnableTheming="false" AutoGenerateColumns="false" OnRowCreated="gvwProjects_RowCreated" BorderWidth="0px" OnSelectedIndexChanged="gvwProjects_SelectedIndexChanged">

AutoGenerateColumns="false" OnRowCreated="gvwProjects_RowCreated" BorderWidth="0px" OnSelectedIndexChanged="gvwProjects_SelectedIndexChanged">

<Columns>

<asp:TemplateField>

<asp:TemplateField><ItemTemplate>

<asp:ImageButton ID="imgProject" runat="server" ImageUrl='<%# Eval("ImageUrl") %>' ImageAlign="Left" AlternateText='<%# Eval("ImageAlternateText") %>' CommandName="Select" Style="padding-right: 15px" />

ImageAlign="Left" AlternateText='<%# Eval("ImageAlternateText") %>' CommandName="Select" Style="padding-right: 15px" />

<asp:Label ID="lblProject" runat="server" Text='<%# Eval("Abstract") %>' />

<asp:Panel ID="pnlProject" runat="server" style="display:none" ScrollBars="Horizontal" CssClass="ModalPopupPanel">

<div style="float:right;">

<asp:LinkButton ID="lnkClose" runat="server">Close</asp:LinkButton>

</div>

<asp:Label ID="lblDescription" runat="server" Text='<%# Eval("Description") %>' /><br /><br />

Teams Sent:  <asp:Label ID="lblTeamsSent" runat="server" Text='<%# Eval("TeamsSent") %>' /><br />

Volunteers: <asp:Label ID="lblPeopleVolunteered" runat="server" Text='<%# Eval("PeopleVolunteered") %>' />

</asp:Panel>

<ajax:ModalPopupExtender ID="extProject" runat="server" TargetControlID="btnTrigger" PopupControlID="pnlProject" DropShadow="true" BackgroundCssClass="ModalPopupBackground" CancelControlID="lnkClose" /><

PopupControlID="pnlProject" DropShadow="true" BackgroundCssClass="ModalPopupBackground" CancelControlID="lnkClose" /><<!-- Do not remove; triggers the modal popup -->

<asp:Button ID="btnTrigger" runat="server" Style="display: none" />

</ItemTemplate></asp:TemplateField>

</Columns>

</asp:GridView>

The modal popup extender maps to a button that is hidden.  Why do I do that?  In the Selected index changed event handler, I did this:

</asp:GridView>

The modal popup extender maps to a button that is hidden.  Why do I do that?  In the Selected index changed event handler, I did this:

The modal popup extender maps to a button that is hidden.  Why do I do that?  In the Selected index changed event handler, I did this:
void gvwProjects_SelectedIndexChanged(object sender, EventArgs e)

{

GridViewRow row = ((GridView)sender).SelectedRow;

if (row == null) return;

ModalPopupExtender extender = row.FindControl("extProject") as ModalPopupExtender;

if (extender != null) extender.Show();

}

This was a web site project for our work down in Louisiana, that I was working on for my church.  Essentially, when the user clicks on an image button, it triggers the selected index changed event (through the select command name), which then triggers this code and the show method shows the modal popup, which shows details about a project.  Through this, you can programmatically popup an modal window.

}

This was a web site project for our work down in Louisiana, that I was working on for my church.  Essentially, when the user clicks on an image button, it triggers the selected index changed event (through the select command name), which then triggers this code and the show method shows the modal popup, which shows details about a project.  Through this, you can programmatically popup an modal window.

if (extender != null) extender.Show();

}

This was a web site project for our work down in Louisiana, that I was working on for my church.  Essentially, when the user clicks on an image button, it triggers the selected index changed event (through the select command name), which then triggers this code and the show method shows the modal popup, which shows details about a project.  Through this, you can programmatically popup an modal window.

}

This was a web site project for our work down in Louisiana, that I was working on for my church.  Essentially, when the user clicks on an image button, it triggers the selected index changed event (through the select command name), which then triggers this code and the show method shows the modal popup, which shows details about a project.  Through this, you can programmatically popup an modal window.

ModalPopupExtender extender = row.FindControl("extProject") as ModalPopupExtender;

if (extender != null) extender.Show();

}

This was a web site project for our work down in Louisiana, that I was working on for my church.  Essentially, when the user clicks on an image button, it triggers the selected index changed event (through the select command name), which then triggers this code and the show method shows the modal popup, which shows details about a project.  Through this, you can programmatically popup an modal window.

}

This was a web site project for our work down in Louisiana, that I was working on for my church.  Essentially, when the user clicks on an image button, it triggers the selected index changed event (through the select command name), which then triggers this code and the show method shows the modal popup, which shows details about a project.  Through this, you can programmatically popup an modal window.

if (extender != null) extender.Show();

}

This was a web site project for our work down in Louisiana, that I was working on for my church.  Essentially, when the user clicks on an image button, it triggers the selected index changed event (through the select command name), which then triggers this code and the show method shows the modal popup, which shows details about a project.  Through this, you can programmatically popup an modal window.

}

This was a web site project for our work down in Louisiana, that I was working on for my church.  Essentially, when the user clicks on an image button, it triggers the selected index changed event (through the select command name), which then triggers this code and the show method shows the modal popup, which shows details about a project.  Through this, you can programmatically popup an modal window.

if (row == null) return;

ModalPopupExtender extender = row.FindControl("extProject") as ModalPopupExtender;

if (extender != null) extender.Show();

}

This was a web site project for our work down in Louisiana, that I was working on for my church.  Essentially, when the user clicks on an image button, it triggers the selected index changed event (through the select command name), which then triggers this code and the show method shows the modal popup, which shows details about a project.  Through this, you can programmatically popup an modal window.

}

This was a web site project for our work down in Louisiana, that I was working on for my church.  Essentially, when the user clicks on an image button, it triggers the selected index changed event (through the select command name), which then triggers this code and the show method shows the modal popup, which shows details about a project.  Through this, you can programmatically popup an modal window.

if (extender != null) extender.Show();

}

This was a web site project for our work down in Louisiana, that I was working on for my church.  Essentially, when the user clicks on an image button, it triggers the selected index changed event (through the select command name), which then triggers this code and the show method shows the modal popup, which shows details about a project.  Through this, you can programmatically popup an modal window.

}

This was a web site project for our work down in Louisiana, that I was working on for my church.  Essentially, when the user clicks on an image button, it triggers the selected index changed event (through the select command name), which then triggers this code and the show method shows the modal popup, which shows details about a project.  Through this, you can programmatically popup an modal window.

ModalPopupExtender extender = row.FindControl("extProject") as ModalPopupExtender;

if (extender != null) extender.Show();

}

This was a web site project for our work down in Louisiana, that I was working on for my church.  Essentially, when the user clicks on an image button, it triggers the selected index changed event (through the select command name), which then triggers this code and the show method shows the modal popup, which shows details about a project.  Through this, you can programmatically popup an modal window.

}

This was a web site project for our work down in Louisiana, that I was working on for my church.  Essentially, when the user clicks on an image button, it triggers the selected index changed event (through the select command name), which then triggers this code and the show method shows the modal popup, which shows details about a project.  Through this, you can programmatically popup an modal window.

if (extender != null) extender.Show();

}

This was a web site project for our work down in Louisiana, that I was working on for my church.  Essentially, when the user clicks on an image button, it triggers the selected index changed event (through the select command name), which then triggers this code and the show method shows the modal popup, which shows details about a project.  Through this, you can programmatically popup an modal window.

}

This was a web site project for our work down in Louisiana, that I was working on for my church.  Essentially, when the user clicks on an image button, it triggers the selected index changed event (through the select command name), which then triggers this code and the show method shows the modal popup, which shows details about a project.  Through this, you can programmatically popup an modal window.

The CSS class that I use for the background is also defined as this:

.ModalPopupBackground

{

background-color:#162C66;

opacity:.9;

filter: alpha(opacity=90);

}

I hope you may find use in this.

}

I hope you may find use in this.

filter: alpha(opacity=90);

}

I hope you may find use in this.

}

I hope you may find use in this.

opacity:.9;

filter: alpha(opacity=90);

}

I hope you may find use in this.

}

I hope you may find use in this.

filter: alpha(opacity=90);

}

I hope you may find use in this.

}

I hope you may find use in this.

Posted by bmains | 14 comment(s)
Filed under: ,
I found this article which I thought was a quick overview of setting the default button or the default focus of a control, which you should use UniqueID of the button control when setting the DefaultButton property (a string) of the form.  You should use the ClientID of the control you want to assign focus through the DefaultFocus property (a string) of the form.
Posted by bmains | 2 comment(s)
Filed under:

The Calendar Extender is pretty neat in how it works, as part of the AJAX Control Toolkit.  By clicking on a control or button, it renders a calendar, which has a link to today's date at the bottom, the calendar (and other month days) in the center, and a header on the top.  The header allows you to click it, transforming to a year view, which you can select a specific month, or you can even navigate down to a decade view, which allows you to select a specific year (you can see a demonstration here).

It's really neat in how it works, and is very functional, but there are a few issues I find with it.  For instance, when using an image as the button, most people don't realize that you have to click the button again to make it go away.  Most people are used to a little x in the upper right corner, or being able to click away somewhere else and that disables it.  In addition, I haven't found a way to disable dates passed the current day with it, or do other date processing tricks.

Still, it's overtly useful; however, it's limitations must be understood.  If you can do any of these things and I am in error, please provide a comment.

Posted by bmains | 13 comment(s)
Filed under: ,

The hover menu extender is a great extender in the AJAX Control Toolkit.  Essentially, it is an extender that will appear whenever you hover over an HTML element.  I use it to show helpful tooltips that exist in a panel, so when you mouseover a label control (requires a server control to connect to), a helpful message will appear in my form explaining what they need to provide in a certain field.  To do this, you have to create a panel, with the tooltip.  I use a custom skin to change the color of the panel to whatever style I want.  I add a style of "display:none" just in case to ensure it is hidden, but I've noticed when I forget that, the toolkit seems to do it for me.

For the hover menu extender, you set the TargetControlID to the label you want this panel to appear over, and the PopupControlID to the panel ID itself.  Remember all of these must be server controls, and must have an ID that you can link to.  You can specify a PopupPosition to display to the left, right, over top, above, or below the label control (through an enumeration).  You can even specify a delay as well.

I tried an animation, and was told that would come in a future release.  I haven't tried the RTM to see if animations are supported yet.

Posted by bmains | with no comments
Filed under: ,

The modal popup extender is pretty cool; it pops up a modal form on the screen with whatever you want to see, prompting the user to perform some action.  In previous iterations, you had to use a trick to show/hide the form though, by calling the javascript method rendered for it directly.  With the RTM version, there is an easier way.  The extender has Show() and Hide() methods respectively to perform the action.  It's best to put the code that triggers this in an UpdatePanel, so the page isn't posted back everytime to perform these actions.

I found this very useful to show a details view about the details of a form, instead of putting it at the bottom or right, because I had so much data being rendered on the screen.  It worked pretty nicely.

Posted by bmains | 2 comment(s)
Filed under: ,