Click here to Skip to main content
15,867,834 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
hi,


I am using a gridview in which i have used a button as a template field.I want to change the grid row back color,when it is selected and on its clientclick a hide panel will be show.I want to do this by only javascript code not by server side code.

Thanks
Posted
Comments
kishore Rajendran 26-Mar-12 7:59am    
only using javascript?if you dont mind, why?
deepa5 26-Mar-12 8:02am    
because i didnt want to hit the server again and again.I have multiple rows in gridview thats why i want to using Client side code
[no name] 26-Mar-12 8:06am    
B4 answering your question, i had 2 doubts?
Do u have Hide Panel Code?
Do u want to highlight the Row Selected and on the same instance u need to show hide panel?
deepa5 26-Mar-12 8:09am    
yes karthik i want to same

1 solution

Hi ,

Here I'm giving sample code for what you want.

Try this.

ASP.NET
<asp:datalist id="DataList1" runat="server" width="500" xmlns:asp="#unknown">
<HeaderTemplate >
  <table width="100%">
    <tr>
      <td>ID</td>
    </tr>

</HeaderTemplate>
<itemtemplate>
  <tr id="Tr1_<%#Eval(">
    <td onclick="changecolor('Tr1_<%#Eval(" id=") %>')">
      <input type="button" id="btn_<%#Eval("id") %>" onclick="openpanel('Tr_<%#Eval("id") %>')" />
    </td>
  </tr>
  <tr id="Tr_<%#Eval(" style="display:none;">
    <td>this is hiding panel</td>
  </tr>
</itemtemplate>
<footertemplate>
</footertemplate></table>

</asp:datalist>


In code behind file contains something like this
C#
protected void Page_Load(object sender, EventArgs e)
 {
     if (!IsPostBack)
     {
         dt.Columns.Add("id");
         dt.Columns.Add("name");
         dt.Columns.Add("cost");
         dt.Columns.Add("pid");

         dt.Rows.Add(getnewrow("1", "Total", "0", "0"));
         dt.Rows.Add(getnewrow("2", "Wedding Ring", "10000", "1"));
         dt.Rows.Add(getnewrow("3", "General", "20000", "1"));
         dt.Rows.Add(getnewrow("4", "Transport", "20000", "1"));
         dt.Rows.Add(getnewrow("5", "Bride", "20000", "2"));
         dt.Rows.Add(getnewrow("6", "Groom", "20000", "2"));
         Session["TempData"] = dt;


         DataList1.DataSource = (DataTable)Session["TempData"];
         DataList1.DataBind();

     }
 }


In the above code i just take temporary data to fill data control you can use back end technologies in there(sql server,Entity FW,LinqtoSql)
and in Script tags you need to write below code
JavaScript
function changecolor(tid) {

         document.getElementById(tid).style.backgroundColor = 'red';
     }
     function openpanel(tid) {
         document.getElementById(tid).style.display = '';
     }


And this is just for sample code modify it to achieve your requirement
In the above code i just take id to specify each and every row in datalist control.

You can apply same logic to gridview also.

I hope you understood what i did.

come back if you've any doubts

All the Best
 
Share this answer
 

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900