Master/Details Grids

2 posts, 0 answers
  1. Allan
    Allan avatar
    121 posts
    Member since:
    Jun 2008

    Posted 14 Feb 2011 Link to this post

    Hopefully this is an easy one.

    I have two related grids on a form and I am using a Master/Detail setup as described in one of the demos and this works great.

    Here is my ASPX Code

    <telerik:RadGrid ID="rgd_UserJobRoles" runat="server" DataSourceID="sds_UserJobRoles" 
        GridLines="None" Width="245px">
        <clientsettings allowkeyboardnavigation="true" enablepostbackonrowclick="true">
                <Selecting AllowRowSelect="true" />
        </clientsettings>
        <MasterTableView DataKeyNames="DbRole" AutoGenerateColumns="False" DataSourceID="sds_UserJobRoles">
            <RowIndicatorColumn>
            <HeaderStyle Width="20px"></HeaderStyle>
            </RowIndicatorColumn>
            <ExpandCollapseColumn>
            <HeaderStyle Width="20px"></HeaderStyle>
            </ExpandCollapseColumn>
                <Columns>
                    <telerik:GridBoundColumn DataField="DbRole" HeaderText="Job Roles" 
                        SortExpression="DbRole" UniqueName="DbRole">
                    </telerik:GridBoundColumn>
                </Columns>
        </MasterTableView>
    </telerik:RadGrid>
      
      
    <telerik:RadGrid ID="rgd_UserTaskRoles" runat="server" DataSourceID="sds_UserTaskRoles" 
        GridLines="None" Width="245px">
        <MasterTableView AutoGenerateColumns="False" DataSourceID="sds_UserTaskRoles">
        <RowIndicatorColumn>
        <HeaderStyle Width="20px"></HeaderStyle>
        </RowIndicatorColumn>
        <ExpandCollapseColumn>
        <HeaderStyle Width="20px"></HeaderStyle>
        </ExpandCollapseColumn>
            <Columns>
                <telerik:GridBoundColumn DataField="UserName" HeaderText="UserName" 
                    SortExpression="UserName" UniqueName="UserName" Visible="False">
                </telerik:GridBoundColumn>
                <telerik:GridBoundColumn DataField="RoleName" HeaderText="Task Roles" 
                    SortExpression="RoleName" UniqueName="RoleName" HeaderStyle-HorizontalAlign="Center">
                </telerik:GridBoundColumn>
            </Columns>
        </MasterTableView>
    </telerik:RadGrid>
      
      
    <asp:SqlDataSource ID="sds_UserJobRoles" runat="server" 
    ConnectionString="<%$ ConnectionStrings:AeriesAdmin_ConnectionString %>" 
    SelectCommand="SELECT [MemberName], [DbName], [DbRole] FROM [Aeries_RoleMembers] WHERE (([DbName] = @DbName) AND ([MemberName] = @UserName)) AND [DbRole] LIKE '%jr_%'">
    <SelectParameters>
        <asp:ControlParameter ControlID="rcb_Database" Name="DbName" PropertyName="SelectedValue" Type="String" />
        <asp:ControlParameter ControlID="rcb_Users" Name="UserName" PropertyName="SelectedValue" Type="String" />
    </SelectParameters>
    </asp:SqlDataSource>
      
      
    <asp:SqlDataSource ID="sds_UserTaskRoles" runat="server" 
        ConnectionString="<%$ ConnectionStrings:AeriesAdmin_ConnectionString %>" 
        SelectCommand="SELECT DISTINCT [UserName], [RoleName] FROM [vw_AA_Users] WHERE ([UserName] = @DbRole)">
        <SelectParameters>
            <asp:ControlParameter ControlID="rgd_UserJobRoles" Name="DbRole" PropertyName="SelectedValue" Type="String" />
        </SelectParameters>
    </asp:SqlDataSource>
      
      
    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
        <ajaxsettings>
            <telerik:AjaxSetting AjaxControlID="rgd_UserJobRoles">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="rgd_UserJobRoles" />
                    <telerik:AjaxUpdatedControl ControlID="rgd_UserTaskRoles" />
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="rgd_UserTaskRoles">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="rgd_UserTaskRoles" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </ajaxsettings>
    </telerik:RadAjaxManager>

    And here is my VB code

    Protected Sub Page_PreRender(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.PreRender
        If rgd_UserJobRoles.SelectedIndexes.Count = 0 AndAlso rgd_UserTaskRoles.SelectedIndexes.Count = 0 Then
            rgd_UserJobRoles.SelectedIndexes.Add(0)
            rgd_UserTaskRoles.SelectedIndexes.Add(0)
        End If
    End Sub

    Rather than have the user select a row from the master grid, what I would like to accomplish is to not require the user to select anything in the master grid. I would prefer that when the master grid has data in it, the details grid automatically displays the related data.

    Example Data

    User Job Role - OfficeAssistant    has the related TaskRolls - BasicUsage, StudentView, and ViewAllTables
    User Job Role - AttendanceClerk  has the related TaskRolls - AbsenceLetters, CurrentClasses, Contacts, Disipline

    When a user selects a UserName from a Dropdown list, the master grid would populate with the user's Job Roles and the related grid would automatically populate with the Task Roles for both Job Roles.

       Job Roles                          Task Rolls
    ------------------                ------------------
    OfficeAssistant                  BasicUsage,
    AttendanceClerk                StudentView
                                           ViewAllTables
                                           AbsenceLetters
                                           CurrentClasses
                                           Contacts
                                           Disipline

    I hope this makes sence.

  2. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 16 Feb 2011 Link to this post

    Hello Allan,

    You can try the following approach to achieve this.
    I guess the DropDownList is outside RadGrid. Attach 'onselectedindexchanged' event to DropDownList and call the Rebind() method which in turn call the NeedDataSource event. In the NeedDataSource event populate the grid(with the user's Job Roles) based on the selected value(UserName) of DropDownList.
    In order to populate DetailTable(with Task Roles), attach 'OnDetailTableDataBind' event to RadGrid. In that event handler access the corresponding parent gridDataItem and get the corresponding 'JobRole'. Based on the 'JobRole', you can populate DetailTable.

    Sample code is given below.
    ASPX:
    <asp:DropDownList ID="DropDownList1" runat="server" DataSourceID="SqlDataSource1"
        AutoPostBack="true" DataTextField="UserName" DataValueField="UserName" OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged">
    </asp:DropDownList>
    <br />
    <telerik:RadGrid ID="RadGrid2" AutoGenerateColumns="False" runat="server" OnDetailTableDataBind="RadGrid2_DetailTableDataBind"
        OnNeedDataSource="RadGrid2_NeedDataSource">
        <MasterTableView  HierarchyDefaultExpanded="true">
            <Columns>
                <telerik:GridBoundColumn DataField="UserName"  UniqueName="UserName">
                </telerik:GridBoundColumn>
                <telerik:GridBoundColumn DataField="JobRoles"  UniqueName="JobRoles">
                </telerik:GridBoundColumn>
           </Columns>
            <DetailTables>
                <telerik:GridTableView CommandItemDisplay="Top" runat="server">
                    <Columns>
                        <telerik:GridBoundColumn DataField="TaskRolls" UniqueName="TaskRolls">
                        </telerik:GridBoundColumn>
                    </Columns>
                </telerik:GridTableView>
            </DetailTables>
        </MasterTableView>
    </telerik:RadGrid>

    C#:
    protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e)
       {
           RadGrid2.Rebind();
       }
       protected void RadGrid2_NeedDataSource(object sender, GridNeedDataSourceEventArgs e)
       {
           string selected_role=DropDownList1.SelectedValue;
              //based on selected value of DropDownList populate master table
               RadGrid2.DataSource = dt;
       }
       protected void RadGrid2_DetailTableDataBind(object sender, GridDetailTableDataBindEventArgs e)
       {
           GridDataItem dataItem = e.DetailTableView.ParentItem;
           string role = dataItem["JobRoles"].Text;
             //based on 'Jobrole' populate detail table
           e.DetailTableView.DataSource = dt;
       }

    Hope this information helps,
    Princy.
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top