Feature Request: Export Chooser for Blazor DataGrid Grid

[Scott Peal]

Please add an Export Chooser to the toolbar for the grid. It would act as a dropdown menu to let the user select which export they want. This saves space on the toolbar. I tried to do this using the custom and built-in toolbar option but didn't work (see other forum post).

Thanks for considerations

[Renjith Singh Rajendran]

Hi Scott, 

Greetings from Syncfusion support. 

We have Custom Toolbar support in grid, with this you can render a custom component in Toolbar and achieve this requirement. We have prepared a sample to export grid based on the item selection from Dropdown. Please download the sample form the link below, 

Sample : https://www.syncfusion.com/downloads/support/directtrac/general/ze/Serversample2011861320 

 

Reference : https://blazor.syncfusion.com/documentation/datagrid/tool-bar/#custom-toolbar-with-dropdown-list 

 

Please refer the codes below, 

 

<SfGrid DataSource="@Orders" ... @ref="Grid" AllowExcelExport="true" AllowPdfExport="true"> 

    <SfToolbar> 

        <ToolbarItems> 

            <ToolbarItem Type="ItemType.Input"> 

                <Template> 

                    <SfDropDownList TValue="string" Placeholder="Select Export Types" TItem="string" DataSource=@LocalData Width="200"> 

                        <DropDownListEvents TValue="string" TItem="string" ValueChange="OnChange"> </DropDownListEvents> 

                    </SfDropDownList> 

                </Template> 

            </ToolbarItem> 

        </ToolbarItems> 

    </SfToolbar> 

    ... 

</SfGrid> 

 

@code{ 

 

    SfGrid<Order> Grid; 

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

    List<string> LocalData = new List<string>{ "Excel Export", "Pdf Export" }; 

    ... 

    public async Task OnChange(Syncfusion.Blazor.DropDowns.ChangeEventArgs<string,string> args) 

    { 

        if(args.Value == "Excel Export") 

        { 

            await Grid.ExcelExport(); 

        } 

        if(args.Value == "Pdf Export") 

        { 

            await Grid.PdfExport(); 

        } 

    } 

    ... 

} 

If we have misunderstood your query, or if you need further assistance, then kindly share with us a detailed explanation your requirement. Please get back to us if you need further assistance. 

Regards, 

Renjith Singh Rajendran 

[Scott Peal]

You example does not address the example I quoted. Please show how to use the out-of-box actions such as add, delete combined with the dropdown. The documents say it is possible but don't show both options together.

[Renjith Singh Rajendran]

Hi Scott, 

Thanks for your update. 

We suggest you to add the corresponding ToolbarItem you need in the SfToolbar and handle those actions in Clicked event of SfToolbar programmatically to achieve this requirement. We have prepared a sample based on this scenario, please download the sample from the link below, 

Sample : https://www.syncfusion.com/downloads/support/directtrac/general/ze/Serversample-2021918862 

 

Reference : https://blazor.syncfusion.com/documentation/datagrid/editing/#performing-crud-operations-programmatically 

 

Please refer the codes below, 

 

<SfToolbar> 

    <ToolbarEvents Clicked="ToolbarClickHandler"></ToolbarEvents> 

    <ToolbarItems> 

        <ToolbarItem PrefixIcon="e-add e-icons" Text="Add"></ToolbarItem> 

        <ToolbarItem PrefixIcon="e-delete e-icons" Text="Delete"></ToolbarItem> 

        <ToolbarItem Type="ItemType.Input"> 

            <Template> 

                <SfDropDownList TValue="string" Placeholder="Select Export Types" TItem="string" DataSource=@LocalData Width="200"> 

                    <DropDownListEvents TValue="string" TItem="string" ValueChange="OnChange"> </DropDownListEvents> 

                </SfDropDownList> 

            </Template> 

        </ToolbarItem> 

    </ToolbarItems> 

</SfToolbar> 

public async Task ToolbarClickHandler(ClickEventArgs args){    if (args.Item.Text == "Add")    {        await this.Grid.AddRecord();    }    else if (args.Item.Text == "Delete")    {        await this.Grid.DeleteRecord();    }}

Please get back to us if you need further assistance. 

Regards, 

Renjith Singh Rajendran