myasahmadi
یک شنبه 24 دی 1391, 18:50 عصر
یه روش پیدا کردم
Develop your one multicolumn-DropDown with AJAX Control Extenders and ASP’s GridView
Starting the development of a multicolumn-dropdown, the first thing to is is to add an UpdatePanel to your site:
<asp:UpdatePanel ID="UpdatePanel1" runat="server"> <ContentTemplate> <!-- all other content goes here --> </ContentTemplate> </asp:UpdatePanel> Inside the <ContentTemplate>-Tag of the UpdatePanel I place a TextBox and an ASP-Panel. The Panel’s Style is set, so that it isn’t visible per default. Below the Panel I’ve placed a DropDownExtender from the AJAX Control ToolKit. Download the Toolkit here (http://www.asp.net/ajax/ajaxcontroltoolkit/). The DropDownExtender has a DropDownControlID- and a TargetControlID-Property. When the TargetControl is clicked (here the txtFriend-TextBox) the DropDownControl (here the FriendDropDown-Panel) becomes visible.
<asp:TextBox ID="txtFriend" runat="server" Width="100px" ReadOnly="true" /> <asp:Panel runat="server" ID="FriendDropDown" Style="display: none; visibility: hidden;"> <!-- GridView goes here --> </asp:Panel> <cc1:DropDownExtender ID="DropDownExtender1" runat="server" DropDownControlID="FriendDropDown" TargetControlID="txtFriend"> As I’ve added the DropDownExtender out of Visual Studio’s ToolBox, the following Register-Directive was created automatically on my page and also an assembly-reference was set automatically.
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %> Next you’ve to add a GridView inside the FriendDropDown-Panel. Just drag it out of the toolbox and set the properties you need. Here the GridView is named FriendGridView. Two Eventhandlers are defined for the events RowDataBound and SelectedIndexChanged, which are necessary for this multicolumn-scenario. But before we look at the Eventhandlers in the Codebehind-file, first look at the invisibleColumn stye, which is set on the first BoundField in the GridView.
<asp:GridView ID="FriendGridView" runat="server" AutoGenerateColumns="false" OnRowDataBound="FriendGridView_RowDataBound" OnSelectedIndexChanged="FriendGridView_SelectedIndexChanged"> <RowStyle BackColor="#DDDDDD" /> <Columns> <asp:BoundField DataField="ID" HeaderStyle-CssClass="invisibleColumn" ItemStyle-CssClass="invisibleColumn" /> <asp:BoundField DataField="FirstName" HeaderText="Firstname" /> <asp:BoundField DataField="LastName" HeaderText="Lastname" /> <asp:BoundField DataField="Birthday" HeaderText="Birthday" DataFormatString="{0:dd.MM.yyyy}" /> </Columns> <HeaderStyle BackColor="Blue" ForeColor="White" /> <AlternatingRowStyle BackColor="#EEEEEE" /> <SelectedRowStyle BackColor="#999999" /> </asp:GridView> The FriendGridView has four columns, each bound to a property of the Friend-class. As the ID-property shouldn’t be visible to the user, the Headers and Items of this BoundField are using the CSS-class "invisibleColumn". This class simple set’s the width to zero and the display-property to none, so that this column is not visible to the user, but you can access it on a postback, e.g. to update the Friend-object in a database, where you’ll need the ID. On the page I’ve also set the font-family and font-size, as you can see below.
<style> .invisibleColumn { display: none; width: 0px; } body { font-family:Arial; font-size:12px; } </style> The next thing to do is to add the EventHandlers in the Codebehind-file. In the SelectedIndexChanged-Event the Text of the txtFriend-TextBox is set to the value of the second cell of the selectedRow. The second cell contains the FirstName. As the GridView is in an UpdatePanel with the TextBox, only this part of the Page is refreshed on the Clientside (via AJAX).
protected void FriendGridView_SelectedIndexChanged(...) { // assign firstname if (FriendGridView.SelectedRow != null) txtFriend.Text = Server.HtmlDecode( FriendGridView.SelectedRow.Cells[1].Text); else txtFriend.Text = ""; } To display some mouseover-effects on the GridView and to allow selection by clicking on a row, the RowDataBound-Eventhandler is necessary. There some Javascript is added to each row of the GridView.
protected void FriendGridView_RowDataBound(...) { if (e.Row.RowType != DataControlRowType.DataRow) return; e.Row.Attributes["onmouseover"]="this.style.cursor='hand';" +"this.originalBackgroundColor=this.style.background Color;" +"this.style.backgroundColor='#bbbbbb';"; e.Row.Attributes["onmouseout"] = "this.style.backgroundColor=this.originalBackground Color;"; e.Row.Attributes["onclick"] = ClientScript.GetPostBackClientHyperlink(this.Frien dGridView, "Select$" + e.Row.RowIndex); } The most important on the snippet above is the last line that adds the onclick-Attribute to the row. With this attribute and the value of it the row is selected via click and doesn’t need a Select-Button, like the default-GridView needs to select a row. When a row is clicked, the SelectedIndexChanged-Event is automatically triggered by that JavaScript and the txtFriend-TextBox is set to the selected firstname in the Eventhandler for SelectedIndexChanged.
To make it really working, the last thing to do is to add the EnableEventValidation-Attribut to your page and set it to false. This allows the JavaScript from the snippet above to invoke the SelectedIndexChanged-Event. As an alternative to setting this attribute to false you can take a look at the RegisterForEventValidation-Method of ClientScriptManager that you can call in the Render-Method of your page.
<%@ Page Language="C#" EnableEventValidation="false" ... That’s all. Now let’s take a look at the dropdown. Just fill it in the Page_Load-Event with the same data as the string-concatenated dropdown before.
protected void Page_Load(object sender, EventArgs e) { PseudoFriendDataAccess da = new PseudoFriendDataAccess(); List<Friend> friendList = da.LoadAllFriends(); FriendGridView.DataSource = friendList; FriendGridView.DataBind(); } Below you see the created multicolumn-Dropdown. I’ve selected Christoph and reopened the DropDown again. The TextBox displays his firstname and the GridView shows the selected row.
http://www.thomasclaudiushuber.com/blog/wp-content/ajaxextenderwithgridviewdropdown-thumb.png (http://www.thomasclaudiushuber.com/blog/wp-content/ajaxextenderwithgridviewdropdown.png)
Make the multicolumn-DropDown usable for many rows
If you’ve more rows, the dropDownList should be scrollable. To add scrollsupport, simply extend the Style-Property of the FriendDropDown-Panel and add an overflow- and a max-height-attribut. Set the overflow-attribut to scroll, and the max-height to a value of your choice.
<asp:Panel runat="server" ID="FriendDropDown" Style="max-height:150px;overflow:scroll; display:none; visibility: hidden;"> For test-purposes I’ve just filled the FriendDropDown-GridView with more than 4 Rows to get the scroll behavior. In Firefox it looks great.
http://www.thomasclaudiushuber.com/blog/wp-content/scrollablefirefoxdropdown-thumb.png (http://www.thomasclaudiushuber.com/blog/wp-content/scrollablefirefoxdropdown.png)
Unfortunately Internet Explorer 7 doesn’t calculate the size of the vertical scrollbar to the Panel (it’s a div-tag in HTML) containing the GridView. So in Internet Explorer 7 you won’t see the total of the last column. Instead of that you have to scroll horizontally.
http://www.thomasclaudiushuber.com/blog/wp-content/scrollableie7dropdown-thumb.png (http://www.thomasclaudiushuber.com/blog/wp-content/scrollableie7dropdown.png)
To get very simply rid of that, I’ve added a dummy-column as the last column (and so the column on the right side) to the GridView that has a width of 15px. 15px is about the width of the vertical scrollbar.
<Columns> ... <asp:TemplateField ItemStyle-Width="15px" /> </Columns> Now that dummy-column will be behind the vertical scrollbar and the user is able to see all necessary columns.
http://www.thomasclaudiushuber.com/blog/wp-content/scrollableie7betterdropdown-thumb.png (http://www.thomasclaudiushuber.com/blog/wp-content/scrollableie7betterdropdown.png)
If the user scroll’s to the right with the horizontal scrollbar, he just sees the dummy-column.
http://www.thomasclaudiushuber.com/blog/wp-content/scrollableie7betterdropdown2-thumb.png (http://www.thomasclaudiushuber.com/blog/wp-content/scrollableie7betterdropdown2.png)