Question

What I want to do:

I would like to implement a gridview where the user can select rows and have the text from cells within the selected row appear on multiple textboxes on the page to be edited. I would also like for an image to be updated depending on the text in the selected row.

How I’m doing it now:

Currently, I’m using a custom clickable gridview control found here. In essence, the custom control causes a postback on clicking anywhere in the row as well as provides an “OnRowClicked” event which I can attach an event handling function. Within this function, I save the rowindex in a viewstate and then use code like:

protected void GridViewClicked(object sender, GridViewRowClickedEventArgs e){
    TextBox1.Text = System.Net.WebUtility.HtmlDecode(e.Row.Cells[0].Text);
}

To fill the text in textboxes and code like:

string filepath = "~/Bitmaps/" + TextBox1.Text + ".bmp";
    if (File.Exists(Server.MapPath(filepath)))
    {
        bitmap.ImageUrl = filepath;
    }
    else
    {
        bitmap.ImageUrl = "~/Bitmaps/NoImage.bmp";
    }

To update the image (max size 500kb) on my webpage based on the row clicked.

So what’s the problem?

Well, everything is functioning as it should. However, the issue is that each row click has a notable delay between when the mouseclick occurs and when the fields/image is updated (~0.5s) which is quite annoying. However, I don’t know what I can do to improve the performance or even if it’s an issue with the code or with the hosting service. Therefore, what I’m asking is whether or not the delay experienced is something that can be fixed or whether it’s something I just have to deal with? Or perhaps I implemented this solution in a really inefficient way? Any input is appreciated.

Answer 1

Is this grid an Ajax control? If not, the delay may be just that you are posting back for every click. For every post back, the grid needs to regenerate all the HTML and send it back and then the browser has to render it. That’s a lot of activity!

You can look into ways to reduce the amount of data you have to send, such as turning off view state for some controls. Or, you can look at an Ajax solution. The only thing you have to do on the server side is check for the existence of the image: everything else could be done in Javascript. An Ajax call to check the file’s existence would not be very costly in terms of performance, and would be relatively simple to write.

A rule of thumb (and I apologize if you’re an advanced coder and know this already): the more responsive something needs to be, the fewer postbacks and calls to the server you want to make, and the less data you want to send back and forth.