Extend the gridview control. Double-click the gridview

Http://fredrik.nsquared2.com/viewpost.aspx? Postid = 186 Category:ASP. Network 2.0 When I have helped people with extending the gridview control shipped with ASP. NET 2.0. I got the idea to write this post.   Some questions that I have seen are about how to extend the gridview control, such as setting the background color of the row when the mouse is moving over a row, turn a row into edit mode when the user has double clicked on a row etc. I wrote about how to set the background color in a previous post. in this post I have added a more functional client side script that will set back the original color of the row when the mouse has left the row.   Here are the changes from my previous post:   I have added two JavaScript Functions, setnewcolor (will set the color of the row when the user is moving the mouse over it) and setoldcolor (will set back the original color of the row when the user leaves the row ):   <Script language = JavaScript>   VaR _ oldcolor; Function setnewcolor (source) { _ Oldcolor = source. style. backgroundcolor; Source. style. backgroundcolor = '#00ff00 '; } Function setoldcolor (source) { Source. style. backgroundcolor = _ oldcolor; } </SCRIPT>   I have also change the rowcreated event to use those new client side functions:   Void gridviewrowdatabound (Object sender, gridviewroweventargs E) { E. Row. Attributes. Add ("onmouseover", "setnewcolor (this );"); E. Row. Attributes. Add ("onmouseout", "setoldcolor (this );"); }   You will find the whole example with a lot of other features at the end of this post.   Have you ever wanted to double click on a row and make the row to be changed into an editable mode? Or maybe select a row and press the Enter key and do something rational   What I'm going to show you know, is how you can use the client side _ dopostback method to do a PostBack when you double click on a row.   As you may know the _ dopostback method will be added by ASP. NET 2.0 at runtime, so we don't need to add the method, we only need to know how to use it. the _ dopostback looks like this:   _ Dopostback (eventtarget, eventargument) It has two arguments, eventtarget and eventargument. the eventtarget takes the ID of the control which this method is added to as a value. the eventargument takes a string with extra information that cocould be collected on the server side.   To the rowcreated event of the gridview control you can add something like this to make a PostBack when you click in a row:   E. Row. Attributes. Add ("onclick", "_ dopostback ('gridview1', 'myeventargs ');");   To get the value from the arguments of the _ dopostback method after a PostBack has been done, you can use the request. form and get the value from two hidden fields that also will be added by ASP. net: Request. Form ["_ eventtarget"] Request. Form ["_ eventargument"] The _ eventtarget will have the value of the _ dopostback's eventtarget argument and the _ eventagument will have the value of the evnetargument. This is an easy way of using the _ dopostback method to do a PostBack and also to get the values passed as arguments by the _ dopostback method. there is a more elegant solution for handling PostBack, And it's to use the ipostbackeventhandler interface.   When you implement this interface you also need to implement the raisepostbackevent method. this method will be automatically called when a PostBack is done. when you use the ipostbackeventhandler you can use the getpostbackeventreference method of the page object to create the _ dopostback method instead of adding it by your self. the raisepostbackevent method has one argument of the type string. this argument will have the value of the eventargument argument of the _ dopostback method.   To implement the ipostbackeventhandler for a page you use the implements ctictive:   <% @ Implements interface = "system. Web. UI. ipostbackeventhandler" %>   Instead of adding the _ dopostback by hand, you can use the getpostbackeventreference method:   Public String getpostbackeventreference (Control) Public String getpostbackeventreference (Control, string eventargument)   This method has two overloaded methods. the first overloaded method takes one argument with the control that PostBack is made from. the other method takes two arguments, the control and an argument with extra information as a string. the getpostbackeventreference will return a generated _ dopostback Method for us, where the _ dopostback's eventtarget argument will have the value of the control's ID passed as an argument to the getpostbackeventreference, and the eventarguent argument will have the value of the getpostbackeventreference's eventargument.   Now let's see how you can use the getpostbackeventreference method for making a PostBack when you double click on a row:   E. Row. Attributes. Add ("ondblclick", page. getpostbackeventreference (this, E. Row. dataitemindex. tostring ()));   The code above is located within the rowcreated event of the gridview control. as you can see in the Code, the getpostbackeventreference is used to return a value for the ondblclick attribute for the rows. the Page Object (this) is passed to the getpostbackeventreference as an argument and the index of the created row is also passed to the method.   When you implement the ipostbackeventhandler, you also need to add the raisepostbackevent Method to the page. this method will be called after you have double click on a row and the _ dopostback method has been called.   Public void raisepostbackevent (string eventargument) { Response. Write (eventargument ); }   Note: There can only be one rasiepostbackevents method on the page. if you have used the getpostbackeventreference for other client side events of the gridview row or for other controls on the page, you have to use the raisepostbackevent method's eventargument's value to identify what you should do based on which control that did call the _ dopostback method.   If you have created a custom render control in. net, and have added events for the custom control, you are probably already familiar with the ipostbackeventhandler.   Now let's take a look at the example that will use the ipostbackevent handler and make a PostBack when you double click on a row or press on one row and then press en enter key on keyboard:   <% @ Page Language = "C #" %> <% @ Implements interface = "system. Web. UI. ipostbackeventhandler" %>   <Script language = JavaScript>   VaR _ oldcolor; Function setnewcolor (source) { _ Oldcolor = source. style. backgroundcolor; Source. style. backgroundcolor = '#00ff00 '; } Function setoldcolor (source) { Source. style. backgroundcolor = _ oldcolor; }   </SCRIPT>   <SCRIPT runat = "server">   Void gridviewrowdatabound (Object sender, gridviewroweventargs E) { E. Row. Attributes. Add ("onmouseover", "setnewcolor (this );"); E. Row. Attributes. Add ("onmouseout", "setoldcolor (this );"); E. Row. Attributes. Add ("ondblclick", page. getpostbackeventreference (this, E. Row. dataitemindex. tostring ())); E. row. attributes. add ("onkeydown", "If (event. keycode = 13) "+ Page. getpostbackeventreference (this, "keydown" + "$" + E. row. dataitemindex. tostring ())); }   // Part of the ipostbackeventhandler interface. // You must create this method. Public void raisepostbackevent (string eventargument) { Gridviewselecteventargs E = NULL; Int selectedrowindex =-1;   If (! String. isnullorempty (eventargument )) { String [] ARGs = eventargument. Split ('$ ');   If (string. Compare (ARGs [0], "keydown", false, system. Globalization. cultureinfo. invariantculture) = 0 & args. length> 1) { Int32.tryparse (ARGs [1], out selectedrowindex ); E = new gridviewselecteventargs (selectedrowindex ); Onreturnkeydown (E ); } Else { Int32.tryparse (ARGs [0], out selectedrowindex ); E = new gridviewselecteventargs (selectedrowindex ); Ondblclick (E ); } } }   Protected virtual void ondblclick (eventargs E) { Response. Write ("You double clicked on the row with index:" + (gridviewselecteventargs) e). newselectedindex. tostring ()); Gridview1.editindex = (gridviewselecteventargs) e). newselectedindex; }   Protected virtual void onreturnkeydown (eventargs E) { Response. Write ("You press enter on the row with index:" + (gridviewselecteventargs) e). newselectedindex. tostring ()); } </SCRIPT> <HTML xmlns = "http://www.w3.org/1999/xhtml"> <Head id = "head1" runat = "server"> <Title> untitled page </title> </Head> <Body> <Form ID = "form1" runat = "server"> <Div> <Asp: gridview id = "gridview1" runat = "server" performanceid = "sqlperformance1" datakeynames = "customerid" Autogeneratecolumns = "false" onrowdatabound = "gridview1_rowdatabound" Alternatingrowstyle-backcolor = "# 6699ff" rowstyle-backcolor = "# ccccff"> <Columns> <Asp: commandfield showeditbutton = "true"> </ASP: commandfield> <Asp: boundfield readonly = "true" headertext = "customerid" datafield = "customerid" sortexpression = "customerid"> </ASP: boundfield> <Asp: boundfield headertext = "companyName" datafield = "companyName" sortexpression = "companyName"> </ASP: boundfield> <Asp: boundfield headertext = "contactname" datafield = "contactname" sortexpression = "contactname"> </ASP: boundfield> </Columns> </ASP: gridview> <Asp: sqldatasource id = "sqldatasource1" runat = "server" selectcommand = "select [mermerid], [companyName], [contactname] from [MERs]" Connectionstring = "<% $ connectionstrings: appconnectionstring1 %>"> </ASP: sqldatasource> </Div> </Form> </Body> </Html>   In the code above, I have used the event argument to know if someone have double clicked on a row or have pressed the Enter key. the code will check if the event argument of the raisepostbackevent has the prefix keydown $. if it do not have the keydown $ prefix, The ondblclick method will be called. this method will get the index of the double clicked row from the event argument and use the index to switch the row into its edit mode. when the return key is pressed after a row has been selected, the onreturnkey method will be called.

Extend the gridview bug Tuesday, May 30,200 6 Category:ASP. Network 2.0 Hi everyone it was a while ago since I wrote a post. I have been on an amazing vacation Azores A wonderful place. I was there with my girlfriend "Lovisa" and we had a wonderful time. I really recommend it for people that like nature. but it I shoshould not write about that. I shoshould Instead write about a solution to solve a problem thatMonte aspevigNotices me about. It's about the article about extending the gridview control (I hope he don't mind that I copy his message and paste it here)   Unfortunately with paging and sorting enabled the functionally stopped working as soon as I left the initial Page. After some investors it appears the following line is the culprit:   E. Row. Attributes. Add ("ondblclick", page. getpostbackeventreference (this, E. Row. dataitemindex. tostring ()));   I changed it as follows to correct for the paging/sorting issues caused by the "relative/page-specific" versus the "absolute" Row index:   E. Row. Attributes. Add ("ondblclick", page. getpostbackeventreference (this, E. Row. rowindex. tostring ()));   Thanks againMonte aspevigFor this information!