1. Home
  2. Forum
  3. Blazor
  4. Feature Request: Export Chooser for Blazor DataGrid Grid

Feature Request: Export Chooser for Blazor DataGrid Grid

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

3 Replies 1 reply marked as answer
RS Renjith Singh Rajendran Syncfusion Team November 2, 2020 08:44 AM UTC

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, 
 
 
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 


SP Scott Peal November 6, 2020 10:38 PM UTC

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.


RS Renjith Singh Rajendran Syncfusion Team November 9, 2020 12:00 PM UTC

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, 
 
 
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 


Marked as answer
Loader.
Up arrow icon