Question

work on asp.net vs05.i want to set mouse event on gridview

Then based on the event type if event is mouseover it zoom the row else if the event is mouseout it changes the row’s zoom back to its original before the event occurred.

if (e.Row.RowType == DataControlRowType.DataRow )

{

    e.Row.Attributes.Add("onmouseover","MouseEvents(this, event)");

    e.Row.Attributes.Add("onmouseout", "MouseEvents(this, event)"); 

} 


<script type = "text/javascript">
function MouseEvents(objRef, evt)
{

   if (evt.type == "mouseover")
   {
        objRef.style.height = "100%"; 
        objRef.style.width = "100%";
   }
</script>

the above code does not act in this way,Whatever i want .I want zoom in and zoom out?

Answer 1

Although you’d be better off using a JavaScript library to handle this in the long term, I’ll just explain how to achieve the zoom effect you’re looking for to keep things simple.

Your markup and .NET code is correct the way it is. You’ll need to adjust your JavaScript and add some CSS do what you’re looking for.

At it’s most basic level, what you want to do is this:

function MouseEvents(objRef, evt) {
    if (evt.type == "mouseover") {
        objRef.style.fontSize= "120%"; 
    } else {
        objRef.style.fontSize= "100%"; 
    }
}

Changing the height and width like you did in your question will only change the dimensions of the cells, not the contents. The easiest way to achieve a zoom effect is to increase the font size.

Once you’ve done this, you need to consider how the flow of your table will be affected by making the font bigge. As the font gets bigger, the height & width of each cell will increase. This can make the layout jump around and become annoying to deal with.

• To address height shifts, change the line-height in your table cells. This will ensure that rows don’t shift up or down as you hover over them.
• To deal with the width shifts, the width of your cells (or better, the table itself) should be set to be large enough that the table itself won’t grow as the row needs more space to fit the larger text.

This is how you would address those issues:

tr {line-height: 25px}
/* change the "200px" to be whatever your table needs */
table { 200px }

To take this even further, we can improve the JavaScript to be more flexible…

It is a bad practice to include presentation details in JavaScript. Think about what happens if you need to change the look of a hovered row in the future. If this happens, you’ll have to modify code logic, which can be annoying to deal with as your app grows. Presentational rules should be in one place, a central style sheet.

It is better to have JavaScript swap out CSS classes instead. Then you can put your “hover” styling rules in a CSS file. To do this you would change your JavaScript to the following:

function MouseEvents(objRef, evt) {
    if (evt.type == "mouseover") {
        objRef.className = "hover";
    } else {
        objRef.className = "";
    }
}

Once you’ve done this, now you can move your “zoom” styles into CSS as the following:

.hover{font-size: 120%}

The JavaScript just adds or removes this CSS class. Anything without this class will have the default 100% font size, and then when that class is added, it will get bigger. Keeping things in CSS also allows you to add other things like changing the background color of the row, the font-weight, the text color, etc. so it is a good idea to do it like this.

A live demo of the code in this answer can be found here: http://jsbin.com/ideve

---

As I mentioned in the beginning of my post though, you’ll be better off using a JavaScript framework like jQuery, Dojo, YUI, MooTools or Prototype. This will allow you to completely separate your JavaScript code from your markup (and also your ASP.NET code logic), making it much easier to work with. It also allows you to avoid the perils of cross-browser quirks in JavaScript events, which I’m assuming is why you’re using HTML attributes for triggering JavaScript events in the first place, since it’s much easier than doing it from scratch entirely in JavaScript with no frameworks.