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

How to populate another grid by selecting an item in first one?

11 Answers 308 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Goran
Top achievements
Rank 1
Goran asked on 26 Jun 2012, 12:46 PM
Hi,

I'm new in Telerik's grid and need help. I have 2 grid controls on ASPX page. The first one is populated with some data. I want to populate the second one when I select an item in first one.

The markup (in aspx) for second grid looks as follows:

            <telerik:RadGrid ID="grdDetails" runat="server" GridLines="Both" AllowPaging="true" AllowSorting="true" AutoGenerateColumns="false">
                <MasterTableView DataKeyNames="ID" Width="50%" TableLayout="Fixed">
                    <Columns>
                        <telerik:GridTemplateColumn HeaderText="Select">
                            <ItemTemplate>
                                <asp:CheckBox runat="server" ID="chkDeleteAppItem" />
                            </ItemTemplate>
                            <HeaderStyle Width="10%" />
                        </telerik:GridTemplateColumn>
                        
                        <telerik:GridBoundColumn DataField="ID" HeaderText="ID">
                            <HeaderStyle Width="25%" />
                        </telerik:GridBoundColumn>
                        
                        <telerik:GridBoundColumn DataField="FN" HeaderText="FIRST NAME">
                            <HeaderStyle Width="25%" />
                        </telerik:GridBoundColumn>
                    </Columns>
                </MasterTableView>
                <ClientSettings>
                    <Selecting AllowRowSelect="true" />
                    <Scrolling AllowScroll="true" />
                    <Resizing AllowColumnResize="true" />
                </ClientSettings>
            </telerik:RadGrid>

The code behind (but not in direct aspx.cs file) looks like this:

        private static void OnGridRecordChanged(object sender, EventArgs e)
        {
            var viewFrameControl = sender as GridFrameControl;
            if (viewFrameControl == null)
            {
                throw new ParusException("Unable to get viewframecontrol!");
            }

            if (CacheInfoRequest.CacheRequest)
            {
                Dictionary<string, Person> dict = new Dictionary<string, Person>()
                {
                    { "1", new Person { FirstName = "Andrey", LastName = "Andreyev" }},
                    { "2", new Person { FirstName = "Sergey", LastName = "Sergeyev" }},
                    { "3", new Person { FirstName = "Igor", LastName = "Igorev" }},
                    { "4", new Person { FirstName = "Vladimir", LastName = "Vladimirov" }},
                    { "5", new Person { FirstName = "Oleg", LastName = "Olegov" }}
                };

                List<BindItem> list = new List<BindItem>();
                foreach (KeyValuePair<string, Person> dictItem in dict)
                {
                    BindItem bindItem = new BindItem();
                    bindItem.ID = dictItem.Key;
                    bindItem.FN = dictItem.Value.FirstName;
                    list.Add(bindItem);
                }

                Control ctrlParent = viewFrameControl.Parent;
                RadGrid grdDetail = ctrlParent.FindControl("grdDetails") as RadGrid;

                grdDetail.BackColor = Color.Green;

                grdDetail.DataSource = list;
                grdDetail.DataBind();
            }
        }

When I select the row in first grid, nothing happens.

I appreciate any help.

Thank you in advance.

Goran

11 Answers, 1 is accepted

Sort by
0
Accepted
Jayesh Goyani
Top achievements
Rank 2
answered on 26 Jun 2012, 02:39 PM
Hello,

<telerik:RadGrid ID="RadGrid2" runat="server" AutoGenerateColumns="false" OnNeedDataSource="RadGrid2_NeedDataSource"
           OnItemCommand="RadGrid2_ItemCommand">
           <MasterTableView DataKeyNames="ID">
               <Columns>
                   <telerik:GridBoundColumn HeaderText="Name" DataField="Name" UniqueName="Name">
                   </telerik:GridBoundColumn>
               </Columns>
           </MasterTableView>
           <ClientSettings EnablePostBackOnRowClick="true">
               <Selecting AllowRowSelect="true" />
           </ClientSettings>
       </telerik:RadGrid>
       <telerik:RadGrid ID="RadGrid3" runat="server" AutoGenerateColumns="false">
           <MasterTableView>
               <Columns>
                   <telerik:GridBoundColumn HeaderText="ID" DataField="ID" UniqueName="ID">
                   </telerik:GridBoundColumn>
                   <telerik:GridBoundColumn HeaderText="Name" DataField="Name" UniqueName="Name">
                   </telerik:GridBoundColumn>
               </Columns>
           </MasterTableView>
       </telerik:RadGrid>
protected void RadGrid2_NeedDataSource(object sender, GridNeedDataSourceEventArgs e)
   {
       dynamic data = new[] {
               new { ID = 1, Name ="Name1"},
               new { ID = 2, Name = "Name2"},
               new { ID = 3, Name = "Name3"}
           };
 
 
       RadGrid2.DataSource = data;
   }
 
   protected void RadGrid2_ItemCommand(object sender, GridCommandEventArgs e)
   {
       if (e.CommandName == "RowClick")
       {
           GridDataItem item = e.Item as GridDataItem;
           string strID = item.GetDataKeyValue("ID").ToString();
           string strName = item["Name"].Text;
 
           dynamic data = new[] {
               new { ID = strID, Name ="Name_1"},
               new { ID = strID, Name = "Name_2"},
               new { ID = strID, Name = "Name_3"},
               new { ID = strID, Name = "Name_4"},
               new { ID = strID, Name = "Name_5"}
           };
           RadGrid3.DataSource = data;
           RadGrid3.DataBind();
       }
   }


Thanks,
Jayesh Goyani
0
Goran
Top achievements
Rank 1
answered on 27 Jun 2012, 06:39 AM
Thank you Jayesh. It works.

There's only one thing that is not desired in this case - when I click row in first grid it's highlighted and highlighting disappears after short time. How can I keep the selected row highlighted?
0
Goran
Top achievements
Rank 1
answered on 27 Jun 2012, 06:43 AM
As I can see the highlight disappears because of this:

EnablePostBackOnRowClick="true"

that is because of post back.

How can I handle it?
0
Jayesh Goyani
Top achievements
Rank 2
answered on 27 Jun 2012, 02:08 PM
Hello,

I am not able to reproduce this issue in above code.

You may get this issue because after postback it will take some time to reload.

Try to avoid full postback with RadAjaxManager or UpdatePanel.

Thanks,
Jayesh Goyani
0
Goran
Top achievements
Rank 1
answered on 28 Jun 2012, 05:05 AM
RadAjaxManager is already there.

The aspx file looks as follows:

<%@ Page Title="" Language="C#" MasterPageFile="~/ViewFormPage.master" AutoEventWireup="true" CodeBehind="CacheManager.aspx.cs" Inherits="Parus.WebClient.CacheManager" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

<asp:Content ID="CacheManagerContent" ContentPlaceHolderID="ViewFormPlaceHolder" runat="server">

    <telerik:RadAjaxManager ID="AjaxManager" runat="server" DefaultLoadingPanelID="AjaxLoadingPanel" />
    <telerik:RadSplitter ID="viewSplitter" runat="server" Width="100%" Orientation="Horizontal">

        <telerik:RadPane ID="RadPane1" runat="server" Width="100%" Height="100%">
            <telerik:RadGrid ID="grdDetails" runat="server" GridLines="Both" AutoGenerateColumns="false" Width="50%" OnItemCommand="grdDetails_ItemCommand">
                <MasterTableView DataKeyNames="ID">
                    <Columns>
                        <telerik:GridTemplateColumn HeaderText="Select">
                            <ItemTemplate>
                                <asp:CheckBox runat="server" ID="chkDeleteAppItem" />
                            </ItemTemplate>
                        </telerik:GridTemplateColumn>
                        <telerik:GridBoundColumn DataField="ID" HeaderText="ID">
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn DataField="FN" HeaderText="FIRST NAME">
                        </telerik:GridBoundColumn>
                    </Columns>
                </MasterTableView>
                <ClientSettings EnablePostBackOnRowClick="true">
                    <Selecting AllowRowSelect="true" />
                </ClientSettings>
            </telerik:RadGrid>
            <telerik:RadGrid ID="RadGrid1" runat="server" GridLines="Both" AutoGenerateColumns="false" Width="50%" Height="200px">
                <MasterTableView>
                    <Columns>
                        <telerik:GridBoundColumn DataField="Name" HeaderText="NAME">
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn DataField="Type" HeaderText="TYPE">
                        </telerik:GridBoundColumn>
                    </Columns>
                </MasterTableView>
                <ClientSettings>
                    <Selecting AllowRowSelect="true" />
                </ClientSettings>
            </telerik:RadGrid>
        </telerik:RadPane>
    
    </telerik:RadSplitter>

</asp:Content>

As you can see there is master page around the content page above. But there is nothing special on master page. RadMenu is on master page and some simple non-Telerik controls.

I've tried to put standard UpdatePanel around both grids, but it doesn't help.

Do you have some another suggestion?
0
Matthew
Top achievements
Rank 1
answered on 31 Mar 2014, 09:09 PM
Goran, 

I realize your last post was over two years ago, but were you ever able to find a solution to the row highlight disappearing? I am experiencing the same issue. 

Thank you. 
0
Princy
Top achievements
Rank 2
answered on 01 Apr 2014, 08:22 AM
Hi Matthew,

Its hard to identify the issue with so less information, please provide your full code snippet. Make sure you have  AllowRowSelect="True" and if you want to set color for the selected row, you can try the following CSS:

CSS:
<style type="text/css">
  .RadGrid_SkinName .rgSelectedRow td
  {
    background-color: Blue !important;
    border-bottom-color: Blue !important;
  }
</style>

Thanks,
Princy
0
Matthew
Top achievements
Rank 1
answered on 01 Apr 2014, 02:35 PM
<%@ Page Title="" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" Inherits="Default2" Codebehind="CourseSpecialExam.aspx.cs" %>
 
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
 
 
 
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" Runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="FeaturedContent" Runat="Server">
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="MainContent" Runat="Server">
 
    <telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server" Height="200px" Width="1500px">
            
   
            <telerik:RadGrid ID="RadGrid1" runat="server" AllowSorting="True" DataSourceID="SqlDataSource1" Height="222px" CellSpacing="0" GridLines="None" OnItemCommand="RadGrid1_ItemCommand">
                <ClientSettings AllowKeyboardNavigation="true" EnablePostBackOnRowClick="True">
 
                    <Selecting AllowRowSelect="True" />
                    <Scrolling AllowScroll="True" UseStaticHeaders="True" />
                </ClientSettings>
                <MasterTableView AutoGenerateColumns="False" DataSourceID="SqlDataSource1" DataKeyNames="SpecExamID" >
                    <CommandItemSettings ExportToPdfText="Export to PDF" />
                    <RowIndicatorColumn FilterControlAltText="Filter RowIndicator column" Visible="True">
                    </RowIndicatorColumn>
                    <ExpandCollapseColumn FilterControlAltText="Filter ExpandColumn column" Visible="True">
                    </ExpandCollapseColumn>
                    <Columns>
                        <telerik:GridBoundColumn DataField="Exam_Date" DataType="System.DateTime" FilterControlAltText="Filter Exam_Date column" HeaderText="Exam_Date" SortExpression="Exam_Date" UniqueName="Exam_Date">
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn DataField="FULL_NAME" FilterControlAltText="Filter FULL_NAME column" HeaderText="FULL_NAME" SortExpression="FULL_NAME" UniqueName="FULL_NAME">
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn DataField="Course_Name" FilterControlAltText="Filter Course_Name column" HeaderText="Course_Name" SortExpression="Course_Name" UniqueName="Course_Name">
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn DataField="Proc_Name" FilterControlAltText="Filter Proc_Name column" HeaderText="Proc_Name" SortExpression="Proc_Name" UniqueName="Proc_Name">
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn DataField="LocCity" FilterControlAltText="Filter LocCity column" HeaderText="LocCity" SortExpression="LocCity" UniqueName="LocCity">
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn DataField="LocState" FilterControlAltText="Filter LocState column" HeaderText="LocState" SortExpression="LocState" UniqueName="LocState">
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn DataField="Date_Graded" DataType="System.DateTime" FilterControlAltText="Filter Date_Graded column" HeaderText="Date_Graded" SortExpression="Date_Graded" UniqueName="Date_Graded">
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn DataField="Score" DataType="System.Decimal" FilterControlAltText="Filter Score column" HeaderText="Score" SortExpression="Score" UniqueName="Score">
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn DataField="Pass_Fail" FilterControlAltText="Filter Pass_Fail column" HeaderText="Pass_Fail" SortExpression="Pass_Fail" UniqueName="Pass_Fail">
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn DataField="SpecExamID" DataType="System.Int32" FilterControlAltText="Filter SpecExamID column" HeaderText="SpecExamID" ReadOnly="True" SortExpression="SpecExamID" UniqueName="SpecExamID">
                        </telerik:GridBoundColumn>
 
                    </Columns>
                    <EditFormSettings>
                        <EditColumn FilterControlAltText="Filter EditCommandColumn column">
                        </EditColumn>
                    </EditFormSettings>
                </MasterTableView>
                <FilterMenu EnableImageSprites="False">
                </FilterMenu>
         </telerik:RadGrid>
                      
         <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:Professional_DevelopmentConnectionString2 %>" SelectCommand="SELECT [Exam_Date], [FULL_NAME], [Course_Name], [Proc_Name], [LocCity], [LocState], [Date_Graded], [Score], [Pass_Fail], [SpecExamID] FROM [vSpecExam]"></asp:SqlDataSource>
 
   </telerik:RadAjaxPanel>
   </asp:Content>

Code-behind:

protected void RadGrid1_ItemCommand(object sender, GridCommandEventArgs e)
{
    RadGrid FilesRadGrid = RadAjaxPanel1.FindControl("RadGrid1") as RadGrid;
 
    if (FilesRadGrid.SelectedItems.Count > 0)
    {
        //access an integer value
        int value = (int)FilesRadGrid.SelectedValues["SpecExamID"];
          
    }

Princy,

Hello! And thank you for the reply. Sorry about the lack of info with my last post, but my issue seems to be the same as Goran's. 

I have 'EnablePostBackOnRowClick' set to true. When user clicks on radgrid row the highlight appears and then instantly disappears on the postback. And any attempt to access a selected column value returns null or 0. 

I understand my code behind function may be incorrect, but it is my last attempt on trying to get the value.

I noticed that if I remove the master/content page properties, everything works as it should. The row highlight remains on selected row, and I'm able to obtain column values. The RadScriptManager and RadAjaxManager are in the master page. I developed my project using the VS Express 2013 web application template. 

Your assistance is greatly appreciated.

Matt
0
Matthew
Top achievements
Rank 1
answered on 01 Apr 2014, 03:13 PM
Princy,

I think maybe a better approach to helping me with my issue would be the following. 

If you can implement the RadGrid Master/Detail example as a content page of a master, ensuring selected row persists and values can be obtained (like the Master/Detail RadGrid example), then providing me with the code would be definitely set me on the right path. 

Example I am referencing: http://demos.telerik.com/aspnet-ajax/grid/examples/data-binding/master-detail/defaultcs.aspx









0
Princy
Top achievements
Rank 2
answered on 02 Apr 2014, 05:42 AM
Hi Matthew,

Please take a look at the sample code snippet.

Master.master:
<head runat="server">
    <title></title>
    <asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        Master-Detail
        <asp:ScriptManager ID="ScriptManager" runat="server" />
        <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
        </telerik:RadAjaxManager>
        <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
        </asp:ContentPlaceHolder>
    </div>
    </form>
</body>

Child.aspx:
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
    <telerik:RadAjaxManagerProxy ID="RadAjaxManagerProxy" runat="server">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="RadGrid1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadGrid1"></telerik:AjaxUpdatedControl>
                    <telerik:AjaxUpdatedControl ControlID="RadGrid2" LoadingPanelID="RadAjaxLoadingPanel1">
                    </telerik:AjaxUpdatedControl>
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="RadGrid2">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadGrid2"></telerik:AjaxUpdatedControl>
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManagerProxy>
    <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Skin="Default">
    </telerik:RadAjaxLoadingPanel>
    <h3>
        Customers:</h3>
    <telerik:RadGrid ID="RadGrid1" runat="server" AllowPaging="true" PageSize="5" DataSourceID="SqlDataSource1"  OnItemCommand="RadGrid1_ItemCommand">
        <ClientSettings AllowKeyboardNavigation="true" EnablePostBackOnRowClick="true">
            <Selecting AllowRowSelect="true"></Selecting>
        </ClientSettings>
        <MasterTableView DataKeyNames="CustomerID">
        </MasterTableView>
        <PagerStyle Mode="NextPrevAndNumeric"></PagerStyle>
    </telerik:RadGrid>
    <br />
    <br />
    <h3>
        Orders:</h3>
    <telerik:RadGrid ID="RadGrid2" ShowStatusBar="true" runat="server" AllowPaging="True" PageSize="5" DataSourceID="SqlDataSource2">
        <MasterTableView Width="100%" AutoGenerateColumns="False" DataKeyNames="OrderID"
            DataSourceID="SqlDataSource2">
            <Columns>
                <telerik:GridBoundColumn DataField="OrderID" DataType="System.Int32" HeaderText="OrderID" ReadOnly="True" SortExpression="OrderID" UniqueName="OrderID">
                </telerik:GridBoundColumn>
                <telerik:GridBoundColumn DataField="OrderDate" DataType="System.DateTime" HeaderText="OrderDate" SortExpression="OrderDate" UniqueName="OrderDate" DataFormatString="{0:d}">
                </telerik:GridBoundColumn>
                <telerik:GridBoundColumn DataField="ShipCountry" HeaderText="ShipCountry" SortExpression="ShipCountry" UniqueName="ShipCountry">
                </telerik:GridBoundColumn>
            </Columns>
        </MasterTableView>
        <ClientSettings AllowKeyboardNavigation="true" EnablePostBackOnRowClick="true">
            <Selecting AllowRowSelect="true"></Selecting>
        </ClientSettings>
        <PagerStyle Mode="NextPrevAndNumeric"></PagerStyle>
    </telerik:RadGrid>
    <asp:SqlDataSource ID="SqlDataSource1" ConnectionString="<%$ ConnectionStrings:ConnectionString %>"
        ProviderName="System.Data.SqlClient" SelectCommand="SELECT CustomerID, CompanyName, ContactName, ContactTitle, Address, PostalCode FROM Customers"
        runat="server"></asp:SqlDataSource>
    <asp:SqlDataSource ID="SqlDataSource2" ConnectionString="<%$ ConnectionStrings:ConnectionString %>"
        ProviderName="System.Data.SqlClient" SelectCommand="SELECT [OrderID], [OrderDate], [CustomerID], [ShipCountry] FROM [Orders] WHERE ([CustomerID] = @CustomerID)"
        runat="server">
        <SelectParameters>
            <asp:ControlParameter ControlID="RadGrid1" DefaultValue="ALFKI" Name="CustomerID" PropertyName="SelectedValue" Type="String"></asp:ControlParameter>
        </SelectParameters>
    </asp:SqlDataSource>
</asp:Content>

Child.c#:
protected void Page_PreRender(object sender, EventArgs e)
{
    if (RadGrid1.SelectedIndexes.Count == 0)
        RadGrid1.SelectedIndexes.Add(0);
    if (RadGrid2.SelectedIndexes.Count == 0)
    {
        RadGrid2.Rebind();
        RadGrid2.SelectedIndexes.Add(0);
    }
}
 
protected void RadGrid1_ItemCommand(object sender, GridCommandEventArgs e)
{
    RadGrid2.SelectedIndexes.Clear();
    if (e.CommandName == "RowClick")
    {
        GridDataItem item = (GridDataItem)e.Item;
        string id=item["CustomerID"].Text;// Selected rows ID
    }
}

Thanks,
Princy
0
Matthew
Top achievements
Rank 1
answered on 03 Apr 2014, 04:08 PM
Princy,

Many thanks for the example! I was able to radgrid working. 

Matt
Tags
Grid
Asked by
Goran
Top achievements
Rank 1
Answers by
Jayesh Goyani
Top achievements
Rank 2
Goran
Top achievements
Rank 1
Matthew
Top achievements
Rank 1
Princy
Top achievements
Rank 2
Share this question
or