many to many relationship master detail editing

Assume you have Student, Enrollment - junction table, Course. For simplicity, you need to do CRUD only for Student or Enrollment table. How can you detect which row of the master or detail table is edited, is it through Args.Data? To know it is deleting/adding/updating, is it through checking whether Args.RequestType equals Syncfusion.Blazor.Grids.Action.Delete or something similar?


3 Replies

SK Sanjay Kumar Suresh Syncfusion Team February 20, 2025 03:52 PM UTC

Hi Desmond,


Before proceeding with the reported requirement, we require some additional clarification from your end. Please share the below details to proceed further at our end.


  1. Share us the model structure of your project.
  2. Share us your requirement or the behavior you are trying to achieve.
  3. If possible, a short video or screenshot illustrating your expected behavior.
  4. Please share a minimal, runnable sample that reproduces the issue or scenario.


The above requested detail will be very helpful for us to validate the reported issue at our end.


Regards,

Sanjay Kumar Suresh



DE desmond February 21, 2025 02:03 AM UTC

I changed Enrollment to Registration. Here is the table:

5vALo.png The only requirement is you can see student table and registration table, like:

v | Studid| Firstname| Lastname| Street| City| DOB|

CourseName


And then you can add or delete courses through that CourseName detail grid, which adds or removes a row in registration. Also, you can do CRUD for a Student row in the master grid.


The only code I know are these, as you can see, there is no detail grid editing handler:

    public static List<Student> GetStudent()

    {

        List<Student> student = new List<Student>() {    

            new Student { Studid=1, Firstname= "Peter", Lastname="Suresh", Street="1 Santa Street", City="Mexico", DOB=new DateTime(2025, 02, 23)},

            new Student { Studid=2, Firstname= "Sarah", Lastname="Dimino", Street="2 Rocket Street", City="Mexico", DOB=new DateTime(2025, 02, 23)}

        };

        return student;

    }

    public static List<Course> GetCourse()

    {

        List<Course> course = new List<Course>() {    

            new Course { Courseid=1, Coursename= "A class", Duration=5, Fees=2000},

            new Course { Courseid=2, Coursename= "B class", Duration=6, Fees=2000}

        };

       return course;

    }

public class Course

{

    public int Courseid { get; set; }

    public string Coursename { get; set; } 

    public int Duration { get; set; }

    public int Fees { get; set; }


    public IList<Registration> registration { get; set; } = new List<Registration>();

}

public class Student

{

    public int Studid { get; set; }

    public string Firstname { get; set; } 

    public string Lastname { get; set; }

    public string Street { get; set; }

    public string City { get; set; }

    public DateTime DOB { get; set; }

    public IList<Registration> registration { get; set; } = new List<Registration>();

}



And, after the master grid is edited, this is called:

    public void GridEdited(Syncfusion.Blazor.Grids.ActionEventArgs<GanttSegClass> Args)

    {

        if (Args.RequestType.Equals(Syncfusion.Blazor.Grids.Action.Save))

        {

            if (Args.Action == "Add")

            {

                //Add

            }

            else

            {

                //Update

            }

        }

        if (Args.RequestType.Equals(Syncfusion.Blazor.Grids.Action.Delete))

        {

            //Delete

        }

    }

Except the codes in GridEdited should look similar (coz I know someone prefer SfDataManager), other codes provided could be changed.


I think I am not the first asking how to edit normalized many to many relationships using master detail.



SK Sanjay Kumar Suresh Syncfusion Team February 28, 2025 05:22 AM UTC

Hi Desmond,


We have achieved your model class hierarchy using the foreign key data binding considering the Registration table as the main table in the grid. We have created a sample meeting your requirement please check and let us know if you have any questions.


Concern Code Snippet:


 <GridColumns>

        <GridColumn Field=@nameof(Registration.KeyID) HeaderText="Order ID" Visible="true" DefaultValue="@MaxValue" IsPrimaryKey="true" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right" Width="120"></GridColumn>

        <GridForeignColumn Field=@nameof(Registration.CourseID) HeaderText="Course Name" ForeignKeyValue="CourseName" ForeignDataSource="@StudentCourse" Width="150"></GridForeignColumn>

        <GridForeignColumn Field=@nameof(Registration.StudID) HeaderText="First Name" ForeignKeyValue="FirstName" ForeignDataSource="@StudentDetails" Width="150"></GridForeignColumn>

        <GridForeignColumn Field=@nameof(Registration.StudID) HeaderText="Last Name" ForeignKeyValue="LastName" ForeignDataSource="@StudentDetails" Width="150"></GridForeignColumn>

        <GridForeignColumn Field=@nameof(Registration.StudID) HeaderText="Street" ForeignKeyValue="Street" ForeignDataSource="@StudentDetails" Width="150"></GridForeignColumn>

        <GridForeignColumn Field=@nameof(Registration.StudID) HeaderText="City" ForeignKeyValue="City" ForeignDataSource="@StudentDetails" Width="150"></GridForeignColumn>

        <GridForeignColumn Field=@nameof(Registration.StudID) HeaderText="Date of Birth" ForeignKeyValue="DOB" ForeignDataSource="@StudentDetails" Width="150"></GridForeignColumn>

        <GridColumn Field=@nameof(Registration.DOJ) HeaderText="Freight" Format="C2" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right" Width="120"></GridColumn>

    </GridColumns>

 



Playground Sample:

https://blazorplayground.syncfusion.com/hZroZBBbWmuuMfoG


Additional Reference:

https://blazor.syncfusion.com/documentation/datagrid/foreignkey-column
https://blazor.syncfusion.com/demos/datagrid/foreign-key-column?theme=fluent


Regards,

Sanjay Kumar Suresh


Loader.
Up arrow icon