I would like to present two webgrids on a page, such that on a row change in GridA. GridB is requeried to show records that are based on a column in the active row from GridA. For instance, GridA could be a display of U.S. States, and when a row becomes active, it will display in GridB all the parks in that state.
I would like to avoid a full page postback, and so I think that I would place GridB in a WebAsynchRefreshPanel, and have the underlying query for GridB referencing a hidden textbox by means of a ControlParameter. So what I need is a means to update that hidden textbox from a column in GridA when it changes rows. But I am not sure how to do this.
I know that this could be done as a heirarchical webgrid, but I would like GridB to always be visible so that the user does not have to expand the children rows.
So can anyone show me how in a client-side script to respond to a row change in a webgrid, and then update a control (the hidden textbox) from a column in the newly active row.
Thanks for your help.
Rumen,
Thank you for your reply. You proposed an alternate and perhaps more direct solution for my need. So this is almost the answer that I am looking for. But I also asked how to perform a client-side action: "So can anyone show me how in a client-side script to respond to a row change in a webgrid, and then update a control (the hidden textbox) from a column in the newly active row."
Your solution looks as if it will solve the scenario I described, but am also looking for how to implement a clientside script on rowchange to read a cell value in the active row and update a second control with that value. Any thoughts?
This is an interesting case - I took the time to recreate it locally and had some good progress with it. The idea is to handle the OnClick event of the grid - it fires when end-users click on the grid row/cell/column. Then, in the postback event handler you can bind your second grid based on the row clicked in the first one. The second grid can be placed inside an UpdatePanel or WARP with Triggers set to the fist grid - this will make sure the partial update take care only of Grid #2.
Here is my code:
<igtbl:UltraWebGrid ID="UltraWebGrid1" runat="server" Height="200px" Width="325px" onclick="UltraWebGrid1_Click"> </igtbl:UltraWebGrid> <br /> <asp:UpdatePanel runat="server" ID="UpdatePanel1"> <ContentTemplate> <igtbl:UltraWebGrid runat="server" ID="UltraWebGrid2" Visible="false"> </igtbl:UltraWebGrid> </ContentTemplate> <Triggers> <asp:AsyncPostBackTrigger ControlID="UltraWebGrid1" EventName="Click" /> </Triggers> </asp:UpdatePanel> protected void Page_Load(object sender, EventArgs e) { DataTable dataTable = new DataTable(); dataTable.Columns.Add("ID"); dataTable.Columns.Add("Decimal"); dataTable.Rows.Add(new object[ { 1, 1.44 }); dataTable.Rows.Add(new object[ { 1, 1.47 }); dataTable.Rows.Add(new object[ { 1, 1.48 }); UltraWebGrid1.DataSource = dataTable; UltraWebGrid1.DataBind(); //ultraChart.Page.Form.Controls.Add(ultraChart); } protected void UltraWebGrid1_Click(object sender, ClickEventArgs e) { if (e.Cell != null) { int rowIndex = e.Cell.Row.BandIndex; UltraWebGrid2.Visible = true; DataTable dataTable = new DataTable(); dataTable.Columns.Add("ID"); dataTable.Columns.Add("Decimal"); dataTable.Rows.Add(new object[ { 1, rowIndex }); dataTable.Rows.Add(new object[ { 1, rowIndex }); dataTable.Rows.Add(new object[ { 1, rowIndex }); UltraWebGrid2.DataSource = dataTable; UltraWebGrid2.DataBind(); } }
Hope this helps.