.NET Tutorials, Forums, Interview Questions And Answers
Welcome :Guest
Sign In
Win Surprise Gifts!!!

Top 5 Contributors of the Month
Gaurav Pal
Post New Web Links

Edit a DataGrid row's style by Javascript when a control is clicked.

Posted By:      Posted Date: October 27, 2010    Points: 0   Category :ASP.Net

I have a datagrid I am working with which has a few columns, but one checkbox with a javascript onclientclip event.

I want to highlight the row that the checkbox is clicked, highlighting for the user that this record has changed.

I have a CSS Class of "GrdHiglight" that can be used to override the "GrdNorm" and "GrdAlt" classes, or if I have to manually change the style for the row that is fine.

How do I reference the one row which the checkbox resides in, in the datagrid, to modify this?

View Complete Post

More Related Resource Links

Is it Possible to Edit page number text in Datagrid(which clicked)


Hi,I have a datagrid.

I am editing the page links text  1 2 3 4 5 ...  as  1-10 11-20 21-30 31-40 ...succesfully.

But here the problem is when am clicking 21-30 link it changes to 3.

How to display the 3 as 21-30.

ASP.NET repeater control - databind with style

even used the inline editing features, which I at the time thought was the coolest way possible to write ASP.NET code ( I managed to write code to hide all other rows and only show the current one - the row being edited). With a nice looking EditTemplate it looked indeed very slick but it really turned into giant and hard to manage code behind files.

A datagrid control that can be personalized... anyone??


Hello all,

I need a datagrid control that has following features, besides other regular stuff like paging, sorting, filtering, etc:

The user should be able to -

1. Select columns to view

2. Select column Sequence

3. Select default sort column

4. Store the setting (as a view) and use it on next visit.

5. llow multiple such views to be stored for a user for future use.

All these settings should be saved and when the user comes back he gets the same settings.

Really appreciate your time and would love to get any ideas.


- Zen

Content page control passes as argument to javascript function


Here is the content page:


<%@ Page Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="JavaDynamicCopyValue.aspx.cs" Inherits="JavaDynamicCopyValue" Title="Untitled Page" %>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
 <script type="text/javascript" >
 function copyValue(input, output )
   ouput.value = input.value;
   return true;
 <asp:TextBox ID="txt1" runat="server" onchange="copyValue(this,document.getElementById('<%=txt2.ClientID%>'))"></asp:TextBox>
    <br />
    <br />
    <asp:TextBox ID="txt2" runat="server"></asp:TextBox>


I got a javascript run time error says output is undefined. if I view source of the page, the txt1 markup became:

<input name="ctl00$ContentPlaceHol

DataGrid: Tailor Your DataGrid Apps Using Table Style and Custom Column Style Objects


One of the most enduring challenges in writing user interfaces is figuring out how to display large amounts of data efficiently and intuitively without bewildering the user. The problem becomes particularly thorny when the interface must reflect hierarchical relationships within the data that the user needs to modify. The Windows Forms DataGrid control gives developers a powerful and flexible tool to meet this challenge. This article explains its basic operations and shows how to extend the DataGrid to display columns of data in an application-appropriate manner.

Kristy Saunders

MSDN Magazine August 2003

ASCX Control for Javascript



I have created an .ascx control that contains javascript functions.  I have created a Feature that allows me to deploy it to a site collection.

How do I now include that in any page in SharePoint?

I have tried the following:

<asp:Content ID="JScript1" ContentPlaceHolderID="????????" runat="server">
<MyWorkStat:MyWorkStat ID="JScript2" runat="server">


but I don't know what the ContentPlaceHolderID should be set to.


Really I looking for a way to easily inject javascript into SharePoint pages using Features that I can turn on and off. e.g. pieces of javascript that call jQuery functions.


Is there a way?

Accessing Label Control In a listview using Javascript



I have a Button and Label nested inside a ListView.

When a User clicks the button i want the Label to display a specific value eg"Pass". Of course being a Listview the Label value will be relevant to the row the button was clicked on.

I want all this to happen on client side, but i am struggling to access the Label via my Javascript??

Any suggestions and examples Would be much appreciated..

Accessing a datagrid element using javascript

Hi all,as I'm not a .Net developer, I'm struggling with some simple problems using the language. I'm trying to insert some javascript functionality, inside my page. What I'm trying to do below...<script language=javascript> function ControlBackupFields(hasBackup) { if (hasBackup.checked = true) { document.aspnetForm.frequencyValue.enabled = true; document.aspnetForm.frequencyUnitList.enabled = true; } else { document.aspnetForm.frequencyValue.enabled = false; document.aspnetForm.frequencyUnitList.enabled = false; } } </script> <asp:datagrid id="dgData" runat="server" AutoGenerateColumns="False" PageSize="20" Width="100%" CssClass="grid" CellPadding="1"> <ItemStyle Height="20px" CssClass="tabletext2" VerticalAlign="Top"></ItemStyle> <HeaderStyle Height="20px" CssClass="tableheading2"></HeaderStyle> <Columns> <asp:TemplateColumn> <ItemTemplate> <asp:TextBox id="volumeID" Runat="server" Visible="false" /> <asp:Label id="volumeName" Runat="server" /> </ItemTemplate> </asp:TemplateColumn> <asp:Templa

How to get the combobox value inside Datagrid on Edit button click event

Hi     I have Datagrid template column like<DataGridTemplateColumn.CellTemplate></DataGridTemplateColumn>DataGridTemplateColumn Header="Edit" x:Name="Edit" ><DataGridTemplateColumn.CellTemplate></DataGridTemplateColumn.CellEditingTemplate></DataGridTemplateColumn>SelectionChanged="cmbDGTeam_SelectionChanged" IsTabStop="True" /></DataTemplate><ComboBox Height="22" IsEditable="True" IsReadOnly="True" ItemsSource="{Binding}" DisplayMemberPath="Title" SelectedValuePath="TeamID" x:Name="cmbDGTeam"  SelectedValue="{Binding Path=TeamID,Mode=TwoWay}"<DataGridTemplateColumn.CellEditingTemplate><DataTemplate><DataTemplate><TextBlock Text="{Binding Title}"/></DataTemplate></DataGridTemplateColumn.CellTemplate><DataGridTemplateColumn Header="Team" Width="75"><DataGridTemplateColumn.CellTemplate> and Edit button Template column <DataGridTemplateColumn Header="Edit" x:Name="Edit" > </DataGridTemplateColumn.CellTemplate></DataTemplate><Button Content="Edit" IsEnabled="False" x:Name="btnEdit" Click="btnEdit_Click" ></Button>&l

Accessing a row's dropdownlist values AFTER the gridview control is in Edit mode

Hello, I have a gridview control. When it goes into Edit mode, there are 3 dropdownlists in one cell that are populated by separate stored procedures during the RowDataBound event. The 1st dropdownlist's value is used as a parameter to determine what the 2nd dropdownlist is populated with. The 2nd dropdownlist's value is used as a parameter to determine what the 3rd dropdownlist is populated with. Everything works fine when the row is first put into Edit mode. While I'm in Edit mode and I change the selection in the 1st dropdownlist, how do I access the control so I can feed this new parameter to the 2nd dropdownlist? I have the first 2 dropdownlists set for AutoPostBack so that the Page_Load event is fired when the user changes a value. I know how to get access to these controls via the FindControl method when the row is being databound but how do I find the control during the Page_Load event? Thanks for any help!!!   Penny  

Masked Edit Control is not working

Hi,I'm using MaskedEditExtender for numeric field (i.e.%). In that field, user can enter the percent value between 1 and 100 and also decimals like 12.34.  Doing this, I have used this code which is not working.<ajaxToolKit:MaskedEditExtender ID="TestDetailsControl_maxTotalScoreMaskedEditExtender"runat="server" Enabled="True" ErrorTooltipEnabled="True" Mask="999.99"MaskType="Number" AutoComplete="true" AutoCompleteValue="" InputDirection="LeftToRight" TargetControlID="TestDetailsControl_maxTotalScoreTextBox">                                                   </ajaxToolKit:MaskedEditExtender>And validator code, <ajaxToolKit:MaskedEditValidator ID="TestDetailsControl_maxTotalScoreMaskedEditValidator"runat="server" ControlExtender="TestDetailsControl_maxTotalScoreMaskedEditExtender"ControlToValidate="TestDetailsControl_maxTotalScoreTextBox" IsValidEmpty="true"MaximumValue="100.00" InvalidValueMessage="Number is not valid" MaximumValueMessage=&qu

How to conditionally Enable/Disable Button control using JavaScript ?

hi all... i have a Button control & a TextBox control on my web page. The Button control is initially Disabled. I want that while typing into TextBox, when the length of the contents of TextBox reaches to 12 (i.e. when i type 12th character), the Button Control should be Enabled & if the length again comes down to less than 12, the Button control should again be Disabled... How can i do this using JavaScript...?? Does anyone know how to do this...?? Please help. It's urgent... Thanx in advance to all posts !

Insert and Edit Pages with Web User Control Template for another table

Hi, I have an Address template(web user control) which holds the fields of the Address table.  The Address template is embedded in the School Insert Page.  I want to insert a new school together with its address(which means I have to insert a record into the address table).  Can you let me know how I can pass the newly generated addressId to update school table?  Also, how can I associate the Address.cs in the App_Code with the Address template?  I want it to be able to scaffold columns which needs to be hidden from user in the address table.  When I click on Insert School, the Address template shows in "insert" mode, I just need to link the two together. Thanks for your help! CC  

Access UserControl Control from a JavaScript Function

I have a requirement to launch a Modal Javascript dialog box from within my usercontrol,I have done this by <code> function browseControlAction(ProjID,ControlID) { strPrompt = 'Select a Previous control action..'; strOptions = 'dialogWidth:25;dialogHeight:30;status:no;resizable:yes'; selectedAction = window.showModalDialog('browseControlActions.aspx?ProjID=' + ProjID + '&Control=' + ControlID, strPrompt, strOptions); var sControl = ' + ControlID + '; if (selectedAction != null) { alert(ControlID.toString()); alert(selectedAction); var sTest = ControlID + '_txtControlAction'; alert(sTest); var sTest2 = 'txtSummary'; alert(sTest2); document.getElementById('txtCurrentControls').innerText=selectedAction;   //this works as this a control on the page itself document.getElementById(sTest2).innerText=selectedAction;      //Ditto document.getElementById(sTest).innerText=selectedAction;    //This Fails as this is the control in the USercontrol I am trying to Access //__doPostBack('',''); }</code>can anybody tell me why I can't access the Textbox control on the USercontrol?

Client Javascript runs, but then page errors out when clicking on a control that uses postback

Using this script on a button click <script language="javascript"> function printdiv(printpage) { var headstr = "<html><head><title></title></head><body>"; var footstr = "</body>"; var newstr = document.all.item(printpage).innerHTML; var oldstr = document.body.innerHTML; document.body.innerHTML = headstr + newstr + footstr; window.print(); document.body.innerHTML = oldstr; return false; } </script> After it is done, I can't click on my calendar control.  I was hoping to add somethign that would force a refresh in the script, but nothing I do works. Any thoughts?  Thanks! 

Defining a custom style for a derived DataGrid

Hi all, Please tell me what I could be missing here. I am trying to define a very basic style for a derived DataGrid and it doesn't seem to take! In my dll project, I have this in the Generic.xaml: <Style TargetType="{x:Type local:MyDataGrid1}" BasedOn="{StaticResource {x:Type DataGrid}}"> <Setter Property="RowBackground" Value="#AAEAEFF4"/> <Setter Property="AlternatingRowBackground" Value="#00FFFFFF"/> </Style>  .. and this is how the derived grid is currently (pretty empty until I have this figured out): public class MyDataGrid1 : DataGrid   {     static MyDataGrid1()     {       DefaultStyleKeyProperty.OverrideMetadata(typeof(MyDataGrid1), new FrameworkPropertyMetadata(typeof(MyDataGrid1)));     }   } And in my Sample App's MainPage.xaml, I simply have this: <mygrids:MyDataGrid1 x:Name="dataGrid1" /> But, the alternating colors are not applied! Interestingly, in debugger I see that the properties are set to these values in this instance, but the for some reason while rendering, these values were not used! Please help. Thanks
ASP.NetWindows Application  .NET Framework  C#  VB.Net  ADO.Net  
Sql Server  SharePoint  Silverlight  Others  All   

Hall of Fame    Twitter   Terms of Service    Privacy Policy    Contact Us    Archives   Tell A Friend