Master details Grid

[Francesco Pruneri]

good morning, I am trying to make a master details table. One thing is not clear to me : when and how do I apply the query on the secondary datosource ? is there an event that refers to the click of the button that shows the detail ? for now without filter my table works but obviously with all the data without filter applied

With lead.Id i must filter the datasource of lead activity

<SfGrid @ref="LeadsGrid" DataSource="@LeadsDataSource">

     <GridTemplates>

        <DetailTemplate>

            <SfTimeline Orientation=TimelineOrientation.Horizontal>

                <TimelineItems >

                @foreach (var item in LeadActivitiesDataSource)

                {

                    <TimelineItem>

                        <Content Context="attivita" > @item.Subject @item.StartDate</Content>

                    </TimelineItem>

                }

                </TimelineItems>

            </SfTimeline>

        </DetailTemplate>

    </GridTemplates>

    <GridEvents QueryCellInfo="CustomizeCell" TValue="Lead"></GridEvents>

    <GridColumns>

        <GridColumn HeaderText="Action" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Center" Width="60">

            <Template>

                @{

                    var item = (context as Lead);

                    <SfButton IconCss="e-icons e-clock" OnClick="@(()=>Clicked(item))"></SfButton>

                }

            </Template>

        </GridColumn>

        <GridColumn Field="LeadType.Name" HeaderText="Tipo" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Left" Width="80"></GridColumn>

        <GridColumn Field="LeadStatus.Name" HeaderText="Status" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Left" Width="80"></GridColumn>

        <GridColumn Field="LeadSource.Name" HeaderText="Source" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Left" Width="80"></GridColumn>

        <GridColumn Field=@nameof(Lead.ContactName) HeaderText="Contatto" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Left" Width="140"></GridColumn>

        <GridColumn Field=@nameof(Lead.Subject) HeaderText="Oggetto" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Left" Width="140"></GridColumn>

        <GridColumn Field=@nameof(Lead.StartDate) HeaderText="Inizio" Format="d"TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right" Width="90"></GridColumn>

        <GridColumn Field=@nameof(Lead.ActualEndDate) HeaderText="Fine" Format="d" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right" Width="90"></GridColumn>

        </GridColumns>

</SfGrid>

  // Nome della tabella

  public SfGrid<Lead> LeadsGrid { get; set; }

  // oggetto query per DD Progetti

  public Query LeadDDQuery { get; set; } = new Query();

  // record

  public Lead? LeadRecord = new Lead();

  // lista lead

  public List<Lead>? LeadsDataSource = new List<Lead>();

 // lista attività lead

 public List<LeadActivity>? LeadActivitiesDataSource = new List<LeadActivity>();

[Prathap Senthil]

Hi Francesco,

Based on the reported requirement, we suggest using the "DetailsExpanded" event to get the current expanded row data, filter the LeadActivitiesDataSource, and assign the datasource to the timeline component. Kindly refer to the code snippet below for your reference.

<SfGrid ID="Grid" >

    <GridEvents DetailsExpanded="DetailExpnadedEvent" TValue="OrderData"></GridEvents>

    </GridColumns>

</SfGrid>

 

@code {
    public async Task DetailExpnadedEvent(DetailsExpandedEventArgs<OrderData> args)

    {

        var data = args.Data;

 

        //here you can  filter the LeadActivitiesDataSource and pass the datasource to timeline component

    }

 

 

Reference:

Event name	Description
DetailsExpanding	An Event that is raised when Detail template row is clicked to expand, you can also cancel this action by using Cancel property provided in the event args.
DetailsExpanded	An Event that is raised after Detail Template row is expanded.

https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.DetailsExpandedEventArgs-1.html
https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.DetailsExpandingEventArgs-1.html

Regards,
Prathap Senthil