Forums Retired Products and Controls
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
Victor
100
Changing the text based on the selected row in a web grid
posted

I have a webgrid on a page that displays the Orders for a particular customer. I also have another section/panel on the same page consisting of Textboxes and dropdowns  that displays the details of a particular Order.

I would like the text and values of the Textboxes and dropdowns to change(Order details) based on the Selected Row of the webgrid.

Basically, when the user clicks on a particular Row (Order) on the webgrid, the Order Details section should display the information for that particular Order.

What's the best way to accomplish the above scenario ?

Parents
No Data
Reply
  • 45049
    Verified Answer
    posted

    There are three approaches I can think of.  Which one is better depends on how much data you have and where it's located.

    The first is to use the grid's Row Edit Template functionality.  This is best if you're displaying fields already present in the grid, and when these fields don't require data binding.  Since you're showing "Order Details" (which I suspect is likely handled by another grid), this is likely not going to be an option for you.

    The next approach is to handle the server-side ActiveRowChange event.  During the postback, you'd read the corresponding information based on the newly-activated row, and populate other controls on your page accordingly.  This approach is the best if:

    • You have the built-in AJAX functionality of the grid turned off.  This approach won't dependably work if the grid's built-in AJAX is turned on.
    • You don't already have the data for those other controls present in the grid, such as if it is a time-consuming process to retrieve this additional data for all rows "ahead of time."  This would make the overhead of triggering a postback less costly than having all of the data available in the first place.
    • If you can wrap the grid and the other cotnrols in a WebAsyncRefreshPanel (WARP) or an UpdatePanel, to prevent a visible postback and improve the user experience.
    • If you need to databind these other controls (such as another WebGrid), this is likely the easiest way to gte information to the server to perform the data binding.

    Another approach is to handle the grid's client-side AfterRowActivate event.  In this JavaScript event, you'd read the corresponding information from the grid (or from wherever you're storing it on the client) to populate the other controls.  This approach is best if:

    • You already have the required data available in the grid, or in some other medium (such as a JavaScript array) where you can efficiently identify the corresponding data based on the active row of the grid changing.  Using hidden columns in the grid is the easiest approach.
    • If you are using the built-in AJAX functionality of the grid, you will need to use this client-side approach.
    • If you need to databind other controls, you may be able to put those controls in a WARP or UpdatePanel, so that those other controls can be populated on the server.
Children