Link to home
Create AccountLog in
Avatar of atlasmedical
atlasmedicalFlag for United States of America

asked on

Row Color of DataGrid Row after dropdownlist selected index is changed.

Hi Experts,
                    I have a minor pickle I was hoping you could help out on. I have an ASPX page with a datagrid containing  a dropdownlist in each of its rows. Now I have Javascript as well as server logic which will be executed when the selected index changes for the dropdownlist. I have one specific scenario where i have trouble on:

Consider Row X of the Datagrid:

When I set a particular value for the dropdownlist in row X , it opens the same page in a popup. I have a button on that page, which when clicked executes server side logic and then closes. I have implemented this with a Response.Write("window.returnValue='Close'; window.close();")  after the server side function is called.

The window closes and my main page has to be refreshed now. On Refresh , I have to set the color of the row X to a particular color. I do this in the gridItemDataBound. But for some obscure reason, After the page refreshes, the color is not set. When i navigate out and come back to the page, the color is set properly.

I have tried javascript to do:

1) document.forms[0].submit();
2) window.location.href = window.location.href;
3) window.location ="my page"

While debugging i did find that the color was being set in the datarow, but then, there were a series of calls to the backend code which I defined for my dropdown selected index changed and when the page loaded, the color was not set.

Can anyone help me out here?
Avatar of Wardy_01

I'm not sure if this still works because of changes in security around javascript but windows have a parent and child relationship when you open a window from a javascript on a web page.

So essentially the window in which you set the drop down value in becomes the parent window of a newly created child window.

If remember correctly you should be able to do this in the child window to get the parent window ....

var parent = window.opener;

Now essentially all you need to do is grab the document from that and call a javascript function defined on that document to change the grid row.

Here's a recent example from another pro in the industry ...

the only obvious question that comes to my mind is how reliable is this??? because differences in the way that javascript is handled by browsers may result in different outcomes.

I have also seen a sort of "hack" applied to this scenario using a very simple ajax call ...

The idea is simple ...

1. The change is made to the grid.
2. The client side js is fired which starts a timer and every x seconds an ajax call is made to the server to check if the child window is done.
3. The postback fires and the page is posted back to the server (if required).
4. The child window is opened and the second page is requested and returned to the user.
5. The user makes whatever change they see fit in the child window and clicks whatever accept or close button you provide.
6. The closing results in a postback that sets something like a session variable on the server saying the action has been performed.
7. The server returns the child page and adds in the relevant closing js to close itself.
8. The timer based ajax call is made on the next tick which checks that  the server variable is set and knows its then time to move on.
9. the javascript on the parent page can now stop the timer and act on the gridrow to restyle it.

It seems much harder / longer to do ... but this approach doesn't involve cross window scripting at least.

I think i would take the risk and go for the cross window scripting approach but i know people that would prefer the "safer" ajax approach.

Hope this helps.
for my im using this code and it is working fine

   Private Sub GridView1_RowDataBound(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridViewRowEventArgs) Handles GridView1.RowDataBound
        If e.Row.RowType = DataControlRowType.DataRow Then

'now there is 2 options
'1)find each cell and set the back color to what u want

   Dim lnkExpiryDate As LinkButton = CType(e.Row.FindControl("lnk_ExpiryDate"), LinkButton)

   If Not lnkExpiryDate Is Nothing Then

  e.Row.BackColor = Drawing.Color.FromName("#dbeaf5")

                End If


       e.Row.Attributes("onMouseOver") = "this.className='RSHover'"
   e.Row.Attributes("onMouseOut") = "this.className='RSHover'"
'where RSHover is a css class containing ur color
End If

    End Sub
Avatar of atlasmedical


Hi King2002

This is what I have already implemented. When the child window closes, the parent window is refreshed. And during that time, the datagrid is also refreshed. The GridItemDataBound of the window is also executed and the color is being set @ this point. But somehow, AFTER the pageload event, the selected index changed event of the dropdown list is executed twice/thrice and by the time the parent page loads, the grid row color is not set.

Thanks for the info wardy,
                 Since the grid item is rendered, I dont think i will be able to get the correct grid row Id through javascript. window.opener is also not working for me.

What I tried doing was return a value from the child window. For ec: I return "True"

Now, from the JS, I do

In the aspx, page load, I try to mimic entire page reload by checking the value of Return(so that I can be sure that it is from the child window) by doing a Response.Redirect(PageName). But even this is not working :(
why " the dropdown list is executed twice/thrice"
it seems postback is happening twice

sometimes this is happen if you have <asp:image control and u didnt specify an image url for it
so it post back searching for its image
make sure you set the image url of each asp:image .
also trace ur code why it is executed twice
Good Luck
Avatar of atlasmedical
Flag of United States of America image

Link to home
Create an account to see this answer
Signing up is free. No credit card required.
Create Account
Why not track the id of the selected item on the sever then in the "parent window" you can make a quick ajax call to recover the information before reacting with your javascript.

Personally i would question my concept design if i was having so many issues ... maybe you could try lightboxing or embedding an ajax driven custom control within the parent page somehow ...

Thinking about my online banking website provided by my bank i love how when i click on an account number the record expands downward and shows a small datagrid of the latest information ... is it not worth considering that type of thing? then when a selection is made hide the grid again.

I believe you might be able to use something like the accordion control with a nested datagrid :)
This is a work around..