Syncfusion Blazor Grid Component Footer Buttons

[Tom Johnes]

Hello !

Please tell me how can I add some buttons or a custom toolbar on the footer of the 

Syncfusion Blazor Grid Component !

Thank You !

[Sarveswaran Palani]

Hi Tom,

Greetings from Syncfusion support.

From your query, we suspect that you want to set buttons and custom toolbar in the bottom of the component. We suggest you to render the buttons below the component code to overcome the issue. Kindly refer the attached code snippet for your reference.

<SfGrid>

        .

        .

    </SfGrid>

 

    <SfButton OnClick="AddRecords">Add</SfButton>

    <SfButton OnClick="UpdateRecords">Save</SfButton>

    <SfButton OnClick="DeleteRecords">Delete</SfButton>

 

    <SfToolbar>

        <ToolbarItems>

            <ToolbarItem Text="Cut"></ToolbarItem>

            <ToolbarItem Text="Copy"></ToolbarItem>

            <ToolbarItem Text="Paste"></ToolbarItem>

            //To separate the Toolbar items

            <ToolbarItem></ToolbarItem>

            <ToolbarItem Text="Bold"></ToolbarItem>

            <ToolbarItem Text="Underline"></ToolbarItem>

            <ToolbarItem Text="Italic"></ToolbarItem>

            <ToolbarItem Text="Color-Picker"></ToolbarItem>

        </ToolbarItems>

    </SfToolbar>

If we misunderstood your query, kindly share more details about your requirement or pictorial demo of your expectation. . It’ll will be very helpful for us to validate the reported query at our end and provide the solution as early as possible

Regards,

Sarveswaran PK

[Tom Johnes]

It is working fine !
I must use only SfToolbar after grid definition.
Thank You Very Much !
Best regards !

[Suganya Gopinath]

Tom,

We are glad that the provided solution helped to solve the issue. Please get back to us for further assistance. 

We are marking this ticket as solved. 

Regards,

Suganya Gopinath. 

[Tom Johnes]

Hello again !
Please tell me how can I define one of my toolbar buttons as  Type="submit" (I need form validation)?
I don't want to use <SfButton Type="submit" IsPrimary=true>Save</SfButton> .

I want to use something like that :

        <ToolbarItem Id="validate_and_save_dialog_form" Type="ItemType.Button"

                Text="SAVE FORM"

                Disabled="@var_is_disabled" Visible="@var_is_visible"

                OnClick="HandleValidSubmit">

        </ToolbarItem>

So, the toolbar button must also validate the form before saving.
I want to use   <ToolbarItem Type="ItemType.Button> instead of  <SfButton> because for  <ToolbarItem Type="ItemType.Button> I can use visible property.

Thank You Very Much !

[Sarveswaran Palani]

Hi Tom,

From your query, we suspect that you want to validate form while clicking the button. We suggest you to call EndEdit method in the button action to overcome the issue. Because it’ll validate the editing and save the records to the grid. Kindly refer the attached link for your reference. 

Reference: https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_EndEditAsync

Regards,

Sarveswaran PK