This is a migrated thread and some comments may be shown as answers.

Select Row in one Grid, Get details in Another Grid

1 Answer 182 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Brett
Top achievements
Rank 2
Brett asked on 07 Aug 2008, 04:02 PM

Hi All,
I have two grids.  In grid 1, I am returing results based on a search string.

In grid 2 I am binding the details based on the "SelectedValue" in Grid 1.  However I would like to change it up, as this does not work well when more teh 1 result is retunred to grid 1 based on Search String. 

Here is what I would like to happen:
Search Table, rows get returned to Grid1.
If only one row is return, thenselect it automatically and bind table 2 to the details.

If more then one row gets returned to grid1, then select nothing.
Allow Client Row Select
Once Row is selected, rebind grid1 to only show that row and not any of the other original returned results, and rebind grid 2 with details of the now selected row in gird 1.

If this could all happen in pretty AJAX, that would also be great!


I have added my current code for evaluation:

<%@ Page Title="" Language="VB" MasterPageFile="~/MasterPage.master" AutoEventWireup="false" 
    CodeFile="Copy of byAddress.aspx.vb" Inherits="test" %> 
 
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> 
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxtoolkit" %> 
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">  
</asp:Content> 
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">  
    <div id="searchblock">  
    <ajaxtoolkit:TextBoxWatermarkExtender ID="tbwm" runat="server"   
           TargetControlID="txtSearch" WatermarkText="99 Washington"   
           WatermarkCssClass="txtWatermark">  
       </ajaxtoolkit:TextBoxWatermarkExtender> 
        <asp:TextBox ID="txtSearch" runat="server"></asp:TextBox> 
        <asp:Button ID="btnSearch" runat="server" Text="Search"/>  
        <telerik:RadToolTip ID="RadToolTip1" runat="server" Animation="Fade"   
            AutoCloseDelay="5000" ShowDelay="100" Skin="Hay" TargetControlID="txtSearch"   
            Text="Please enter a street name without suffixes. (ex. Rd, Ave, St, Cr, Crs, Ln, etc.)"   
            VisibleOnPageLoad="True">  
        </telerik:RadToolTip> 
    </div> 
    <div class="tablehdr">  
        <h3> 
            Municipal Property Details</h3> 
            <p> 
    <asp:Label ID="lblError" runat="server" ForeColor="#FF3300"></asp:Label> 
        </p> 
    </div> 
    <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server" > 
     <script type="text/javascript">  
            <!--  
                function log(message)  
             {  
                 var log = document.getElementById("log");  
                 log.innerHTML += message + "<br/>";  
             }  
                function GridCreated(sender, eventArgs)  
                {  
                 var grid = $find("<%=RadGrid1.ClientID %>");  
                 //you can also use the sender argument keyword to reference the client grid object   
                    log("ClientID of server-side grid object is: " + grid.get_element().id);  
                }  
 
 
                function RowClick(sender, eventArgs)  
                {  
                    var text = "";  
                    text += "Row was clicked";  
                    text += ", Index: " + eventArgs.get_itemIndexHierarchical();  
                    document.getElementById("OutPut").innerHTML = text;  
                    RadGrid2.Rebind();  
                }  
 
                function RowDblClick(sender, eventArgs)  
                {  
                    var text = "";  
                    text += "Row was double clicked";  
                    text += ", Index: " + eventArgs.get_itemIndexHierarchical();  
                    document.getElementById("OutPut").innerHTML = text;  
                }  
 
 
                function RowSelected(sender, eventArgs)  
                {  
                    var text = "";  
                    text += "Row with index: " + eventArgs.get_itemIndexHierarchical() + " was selected";  
                    document.getElementById("OutPut").innerHTML = text;  
                }  
                  
                function RowDeselected(sender, eventArgs)  
                {  
                    var text = "";  
                    text += "Row with index: " + eventArgs.get_itemIndexHierarchical() + " was deselected";  
                    document.getElementById("OutPut").innerHTML = text;  
                }  
 
                  
            --> 
    </script> 
 
    </telerik:RadCodeBlock> 
    <telerik:RadScriptBlock ID="RadScriptBlock1" runat="server" > 
    </telerik:RadScriptBlock> 
    <telerik:RadGrid ID="RadGrid1" runat="server" DataSourceID="dsGrid" Skin="Telerik" 
        GridLines="None">  
        <MasterTableView AutoGenerateColumns="False" DataSourceID="dsGrid" DataKeyNames="ROLL_NO">  
            <RowIndicatorColumn> 
                <HeaderStyle Width="20px"></HeaderStyle> 
            </RowIndicatorColumn> 
            <ExpandCollapseColumn> 
                <HeaderStyle Width="20px"></HeaderStyle> 
            </ExpandCollapseColumn> 
            <Columns> 
                <telerik:GridBoundColumn DataField="ROLL_NO" HeaderText="Roll Number" SortExpression="ROLL_NO" 
                    UniqueName="ROLL_NO">  
                </telerik:GridBoundColumn> 
                <telerik:GridBoundColumn DataField="Address" HeaderText="Address" SortExpression="Address" 
                    UniqueName="Address" ReadOnly="True">  
                </telerik:GridBoundColumn> 
                <telerik:GridTemplateColumn HeaderText="Legal Description" UniqueName="TemplateColumn">  
                    <ItemTemplate> 
                        <asp:Label ID="Label58" runat="server" Text='<%# DataBinder.Eval(Container, "DataItem.LEGAL1") %>'>  
                        </asp:Label><br /> 
                        <asp:Label ID="Label1" runat="server" Text='<%# DataBinder.Eval(Container, "DataItem.LEGAL2") %>'>  
                        </asp:Label><br /> 
                        <asp:Label ID="Label2" runat="server" Text='<%# DataBinder.Eval(Container, "DataItem.LEGAL3") %>'>  
                        </asp:Label><br /> 
                        <asp:Label ID="Label3" runat="server" Text='<%# DataBinder.Eval(Container, "DataItem.LEGAL4") %>'>  
                        </asp:Label><br /> 
                        <asp:Label ID="Label4" runat="server" Text='<%# DataBinder.Eval(Container, "DataItem.LEGAL5") %>'>  
                        </asp:Label> 
                    </ItemTemplate> 
                </telerik:GridTemplateColumn> 
                <telerik:GridBoundColumn DataField="CLASS" HeaderText="Class" SortExpression="CLASS" 
                    UniqueName="CLASS">  
                </telerik:GridBoundColumn> 
                <telerik:GridBoundColumn DataField="ASSESSMENT" DataType="System.Decimal" HeaderText="Assesed Value" 
                    SortExpression="ASSESSMENT" UniqueName="ASSESSMENT" DataFormatString="{0:c}">  
                </telerik:GridBoundColumn> 
                <telerik:GridHyperLinkColumn HeaderText="More Details" NavigateUrl="details.aspx?txtSearch={0}" 
                    Text="View Details" UniqueName="column">  
                    <HeaderStyle HorizontalAlign="Center" /> 
                    <ItemStyle HorizontalAlign="Center" /> 
                </telerik:GridHyperLinkColumn> 
            </Columns> 
        </MasterTableView> 
        <ClientSettings> 
            <Selecting AllowRowSelect="True" /> 
        </ClientSettings> 
        <FilterMenu EnableTheming="True">  
            <CollapseAnimation Type="OutQuint" Duration="200"></CollapseAnimation> 
        </FilterMenu> 
    </telerik:RadGrid> 
    <asp:SqlDataSource ID="dsGrid" runat="server" ConnectionString="<%$ ConnectionStrings:csProperty %>" 
        SelectCommand="SELECT DISTINCT txroll.ROLL_NO, CAST(txroll.STREET_NO AS varchar) + ' ' + txroll.STREET_NAME AS Address, txroll.LEGAL1, txroll.LEGAL2, txroll.LEGAL3, txroll.LEGAL4, txroll.LEGAL5, TX_ROLL_ASSESS.CLASS, TX_ROLL_ASSESS.ASSESSMENT, TX_ROLL_ASSESS.ASS_YEAR  
FROM TX_ROLL txroll LEFT OUTER JOIN TX_ROLL_ASSESS ON txroll.ROLL_NO = TX_ROLL_ASSESS.ROLL_NO    
WHERE CAST(txroll.STREET_NO AS varchar) + ' ' + txroll.STREET_NAME LIKE '%' + @ADDRESS + '%'   
ORDER BY TX_ROLL_ASSESS.ASS_YEAR DESC"> 
        <SelectParameters> 
            <asp:ControlParameter Name="address" ControlID="txtSearch" Type="String" /> 
            <%--<asp:QueryStringParameter Name="ROLL_NO" QueryStringField="txtSearch" Type="String" />--%> 
        </SelectParameters> 
    </asp:SqlDataSource> 
    <br /> 
    <asp:Panel ID="pnlStructure" runat="server">  
        <div class="tablehdr">  
            <h3> 
                Sturcture Details</h3> 
        </div> 
        <telerik:RadGrid ID="RadGrid2" runat="server" DataSourceID="dsStructure" GridLines="None" 
            Skin="Telerik">  
            <MasterTableView AutoGenerateColumns="False" DataSourceID="dsStructure" DataKeyNames="ROLL_NO">  
                <RowIndicatorColumn> 
                    <HeaderStyle Width="20px" /> 
                </RowIndicatorColumn> 
                <ExpandCollapseColumn> 
                    <HeaderStyle Width="20px" /> 
                </ExpandCollapseColumn> 
                <Columns> 
                    <telerik:GridTemplateColumn UniqueName="TemplateColumn1" HeaderText="Construction">  
                        <ItemTemplate> 
                            CHAR OF CONST:<asp:Label ID="Label58" runat="server" Text='<%# DataBinder.Eval(Container, "DataItem.CHAR_OF_CONST") %>'>  
                            </asp:Label><br /> 
                            QUALITY:<asp:Label ID="Label1" runat="server" Text='<%# DataBinder.Eval(Container, "DataItem.QUALITY") %>'>  
                            </asp:Label><br /> 
                            SHAPE:<asp:Label ID="Label2" runat="server" Text='<%# DataBinder.Eval(Container, "DataItem.SHAPE") %>'>  
                            </asp:Label><br /> 
                            YEAR BUILT:<asp:Label ID="Label3" runat="server" Text='<%# DataBinder.Eval(Container, "DataItem.YEAR_BUILT") %>'>  
                            </asp:Label><br /> 
                            YEAR BUILT CODE:<asp:Label ID="Label4" runat="server" Text='<%# DataBinder.Eval(Container, "DataItem.YEAR_BUILT_CODE") %>'>  
                            </asp:Label></ItemTemplate>  
                    </telerik:GridTemplateColumn> 
                    <telerik:GridTemplateColumn UniqueName="TemplateColumn2" HeaderText="Building">  
                        <ItemTemplate> 
                            CONDITION:<asp:Label ID="Label59" runat="server" Text='<%# DataBinder.Eval(Container, "DataItem.CONDITION") %>'>  
                            </asp:Label><br /> 
                            FULL STORYS:<asp:Label ID="Label1" runat="server" Text='<%# DataBinder.Eval(Container, "DataItem.FULL_STOREYS") %>'>  
                            </asp:Label><br /> 
                            PART STORYS:<asp:Label ID="Label2" runat="server" Text='<%# DataBinder.Eval(Container, "DataItem.PART_STOREYS") %>'>  
                            </asp:Label><br /> 
                            HEIGHT EFF DATE:<asp:Label ID="Label3" runat="server" Text='<%# DataBinder.Eval(Container, "DataItem.HEIGHT_EFF_DATE_S") %>'>  
                            </asp:Label><br /> 
                            SPLIT:<asp:Label ID="Label4" runat="server" Text='<%# DataBinder.Eval(Container, "DataItem.SPLIT") %>'>  
                            </asp:Label></ItemTemplate>  
                    </telerik:GridTemplateColumn> 
                    <telerik:GridTemplateColumn UniqueName="TemplateColumn3" HeaderText="Area">  
                        <ItemTemplate> 
                            GROSS AREA:<asp:Label ID="Label59" runat="server" Text='<%# DataBinder.Eval(Container, "DataItem.GROSS_AREA") %>'>  
                            </asp:Label><br /> 
                            TOTAL BASEMENT:<asp:Label ID="Label1" runat="server" Text='<%# DataBinder.Eval(Container, "DataItem.TOTAL_BASEMENT") %>'>  
                            </asp:Label><br /> 
                            FINISH BASEMENT:<asp:Label ID="Label2" runat="server" Text='<%# DataBinder.Eval(Container, "DataItem.FINISH_BASEMENT") %>'>  
                            </asp:Label><br /> 
                            FINISH BASEMENT:<asp:Label ID="Label3" runat="server" Text='<%# DataBinder.Eval(Container, "DataItem.FINISH_BASEMENT_TY") %>'>  
                            </asp:Label><br /> 
                            </asp:Label></ItemTemplate>  
                    </telerik:GridTemplateColumn> 
                    <telerik:GridTemplateColumn UniqueName="TemplateColumn4" HeaderText="Features">  
                        <ItemTemplate> 
                            FULL BATHS:<asp:Label ID="Label59" runat="server" Text='<%# DataBinder.Eval(Container, "DataItem.FULL_BATHS") %>'>  
                            </asp:Label><br /> 
                            HALF BATHS:<asp:Label ID="Label1" runat="server" Text='<%# DataBinder.Eval(Container, "DataItem.HALF_BATHS") %>'>  
                            </asp:Label><br /> 
                            # BEDROOMS:<asp:Label ID="Label2" runat="server" Text='<%# DataBinder.Eval(Container, "DataItem.NO_OF_BEDROOMS") %>'>  
                            </asp:Label><br /> 
                            # FIREPLACES:<asp:Label ID="Label3" runat="server" Text='<%# DataBinder.Eval(Container, "DataItem.NO_OF_FIREPLACES") %>'>  
                            </asp:Label><br /> 
                            HEATING TYPE:<asp:Label ID="Label5" runat="server" Text='<%# DataBinder.Eval(Container, "DataItem.HEATING_TYPE") %>'>  
                            </asp:Label><br /> 
                            AIR CONDITIONING:<asp:Label ID="Label6" runat="server" Text='<%# DataBinder.Eval(Container, "DataItem.AIR_CONDITIONING") %>'>  
                            </asp:Label><br /> 
                            </asp:Label></ItemTemplate>  
                    </telerik:GridTemplateColumn> 
                    <telerik:GridTemplateColumn UniqueName="TemplateColumn" HeaderText="Garage">  
                        <ItemTemplate> 
                            GARAGE TYPE:<asp:Label ID="Label59" runat="server" Text='<%# DataBinder.Eval(Container, "DataItem.GARAGE_TYPE") %>'>  
                            </asp:Label><br /> 
                            GARAGE SPACES:<asp:Label ID="Label1" runat="server" Text='<%# DataBinder.Eval(Container, "DataItem.GARAGE_SPACES") %>'>  
                            </asp:Label><br /> 
                            STRUCTURE CODE:<asp:Label ID="Label2" runat="server" Text='<%# DataBinder.Eval(Container, "DataItem.STRUCT_CODE") %>'>  
                            </asp:Label></ItemTemplate>  
                    </telerik:GridTemplateColumn> 
                </Columns> 
            </MasterTableView> 
            <FilterMenu EnableTheming="True">  
                <CollapseAnimation Duration="200" Type="OutQuint" /> 
            </FilterMenu> 
        </telerik:RadGrid><ajaxtoolkit:CollapsiblePanelExtender ID="cpe" runat="Server" TargetControlID="pnlStructure" 
            CollapsedSize="0" Collapsed="True" ExpandControlID="RadGrid1" CollapseControlID="RadGrid1" 
            AutoCollapse="False" AutoExpand="False" ScrollContents="False" ImageControlID="imgLegal" 
            ExpandedImage="~/lib/img/collapse.jpg" CollapsedImage="~/lib/img/expand.jpg" 
            ExpandDirection="Vertical" SuppressPostBack="true" /> 
        </ajaxtoolkit:CollapsiblePanelExtender><asp:ImageButton ID="imgPrint" runat="server" ImageUrl="lib/img/printer.png" 
            ImageAlign="Middle" AutoPostBack="False" CausesValidation="False" CssClass="imgPrint" /><asp:LinkButton  
                ID="lnkPrint" runat="server" CssClass="lnkPrint">Print Now</asp:LinkButton> 
        <asp:SqlDataSource ID="dsStructure" runat="server" ConnectionString="<%$ ConnectionStrings:csProperty %>" 
            SelectCommand="SELECT [ROLL_NO], [CHAR_OF_CONST], [QUALITY], [SHAPE], [YEAR_BUILT], [YEAR_BUILT_CODE], [CONDITION], [FULL_STOREYS], [PART_STOREYS], [HEIGHT_EFF_DATE_S], [SPLIT], [GROSS_AREA], [TOTAL_BASEMENT], [FINISH_BASEMENT], [FINISH_BASEMENT_TY], [FULL_BATHS], [HALF_BATHS], [NO_OF_BEDROOMS], [NO_OF_FIREPLACES], [HEATING_TYPE], [AIR_CONDITIONING], [GARAGE_TYPE], [GARAGE_SPACES], [STRUCT_CODE] FROM [TX_STRUCT] WHERE ([ROLL_NO] = @ROLL_NO) ORDER BY [CHAR_OF_CONST] DESC">  
            <SelectParameters> 
                <asp:ControlParameter ControlID="RadGrid1" Name="ROLL_NO" PropertyName="SelectedValue" 
                    Type="string" /> 
            </SelectParameters> 
        </asp:SqlDataSource> 
    </asp:Panel> 
</asp:Content> 


Imports System  
Imports System.Web.UI.WebControls  
Imports Telerik.Web.UI  
Imports System.Data.SqlClient  
 
Partial Class test  
    Inherits System.Web.UI.Page  
    Protected Sub Page_Load(ByVal sender As ObjectByVal e As System.EventArgs) Handles Me.Load  
        imgPrint.Attributes.Add("onclick""javascript:window.print(); return false;")  
        lnkPrint.Attributes.Add("onclick""javascript:window.print(); return false;")  
 
    End Sub 
 
    Protected Sub RadGrid1_DataBound(ByVal sender As ObjectByVal e As System.EventArgs) Handles RadGrid1.DataBound  
        If Page.IsPostBack Then 
            Try 
                RadGrid1.Items(0).Selected = True 
                RadGrid2.MasterTableView.Rebind()  
            Catch ex As IndexOutOfRangeException  
                'MsgBox(ex.Message)  
                lblError.Text = "Your Search: " 
                lblError.Text += txtSearch.Text  
                lblError.Text += " did not find any matches.  Please try again." 
            Catch ex As Exception  
                'MsgBox(ex.Message)  
                'lblError.Text = "An error has occured/"  
                'lblError.Text += ex.Message  
                lblError.Text = "Your Search: " 
                lblError.Text += txtSearch.Text  
                lblError.Text += " did not find any matches.  Please try again." 
            End Try 
        End If 
    End Sub 
End Class 
 

Thanks for any help!

1 Answer, 1 is accepted

Sort by
0
Yavor
Telerik team
answered on 12 Aug 2008, 06:00 AM
Hi bslaght,

One possible implementation, which caters for your scenario, would be as shown in this code example. Additionally, as an add-on to the code in the sample, you can use the PreRender event handler for the 1st grid. From there, depending on the RadGrid1.MasterTableView.Items count, you can pre-select the first item. This will ensure that the data related to the 1st record is rendered in the other grid.
I hope this suggestion help.

Kind regards,
Yavor
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.
Tags
Grid
Asked by
Brett
Top achievements
Rank 2
Answers by
Yavor
Telerik team
Share this question
or