Display Toolbar at bottom

[Smisha Alias]

Hi,

 

How can i display toolbar in Grid at bottom rather than on top.

Thanks Regards,

Smisha Alias

[Vignesh Natarajan]

Hi Smisha,  

 

Thanks for contacting Syncfusion support.  

 

Query:” How can i display toolbar in Grid at bottom rather than on top” 

 

We have analyzed your query and we do not have direct support to render the toolbar at bottom of the Grid. But we have achieved your requirement by changing the position of the toolbar once it is rendered using DataBound event of the Grid.  

 

Refer the below code example.  

 

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

    <GridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true"></GridEditSettings> 

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

</SfGrid> 

  

@code{ 

    SfGrid<Order> Grid { get; set; } 

    public List<Order> Orders { get; set; } 

    public void DataBoundHandler() 

    { 

        Runtime.InvokeVoidAsync("BottomToolbar", Grid.ID); 

    } 

 

        function BottomToolbar(Gridid) {    var tool = document.getElementById(Gridid + "_toolbarItems");    var pager = document.getElementsByClassName("e-gridpager");    pager[0].parentNode.insertBefore(tool, pager[0].nextSibling);}

 

 

Note: we have positioned the toolbar at the bottom after the pager component.  

 

Kindly download the sample from below which we have prepared using above solution.  

 

Sample: https://www.syncfusion.com/downloads/support/forum/162624/ze/Grid2027634523  

 

Refer our UG documentation for your reference 

 

https://blazor.syncfusion.com/documentation/datagrid/events/#databound  

 

Please get back to us if you have further queries.  

 

Regards, 

Vignesh Natarajan  

  

[Smisha Alias]

Thank you. it worked

Thanks Regards,

Smisha Alias

[Vignesh Natarajan]

Hi Smisha,  

Thanks for the update.  

We are glad to hear that you have achieved your requirement using our solution.  

Kindly get back to us if you have further queries.  

Regards, 

Vignesh Natarajan  

[oliver tejada]

Hi Vignesh Natarajan ,

The sample application is working fine and it is what I want (Toolbar at the bottom).

My question is I'm using Syncfusion.Blazor version 20.2.0.43. Is there any breaking changes with version 20.2.0.43? I can't seem to replicate moving the Toolbar to the bottom using the exact code. Is there a new script that I need to use in _Host.cshtml file?

Regards,

Oliver

[Naveen Palanivel]

Hi Oliver,

We have checked your query and we we would like to inform that we have included breaking changes in loading scripts and styles in our latest version and javascript isolation is marked as obsolete from our version(20.1.0.47). So we suggest you to use any one of the below method to load styles and scripts externally for better performance.

CDN	Scripts- https://blazor.syncfusion.com/documentation/common/adding-script-references#cdn-reference Styles - https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference
Static Web Assets	Scripts - https://blazor.syncfusion.com/documentation/common/adding-script-references#static-web-assets   Styles - https://www.nuget.org/packages/Syncfusion.Blazor.Themes/

Also refer the below release notes for your additional information.

Reference: https://blazor.syncfusion.com/documentation/release-notes/20.2.36?type=all

Example code snippet:

[layout.cshtml]/[Host.cshtml]

 

<link rel='nofollow' href=https://cdn.syncfusion.com/blazor/20.2.43/styles/bootstrap5.css rel="stylesheet"/>

      <script src=https://cdn.syncfusion.com/blazor/20.2.43/syncfusion-blazor.min.js type="text/javascript"></script>

    

Note:  Need to disable javascript isolation while using the above ways( AddSyncfusionBlazor()).

Please get back to us if you need further assistance.

Regards,

Naveen Palanivel