About Me

"I love being the underdog"

Anthony DeSalvo

Dad, Husband, Roller Derby Widow, Triathlete, Web Developer and RCRD Volunteer!

Ajax , Gridviews and Hover Menu Extenders ohh my!!

by adesalvo 12. April 2007 23:05

A few months ago I was designing a custom CMS for my current employer. The system will primarily be used to manage there retail products and all the attributes that relate to them. EX: color, size, retail location, etc.

In the current system these attributes, like any poorly manage application, have spun out of control. The only way to clean up these attributes was for me to write some custom SQL and pass the results off to marketing to mark up, correct and send back to my intern to make the SQL changes.

To avoid this tedious task (I like my interns), I decided to build in a viewable/clickable relationship between each attribute and its products in the new CMS. Considering its user base, I wanted to make it as easy as possible to view this parent child relationship.

Initially we just added a VIEW button embedded in the gridviews that would take you to a page that lists which products relate to it’s clicked attribute. From there you could click again to manage a specific product within the list. This wasn’t an optimal solution but solved the problem.

While looking at the page I thought an embedded hoverMenuExtender control that popped up another gridview of each of the attributes related products would allow for a faster and easier workflow for managing products and attributes.

So below is the code that I developed. It’s strictly asp.net no codeBehinds, using the business logic DAL pattern for the Data Access as well as generics.



<asp:ObjectDataSource ID="odsFeatures" runat="server" OnSelected="ObjectDataSource1_FeatureSelected"
OnDeleted="ObjectDataSource1_FeatureDeleted" UpdateMethod="UpdateFeature" InsertMethod="InsertFearure"
DeleteMethod="DeleteFeature" DataObjectTypeName="com.safes.Feature" TypeName="com.safes.FeatureDAL"
SelectMethod="SelectFeature">

<SelectParameters>
<asp:ControlParameter ControlID="ddlCategories" Name="categoryID" PropertyName="SelectedValue"
Type="Int32" />

</SelectParameters>
</asp:ObjectDataSource>
<asp:GridView ID="GridView2" runat="server" Width="100%" CssClass="smallCopy" DataSourceID="odsFeatures"
AutoGenerateColumns="False" DataKeyNames="FeatureId">

<Columns>
<asp:CommandField ButtonType="Button" ItemStyle-Width="95" ShowEditButton="True"
ShowDeleteButton="True" ControlStyle-CssClass="cmsButton" CausesValidation="false" />

<asp:BoundField DataField="Name" ItemStyle-Width="600" ControlStyle-Width="600" HeaderText="Name"
SortExpression="Name" />

<asp:TemplateField HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Center"
HeaderText="View">

<ItemTemplate>
<asp:Panel ID="pnlFeatureTarget" runat="server">
<asp:Button ID="btnFeatureView" CausesValidation="false" OnClientClick="return false;"
ToolTip='<%# Eval("FeatureId") %>
' Text='View' CssClass="cmsSelectButton" runat="server" /></asp:Panel>
<ajaxToolkit:HoverMenuExtender ID="hmeFeature" runat="Server" HoverCssClass="popupHover"
PopupControlID="pnlFeatureView" PopupPosition="Left" TargetControlID="pnlFeatureTarget"
PopDelay="100" />

<asp:ObjectDataSource ID="ObjectDataSource4" runat="server" SelectMethod="getSafesByFeatureId"
TypeName="com.safes.SafeFactory">

<SelectParameters>
<asp:ControlParameter ControlID="btnfeatureView" Name="FeatureId" PropertyName="tooltip"
Type="Int32" />

</SelectParameters>
</asp:ObjectDataSource>
<asp:Panel ID="pnlFeatureView" runat="server" CssClass="popupControl">
<asp:GridView EmptyDataText="No Safes Found" EmptyDataRowStyle-BackColor="#EEEEEE"
EmptyDataRowStyle-ForeColor="black" EmptyDataRowStyle-CssClass="smallCopy" ID="FeatureGridView2"
runat="server" AutoGenerateColumns="False" DataSourceID="ObjectDataSource4" CssClass="smallCopy cmsAlignRight"
Width="0" BorderColor="#333333" BorderStyle="Solid" BorderWidth="1px" CellPadding="3"
GridLines="Vertical">

<Columns>
<asp:HyperLinkField DataTextField="ModelNo" HeaderText="Model" SortExpression="ModelNo"
ItemStyle-HorizontalAlign="center" DataNavigateUrlFields="ModelNo" DataNavigateUrlFormatString="editSafeRedirect.aspx?m={0}" />

</Columns>
<RowStyle BackColor="#EEEEEE" ForeColor="Black" />
<SelectedRowStyle BackColor="Gray" Font-Bold="True" ForeColor="White" />
<PagerStyle BackColor="#999999" ForeColor="Black" HorizontalAlign="Center" />
<HeaderStyle BackColor="#D23127" Font-Bold="True" ForeColor="White" CssClass="mediumCopy" />
<AlternatingRowStyle BackColor="Gainsboro" />
</asp:GridView>
</asp:Panel>
</ItemTemplate>
</asp:TemplateField>
</Columns>
<RowStyle BackColor="#EEEEEE" ForeColor="Black" />
<SelectedRowStyle BackColor="Gray" Font-Bold="True" ForeColor="White" />
<PagerStyle BackColor="#999999" ForeColor="Black" HorizontalAlign="Center" />
<HeaderStyle BackColor="#D23127" Font-Bold="True" ForeColor="White" CssClass="mediumCopy" />
<AlternatingRowStyle BackColor="Gainsboro" />
</asp:GridView>





Below is a screen shot of the final rendered product. As you can see you can select a feature and get its attributes, and from there you can hover over the view button on the attribute to see what products belong to its respected attribute. I also added a link to the product for easy editing.



One of the things I struggled with was how to set the select selectparameters of the hovering objectdatasource/gridview. What I ended up doing is setting the tooltip parameter of the button to the featuredID of the attribute. Then I referenced the tooltip parameter using the controlParamter. From there I could write a custom query to get the products associated with the attribute.

Tags: , ,

Tech