Add custom componente into a cell

[Bulmaro R]

Hello, I´m trying to add a custom componente into a cell , this component opens a SfDialog and into the dialog i added an  SfTextBox to save some annotation, when I click in SfTextBox, the focus goes to cell and can't write in text field

Thanks in advance

[Prathap Senthil]

Hi Bulmaro R,

Before proceeding with troubleshooting this problem, we require some additional clarification from your end. Please share the following details to proceed further at our end:

• How are you currently integrating this custom component into the cell? Are you using an EditTemplate or a separate approach?
• Are you facing this focus issue with the SfTextBox inside the SfDialog? How are you handling the custom component in the DataGrid cell?
• Could you please share a video demonstrating the issue?
• Could you please share the entire code snippet, including the model class?
• Could you share a simple reproducible sample with duplicate data?

The above-requested details will be very helpful for us to validate the reported query at our end and provide a solution as early as possible.

Regards,
Prathap Senthil

[Bulmaro R]

1- I'm using a separate aproach

2- My componene only show a button, when user clicks, this open an diaog with a textbox

Custom component:

use:

Sorry for the pictures, that's all I could share.

[Prathap Senthil]

We are unable to reproduce the reported issue when attempting to reproduce the issue . For your reference we have attached simple sample .So, to further proceed with the reporting problem, we require some additional clarification from your end. Please share the below details to proceed further at our end.

• To analyze the reported issue, could you please share a simple and reproducible sample that demonstrates the problem? This will assist us in identifying the issue more efficiently and providing a resolution.
• Kindly share your attempt to replicate the issue using the attached simple sample.

Above-requested details will be very helpful in validating the reported query at our end and providing a solution as early as possible. Thanks for your understanding.

Sample: https://blazorplayground.syncfusion.com/VDrfNwhyfbWHxBFT

Additionally, we suggest trying to resolve the issue with the @onclick:stopPropagation="true" attribute in the div element within the Template. Please refer to the code snippet for your reference.

 

<SfGrid DataSource="@Orders" Height="300" >

 

    <GridColumns>

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

        <GridColumn Field=@nameof(Order.CustomerID) HeaderText="Customer Name" Width="150">

            <Template>

                @{

                    var data = context as Order;

                    <div @onclick:stopPropagation="true">

                      <CustomComponet></CustomComponet>

                    </div>

                }

            </Template>

        </GridColumn>

</SfGrid>

[Bulmaro R]

I appreciate the answer and if it solves the focus issue in the textbox,

The behavior of a dialogue is not as expected, they frequently open in front of the elements, and this is what is happening:

i haev an item into Grid, when user press the star open the dialog:

but the dialog is in Grid and the full content is not seen:

[Prathap Senthil]

Based on the reported problem, if the dialog is rendered based on the body or a target element, the dialog will adjust its height according to the height of its body or target element. If the dialog's content height exceeds the height of the body or target element, the dialog will not automatically resize.

the Dialog component the max-height is calculated based on the height of the dialog's target element. If the Target property is not configured, document.body is considered the target. In that case, we suggest using it without the Target property. This way, the dialog will render correctly.

Please refer to the following documentation for more information:

Getting Started with Syncfusion Blazor Dialog Component in Web App

[Bulmaro R]

My solution was to change the objective, I will change to your solution, thanks.

[Prathap Senthil]

Thanks for the update,

We're glad to hear that you found a solution to the issue. We will now be closing this thread.