Displaying data inside grid2 based on row selection in grid1

[Junaid]

Good day,

I have two grids on one page. Both grids get the data from the database. Now for each grid there is a table inside the Database. Let's say table1 and table2. Table1 provides data to grid1 and table2 provides data to grid2. Both tables are connected with each other through a  primary/foreign key relationship. 

Now, I want to click a row in table1 and then show data related to the clicked row in the table2. Like an event should fire upon clicking a row in table1, then I should be able to fetch some of the clicked row's properties and then send these values to API and fetch data accordingly for table 2. I only want to know how onclick event works for row and how to fetch data from the clicked row. 

To achieve the same in jQuery we can call onclick events on table1, get its properties values and then make an ajax call to API and populate the table2. What's the equivalent of that in Syncfusion Blazor Grid? 

Thanks in advance.

Regards.

Junaid

[Vignesh Natarajan]

Hi Junaid,  

Greetings from Syncfusion support.  

Query: “What's the equivalent of that in Syncfusion Blazor Grid? ” 

  

We suggest you to achieve your requirement using RowSelected event of EjsGrid. This event will be triggered once a row gets selected. In the event arguments you can get the selected row details. Refer the below code example.  

 

Master Grid 

<EjsGrid DataSource="@Orders" SelectedRowIndex="0" AllowPaging="true"> 

    <GridEvents RowSelected="RowSelecthandler" TValue="Order"></GridEvents> 

. . . . . . . .. . . . . . . 

</EjsGrid> 

 

Details Grid 

 

<EjsGrid DataSource="@Employees" Query="@($"new ej.data.Query().where('EmployeeID', 'equal', {SelValue})")" AllowPaging="true"> 

. . . . . . .. . . . . 

</EjsGrid> 

 

@code{ 

    public List<EmployeeData> Employees { get; set; } 

    public List<Order> Orders { get; set; } 

    public int? SelValue = 0; 

    public void RowSelecthandler(RowSelectEventArgs<Order> Args) 

    { 

        SelValue = Args.Data.EmployeeID; 

    } 

. . . . .. . . . . ..  

 

    public class Order 

    { 

  . . .. .  

        public int? EmployeeID { get; set; } 

       . . . . .. . .  

} 

    public class EmployeeData 

    { 

        public int? EmployeeID { get; set; } 

. . . .. . . . . 

    } 

} 

 

Since you want to filter the second Grid based on Selected Row value of first Grid, we suggest you to filter the second Grid using Query property.   

https://ej2.syncfusion.com/blazor/documentation/grid/data-binding/#change-query-parameter-value-dynamically  

For your convenience we have prepared a sample which can be downloaded from below  

Sample: https://www.syncfusion.com/downloads/support/forum/149487/ze/BlazorApp1-1836327860  

Refer our UG documentation for your reference 

https://ej2.syncfusion.com/blazor/documentation/grid/events/#rowselected  

Please get back to us if you have further queries.  

Regards, 

Vignesh Natarajan.  

[Junaid]

Good day,

That solved my problem. Thank you so much. I just have one little query regarding the same. Now I want to display the ID and another field of the selected row from grid1 in the 'add new record dialog' of grid2? 

Regards.
Junaid

[Vignesh Natarajan]

Hi Junaid,  

Thanks for the update.  

Query: “Now I want to display the ID and another field of the selected row from grid1 in the 'add new record dialog' of grid2?” 

 

We understand that you want to customize (show the details of FirstGrid value) the add dialog of EjsGrid (second Grid). We suggest you to achieve your requirement using Dialog template feature of EjsGrid. Dialog Template allow us to customize the edit / add dialog of Grid. You can customize the Second Grid’s edit dialog and display the values of selected rows from First Grid.  

Refer our UG documentation for your reference 

https://ej2.syncfusion.com/blazor/documentation/grid/editing/#dialoginline-template   

Please get back to us with more details, if above solution does not resolve your query.. 

Regards, 

Vignesh Natarajan.  

[Junaid]

Good day,

Thanks for your reply. I have gotten the value of both 'id' and 'projects list' fields from the selected row of grid1. I have also shown the required fields in 'Add New Record Dialog' using the template, but there are some problems.

I used the OnBeginAction handler and changed the value of one dropdown field's 'DataSource' for grid2. This is working fine.

 

public async Task RowSelectHandler(RowSelectEventArgs<Projekte> args) // grid1 

            {

                var id = args.Data.Id; // fetching clicked project's id and

                QueryData = $"new ej.data.Query().addParams('$projId', {id})"; //setting this parameter as a part of Get orders query

                selectedProjNum = args.Data.ProjektNummer;

                projectsDataSource = await Http.GetJsonAsync<List<ProjectVM>>("/Api/Default/GetProjectsList");

            }

public void ActionBeginHandler(ActionEventArgs<Order> args) // grid2

            {

                if ((args.RequestType.ToString() == "Add") && selectedProjNum != null && args.Type == "actionBegin")

                {

                    projectsDataSource = projectsDataSource.Where(m => m.Name == selectedProjNum).ToList(); //select only one project number

                }

            }

The problem1 is: By using the said template when I attempt to edit a row in grid2, row data does not get loaded into the 'Add new record dialog'? The dialog looks like this: 

^You can see none of the fields is populated.

Problem2: I get the following error on the console upon the page load.

Problem3: Nothing is saved upon clicking save in the dialog. No request is made in the Network mode of browser dev. tools.

Kindly help me.

Regards.

Junaid

[Vignesh Natarajan]

Hi Junaid,  

Query1 & 2: “By using the said template when I attempt to edit a row in grid2, row data does not get loaded into the 'Add new record dialog'? &&. I get the following error on the console upon the page load.” 

 

We understand that you are facing issue while editing a record in second Grid with dialog template. The reported issues might occur when Dialog Template elements are not properly initialized or defined. To validate the issue further, we need some more details about your issue. So kindly share the following details.  

1. Share the Full code example of your First Grid, Second Grid and Dialog Template.
2. Share the video demonstration of the reported issue along with replication procedure.
3. Do you want to select the dropdown value by default based on the value selected from first Grid.
4. Kindly share your requirement in detail and also about your foreignkey binding.  
5. If possible, share the issue reproducible sample.    
6. Regarding the script error, are you facing the issue only when rendering the Grid component?.    

Query3: “Nothing is saved upon clicking save in the dialog. No request is made in the Network mode of browser dev. tools” 

Reported issue might occur when ID property of components inside the Dialog Template is not defined properly based on the corresponding Field value.  So kindly ensure that you defined the ID property as same as Field value of Grid Column. If your are still facing the issue, kindly share the details about your Dialog Template and Network tab activity along with above details.  

Requested details will be helpful for us to validate the reported issue at our end and provide solution as early as possible. 

Regards, 

Vignesh Natarajan.