@page "/"
@using Syncfusion.Blazor.Grids

<table style="width: 100%">
    <tr>
        <td style="width:50%">
            <SfGrid DataSource="@TeamList" AllowTextWrap="true" AllowPaging="true" @ref="TeamListGrid" AllowSelection="true">
               <GridSelectionSettings Mode="SelectionMode.Row" Type="Syncfusion.Blazor.Grids.SelectionType.Single"></GridSelectionSettings>
               <GridEvents TValue="TeamNames" DataBound="DataBound_TeamListGrid" RowSelected="TeamHasBeenSelected"></GridEvents>
               <GridColumns>
                  <GridColumn Field=@nameof(TeamNames.TeamName) HeaderText="Team Name" TextAlign="TextAlign.Left" Width="100"></GridColumn>
               </GridColumns>
             </SfGrid>

        </td>
        <td style="width:50%; vertical-align:top">
             <SfGrid DataSource="@TeamMembersList" AllowTextWrap="true" AllowPaging="true" @ref="MembersListGrid">
                <GridEvents TValue="TeamMembers"></GridEvents>
                 <GridColumns>
                    <GridColumn Field=@nameof(TeamMembers.TeamMember) HeaderText="@MembersGridHeader" TextAlign="TextAlign.Left" Width="100"></GridColumn>
                  </GridColumns>
              </SfGrid>
        </td>
    </tr>
</table>


@code {
    SfGrid<TeamNames> TeamListGrid;
    SfGrid<TeamMembers> MembersListGrid;

    public List<TeamNames> TeamList { get; set; }
    public List<TeamMembers> TeamMembersList { get; set; }

    public string MembersGridHeader = "";

    public class TeamNames
    {
        public string TeamID { get; set; }
        public string TeamName { get; set; }
    }

    public class TeamMembers
    {
        public string TeamID { get; set; }
        public string TeamMember { get; set; }
    }


    protected override void OnInitialized()
    {
        TeamList = LoadTeamGrid();
    }

    public List<TeamNames> LoadTeamGrid()
    {
        List<TeamNames> getTeamList = new List<TeamNames>();
        for (int i = 1; i < 5; i++)
        {
            TeamNames tList = new TeamNames();
            tList.TeamName = "Team - " + i;
            tList.TeamID = i.ToString();
            getTeamList.Add(tList);
        }
        return getTeamList;
    }

    public void TeamHasBeenSelected(RowSelectEventArgs<TeamNames> args)
    {
        var teamID = args.Data.TeamID;
        GetTeamMembersList(teamID);
    }

    public void DataBound_TeamListGrid(object args)
    {
        double tindex = 0;
        this.TeamListGrid.SelectRow(tindex);
        //  IDofTheSelectedTeam = this.TeamListGrid.SelectedRecords[0].TeamID;
    }

    public void GetTeamMembersList(string teamID)
    {
        List<TeamMembers> theMembersList = new List<TeamMembers>();

        switch (teamID)
        {
            case "1":
                for (int i = 1; i < 5; i++)
                {
                    TeamMembers tList = new TeamMembers();
                    tList.TeamMember = "Team 1 Member - " + i;
                    theMembersList.Add(tList);
                }
                MembersGridHeader = "Members of Team 1";
                TeamMembersList = theMembersList;
                break;

            case "2":
                for (int i = 1; i < 3; i++)
                {
                    TeamMembers tList = new TeamMembers();
                    tList.TeamMember = "Team 2 Member - " + i;
                    theMembersList.Add(tList);
                }
                MembersGridHeader = "Members of Team 2";
                TeamMembersList = theMembersList;
                break;

            case "3":

                MembersGridHeader = "Members of Team 3";
                TeamMembersList = theMembersList;
                break;

            case "4":
                for (int i = 1; i < 2; i++)
                {
                    TeamMembers tList = new TeamMembers();
                    tList.TeamMember = "Team 4 Member - " + i;
                    theMembersList.Add(tList);
                }
                MembersGridHeader = "Members of Team 4";
                TeamMembersList = theMembersList;
                break;
        }


    }

}