We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
close icon

Focus in Toolbar

Hi team,


Is there is a way to focus programatically in "Add" button within the toolbar in grid? 




Best regards,


Tyrone




3 Replies 1 reply marked as answer

MS Monisha Saravanan Syncfusion Team January 26, 2023 09:11 AM UTC


Hi Tyrone,


Greetings from Syncfusion support.


Query: “Is there is a way to focus programatically in "Add" button within the toolbar in grid? ”


We suspect that you need to focus the Add button at initial rendering. If so we suggest you to achieve your requirement by using an JavaScript interop solution. Here we have used DataBound event to focus the toolbar Add button. Kindly check the below code snippet for your reference.


@inject IJSRuntime JSRuntime

<SfGrid DataSource="@Orders" AllowGrouping="true" AllowPaging="true" Toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Cancel", "Update", "Search" })" Height="315">

    <GridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true" Mode="EditMode.Normal"></GridEditSettings>

    <GridEvents DataBound="DataBoundHandler" TValue="Order"></GridEvents>

    <GridColumns>

       

    </GridColumns>

</SfGrid>

 

@code {

    public async Task DataBoundHandler()

    {

        await JSRuntime.InvokeVoidAsync("focus");  // called interop function for focus

    }

 

}

 

function focus() {

    document.getElementsByClassName('e-toolbar-item')[0].getElementsByTagName('button')[0].focus();

}

 

 


Please let us know if you have any concerns.


Regards,
Monisha


Marked as answer

TY Tyrone replied to Monisha Saravanan January 27, 2023 12:39 PM UTC

Thanks Monisha, it worked



MS Monisha Saravanan Syncfusion Team January 30, 2023 05:48 AM UTC

Hi Tyrone,


Welcome. We are glad to hear that the reported issue has been resolved. Kindly get back to us if you have further queries. As always we will be happy to help you.


Loader.
Live Chat Icon For mobile
Up arrow icon