DetailTemplate - unable to type in textbox

Hello,

I have the following basic Grid:

    <SfGrid DataSource="@Datasource" >
        <GridTemplates>
            <DetailTemplate Context="dtCtx">
                @{
                    <SfTextBox Width="300px" Placeholder="Find it" @bind-Value="@ivp.FilterText" />
                }
            </DetailTemplate>
        </GridTemplates>
        <GridColumns>

        </GridColumns>
    </SfGrid>

I would like to add extra functionalities inside the DetailTemplate including a textbox, but I can't type in it. Probably the Grid overrides the behaviour. I tried to add GridEditSettings - AllowEdit = true, but it didn't help.

How can I fix it?

3 Replies 1 reply marked as answer

JP Jeevakanth Palaniappan Syncfusion Team September 10, 2020 07:20 AM UTC

Hi Istvan, 

Greetings from Syncfusion support. 

We have validated your query and you can edit the fields in detail template by defining the @onkeydown:stopPropagation as true. Find the below code snippet for your reference. 

<SfGrid DataSource="@Orders" GridLines="GridLine.Default" Height="315"> 
    <GridTemplates> 
            <DetailTemplate> 
                @{ 
                    var con = context as Order; 
                    <div @onkeydown:stopPropagation="true"> 
                        <SfTextBox Width="300px" Placeholder="Find it" @bind-Value="@con.Name" /> 
                    </div>                     
                } 
            </DetailTemplate> 
        </GridTemplates>    <GridColumns> 
        <GridColumn Field=@nameof(Order.Name) HeaderText="Name of the inventor" Width="70"></GridColumn> 
    </GridColumns> 
</SfGrid> 

Please get back to us if you any further assistance. 

Regards, 
Jeevakanth SP. 


Marked as answer

IP Istvan Piroska September 10, 2020 09:20 AM UTC

Perfect! Thank you.


JP Jeevakanth Palaniappan Syncfusion Team September 11, 2020 05:33 AM UTC

Hi Istvan, 

Thanks for the update. Please get back to us if you need further assistance. 

Regards, 
Jeevakanth SP. 


Loader.
Up arrow icon