DataGrid Rollover Colors, select single, select multiple rows client side

Iam just adding some more lines to JakeJeck's post

Put this in a class file
        public static DataGridItem ApplyRowRollover(DataGridItem item , string MouseOverColor , string MouseOutColor, string MouseClickColor )
            item.Attributes.Add("onmouseover", "ChangeColorOver(this,'" + MouseOverColor + "','" + MouseClickColor + "');");
            item.Attributes.Add("onmouseout", "ChangeColorOut(this,'" + MouseOutColor + "','" + MouseClickColor + "');" );
            item.Attributes.Add("onmouseup", "ChangeColorClick(this,'" + MouseOutColor + "','" + MouseClickColor + "' );");
            return item;
Import your class file and call it in your ItemDataBound routine
              private void DGshoppingHistory_ItemDataBound(object sender, System.Web.UI.WebControls.DataGridItemEventArgs e)
            string MouseOverColor="#FFC0FF";
            string MouseOutColor="#C0C0FF";
            string MouseClickColor= "blue";

            if (e.Item.ItemType != ListItemType.Header && e.Item.ItemType != ListItemType.Footer)
                ColorClass.ApplyRowRollover(e.Item,MouseOverColor ,MouseOutColor,MouseClickColor);

Add these functions in the HTML section of the page
function ChangeColorOver(obj,clrO,clrC)

function ChangeColorOut(obj,clrO,clrC)

function ChangeColorClick(obj, clrO, clrC)
//--Delete lines from here  if you want multiple selection
   var tableID='DGshoppingHistory'  //your datagrids id
   var table;
   if (document.all) table=document.all[tableID];
   if (document.getElementById) table=document.getElementById(tableID);
   if (table)
    for ( var i = 1 ;  i < table.rows.length-1 ;  i++)
        table.rows [ i ] . style . backgroundColor = "clrO";
//--Delete lines till here if you want multiple selection = clrC;

Write server side code on SelectedIndexChanged if you want to process the selected item
server side.


If this post was useful to you, please mark it as answer.

ClientSideAsp.Net | Blog
5/17/2005 1:06:43 PM 851 articles. 0 followers. Follow

2 Replies

Similar Articles

[PageSpeed] 45

Ok now its working I removed all the smilies

If this post was useful to you, please mark it as answer.

ClientSideAsp.Net | Blog
5/18/2005 6:29:13 AM
Could someone post a version of that? 

Microsoft ASP.NET Enthusiast
5/19/2005 3:57:55 AM

Similar Artilces:

DataGrid Row selection at client side
I have a Datagrid and i need a functionality to set the row of a datagrid to a color(blue) when i click on the DataGrid row. I have a check box in the DataGrid Header if i select the checkbox all the rows in the datagrid are set with the color(blue) at client side. i wrote the code but it is giving problems. can you pls help me out in solving this problem. code is below: var selectedRow = null; function fnSelectRow(rowObject) {         if (selectedRow != null)         {                 selected...

Multiple row selected in a grid with colored rows
I have a grid that have different colors rows based on some criteria. when I select multiple rows that have a color, the rows do not show the selected blue color. It does show a dot next to the row but the color stays Aqua. this happens only if I have more than one colored row selected. here is my code in Builder 6. Any ideas? void __fastcall TFormUCPFilingDetail::CRDBGrid2DrawColumnCell( TObject *Sender, const TRect &Rect, int DataCol, TColumn *Column, TGridDrawState State) { if (QryCaliforniaResponses->FieldByName("NoOpenTasks")->AsString...

C#:How to select a row in ListView and change the background color to blue which row is selected
 Hi,This is a part of code,I want to write the method name is select to do what I wanted.I don't know how to judgement which row is selected,and how to change the background color. ------------------------------------------------------------------------------------------------------------------------------ <ItemTemplate>            <tr style="background-color: #FFFBD6;color: #333333;">                <td>   ...

Gridview paging enabled. Has checkbox to select the row . If user select the checkbox on one page and move to 2nd page to select the rows there also to export the selected rows to excel. But doing so
HiI am using Gridview and that has paging enabled. Using checkbox to select the particular row of the gridview to export the selected rows to the excel . Everything is working fine except for one case.Let user selected the "check" box for, five rows which user would like to export to excel (two of rows on page 1 of results and 3 of them on page 2 of results), however it only exports the 3 row details from page 2, because it seems to de-select the 2 rows from page 1 when I move to page 2 and vice versa. The code i am using is as :protected void BtnExcel_Click(object sender, EventArg...

About selection of multiple checkboxes by selecting single checkbox
HI My problem is how to write a code for checking of one checkbox then automatically remaining checkboxes also selected and deselected Hi, If you want to make it server side the I believe I will not be a big issue. Just enable the autopostback of the check box and write your code in the postback event. But if you don't want to post back you have to write javascript for that.Thanks and best regards,Faraz Shah KhanMCP, MCAD.Net, MCSD.Net, MCTS-Win/Web, MCPD-WebBlog hello my friend, try this    protected void Button1_Click(object sender, EventArgs e)&n...

Selecting Items in a multiple selection ListBox that is in a DataGrid?
Is is possible to select multiple items of a listbox that is in the EditItemTemplate of a DataGrid? When someone goes to the edit button on a DataGrid (using the standard OnEditCommand for editing) I want there to be a multiple selection listbox that already has the stored values selected. I have this working for dropdownlist but I cannot get it to work for multiple selection listbox. I am not sure where to put the code that does the selections, I tried to put them on the OnEditCommand but when I use e.Item.FindContol it doesn't find the listbox. Any help would be great! Hi, Can you po...

How to select rows in a datagrid based on the column selected?
A datagrid is creted using Template column. In a datagrid the first column contains a checkbox and next column contains itemID and in the footer there is a Linkbutton named delete. I want to delete the selected item from the datagrid. How can I do it?Subham RakshitCognizant Technology Solutions Since your Delete Button is not in the same row as your CheckBox, you'll need to iterate through the DataGrid.Items collection. From each DataGridItem, use FindControl to retrieve a reference to your CheckBox. With that reference, if the Checked property is True, then you can retrieve the primar...

Selectable Row in a DataGrid without the SELECT button
Does anyone know how to code the DataGrid so that when click on the data row, that row  must be selected just like a SELECT button does, but without the button?   Thanks, Check this out: (Section: The Works and Days of Hands)Remove "_no_spam" for sending email...

Selecting the multiple rows in GridView and inserting the selected rows to another Gridview & Performing some operations on it
 Dear All, I have become mad for solving this problem. Please Help me. I have a Gridview bound to a datasource. I inserted the CheckBox Control in Templet to select certain rows. Gridview1 contains some products id & name.I want to insert the selected rows in to second Gridview  and in the second Gridview I need to add two more colums AdvicedQty & AcceptedQty(TextBox Cotrol).The user will select few products in Gridview1 & clicks add which will be added another gridview then in second Gridview he enters the AdviceQty & AcceptedQty.After entering the data he cli...

DataGrid selected row color
I have a grid view that has the first few columns as text and 1 column with an edit button and 1 with a delete button. What I need is when the user selects a row via the edit button, it does a postback and I want the row highlighted (yellow background) There is a panel that gets displayed when the edit button is pressed and has all the data from that row to be edited.  I was able to set the color but due to postbacks I was unable to change it back. I need to save the original color and row so when they do a save (which does a bind) or cancel (which does not do a bind) it wi...

Selecting multiple rows in a datagrid?
Hi,I've been looking for information on how (if it is possible) to provide a means by which users can select multiple rows in a datagrid. Does anyone know?Thanks. One way is to add a template column and put a check box in it, like thisNoman KhanHouston, TX Hope this article could help you. :)Alvin ChooiMicrosoft ASP.NET™ Enthusiast v1.1 / v2.0, Malaysia Blog : I'm sorry, I don't see a link to an article...I should clarify that what I'm trying to do is highlight multiple rows in the grid. The grid has a lot of columns, and if the user needs to scroll to ...

How to select Multiple DataGrid rowS!!??
Hi all; How to select Multiple DataGrid rowS and add them (or some) to the database?? NOTE: I added "CheckBox" via DataGrid Teplate for checking operation!! [Hotmail Style]! Thanks in advance!Regards,CS4Ever~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~Dont forget to click "Mark as Answer" on the post that helped you.This credits that member, earns you a point and marks your thread as Resolved so we will ALL know you have been helped. This will help me, you and others. What about this article? Selecting, Confirming and Deleting Multiple DataGrid i...

Selecting multiple datagrid rows
I have a page that lists the products my company has in inventory and has columns for retail cost, qty which is a textbox in the grid, and total cost. When a customer comes to the page they enter the qty of which products they want in the qty textboxes and then click submit. When they click submit the are redirected to another page that shows another datagrid with all of the selected items and their quantities as filled in the textbox on the previous page. How do I select the rows if the customer puts a quantity into more than one textbox. Thanks for the help....

Client side datagrid selection?
Hi.. In my web page, i have a datagrid. If the user selects any row in the datagrid, i want to select that row. How to do this using javascript? I'm not clear on what you mean by selecting the row with javascript.  Do you want the row highlighted?  You would need to add an onclick event to each row, and adjust the styles of the row that received the click. I want the row to be highlighted when the user selects the row. Thank You Hi venkatzeus, According to your requirement, the following code is for your reference. I hope it is helpful to you. <html xmlns="ht...

Web resources about - DataGrid Rollover Colors, select single, select multiple rows client side -

Want to preview our new DataGrid for Xamarin.Forms?
tl;dr Zumero.DataGrid is a Xamarin.Forms control for displaying data in rows and columns. If you would be interested in testing and previewing ...

Mad King DataGrid
This post is about scrolling in WPF and the egocentric DataGrid control. I’ll give the project background but if all you’re interested in is ...

Stack Overflow
Stack Exchange log in - careers - chat - meta - about - faq Questions Tags Users Badges Unanswered Ask Question Top Questions interesting 295 ...

Microsoft Silverlight - Wikipedia, the free encyclopedia
Microsoft Silverlight is an application framework for writing and running rich Internet applications , with features and purposes similar to ...

Flash Builder Plug-in for SAP Netweaver Gateway - Adobe Labs
Search Navigation Labs Home Wiki Home Technologies Alchemy Blueprint Camera Profiles and DNG Profile Editor Cirrus ColdFusion 10 DNG Codec Fireworks ...

Casaba Security » Products » X5s Testing Tool For Finding XSS Vulnerabilities
Security analysis, consulting, development and testing partners who understand your business strategy.

CodeGuru - Microsoft developers related ideas, articles, tips, tricks, comments, downloads, and so much ...
CodeGuru is where developers can come to share ideas, articles, questions, answers, tips, tricks, comments, downloads, and so much more related ...

Caliburn Micro: WPF, Silverlight, WP7 and WinRT/Metro made easy.
A small, yet powerful framework designed for WPF, Silverlight and WP7. It implements a variety of UI patterns for solving real-world problems. ...

Quick Answers - CodeProject
Questions - Free source code and tutorials for Software developers and Architects.; Updated: 11 Jul 2012 11636: first draft of license proliferation committee report
FYI,the first draft report of the OSI's License Proliferation Committee.To join the OSI's license proliferation discuss email list, send anemail ...

Resources last updated: 1/2/2016 12:32:24 AM