Bind data to a SfDialog in ContextMenu with TreeGrid

[John Johnson]

Hi,

I am using TreeGrid and want to bind data from a cell to a form in SfDialog which is opened from ContextMenu button.

Is there any way to do this?

[Farveen Sulthana Thameeztheen Basha]

Hi John,

Query#:- I am using TreeGrid and want to bind data from a cell to a form in SfDialog which is opened from ContextMenu button.

We have achieved your requirement by placing CustomContext menu using ContextMenuItems property of the TreeGrid. With using ContextMenuItemClicked event, we have rendered SfDialog and pass the

Clicked cell value into the Dialog by assigning into Content property.
You can pass the cell value into SfDialog as per your convenience.

Refer to the code below:-

<SfTreeGrid DataSource="@TreeData" @ref="TreeGrid" IdMapping="TaskId" ParentIdMapping="ParentId" ContextMenuItems="@(new List<ContextMenuItemModel>() { new ContextMenuItemModel { Text = "Show Dialog", Target = ".e-content", Id = "showDialog" } })" TreeColumnIndex="1">

    <TreeGridEvents ContextMenuItemClicked="OnContextMenuClick" TValue="BusinessObject"></TreeGridEvents>

    <TreeGridColumns>

        <TreeGridColumn Field="TaskId" HeaderText="Task ID" IsPrimaryKey="true" Width="80" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right"></TreeGridColumn>

        .   .    .

    </TreeGridColumns>

</SfTreeGrid>

<SfDialog @ref="dialogObj" Content="@content" Visible="false" Target="#target" Width="200px" Height="110px">

    <DialogButtons>

        <DialogButton Content="Submit" IsPrimary="true" OnClick="@Clicked" ></DialogButton>

    </DialogButtons>

</SfDialog>

@code{

    SfTreeGrid<BusinessObject> TreeGrid;

    private SfDialog dialogObj;

    private string content;

   

 

    public List<BusinessObject> TreeData = new List<BusinessObject>();

 

    public void OnContextMenuClick(Syncfusion.Blazor.Grids.ContextMenuClickEventArgs<BusinessObject> args)

    {

 

        var content1 = Syncfusion.Blazor.Data.DataUtil.GetObject(args.Column.Field, args.RowInfo.RowData);  //get the cell value from the corresponding Contextmenu click

        content = content1.ToString();

        if (args.Item.Id == "showDialog")

        {

            dialogObj.Show();

        }

    }

 

    private async Task Clicked(object args)

    {

        await dialogObj.Hide();

    }

}

 

Screenshot:-

Refer to the documentation Link:-

https://blazor.syncfusion.com/documentation/treegrid/context-menu#custom-context-menu-items

https://blazor.syncfusion.com/documentation/context-menu/how-to/open-dialog

Please get back to us if you need any further assistance.

Regards,

Farveen sulthana T