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

New Feature Request: Create Export button menu in toolbar

Nice grid developers!

Any chance you could give us the option to show only an "Export" button menu inside the toolbar which shows each export method in the popup menu? This would save us space on the page for mobile users. Currently we have to show 3 buttons: PDF Export, Excel Export, and CSV Export. 

1 Reply

SE Sathyanarayanamoorthy Eswararao Syncfusion Team January 17, 2020 12:36 PM UTC

Hi Scott, 

Thanks for using Syncfusion products. 

Query : Any chance you could give us the option to show only an "Export" button menu inside the toolbar which shows each export method in the popup menu? 
 
Your requirement can be achieved using the Toolbar Template of TreeGrid. We have achieved your requirement in the below code example. 

In the below code example we have rendered the Menu in the Toolbar and in the ItemSelected event of the Menu we have invoked the respective exporting method to export the data. 


<EjsTreeGrid @ref="treeGrid" DataSource="dataSource" ShowColumnMenu="true" IdMapping="TaskID" ParentIdMapping="ParentID" TreeColumnIndex="1" 
             AllowExcelExport="true" AllowPdfExport="true"> 
    <EjsToolbar> 
        <ToolbarItems> 
            <ToolbarItem Type="ItemType.Input"> 
                <Template> 
                    <EjsMenu Items="@MenuItems"> 
                        <MenuEvents ItemSelected="itemSelected"></MenuEvents> 
                    </EjsMenu> 
                </Template> 
            </ToolbarItem> 
        </ToolbarItems> 
    </EjsToolbar> 
    <TreeGridColumns> 
        <TreeGridColumn Field="TaskID" HeaderText="Task ID" Width="60" Visible="false" TextAlign="TextAlign.Right"></TreeGridColumn> 
        <TreeGridColumn Field="TaskName" HeaderText="Task Name" Width="80"></TreeGridColumn> 
        <TreeGridColumn Field="StartDate" HeaderText=" Start Date" Format="d" Visible="false" Type=ColumnType.Date Width="90" TextAlign="TextAlign.Right"></TreeGridColumn> 
        <TreeGridColumn Field="Duration" HeaderText="Duration" Width="80" TextAlign="TextAlign.Right"></TreeGridColumn> 
        <TreeGridColumn Field="Progress" HeaderText="Progress" Width="80"></TreeGridColumn> 
    </TreeGridColumns> 
</EjsTreeGrid> 
 
@code{ 
 
    public List<SelfReferenceData> dataSource { get; set; } 
 
    public EjsTreeGrid<SelfReferenceData> treeGrid { get; set; } 
 
    public List<MenuItem> MenuItems = new List<MenuItem>{ 
        new MenuItem{ Text = "Export", Items = new List<MenuItem>{ 
            new MenuItem{ Text= "ExcelExport" }, 
            new MenuItem{ Text= "PdfExport" }, 
            new MenuItem{ Text= "CsvExport" }} 
    } }; 
 
    protected override void OnInitialized() 
    { 
        base.OnInitialized(); 
        dataSource = SelfReferenceData.GetTree(); 
    } 
 
    public void itemSelected(Syncfusion.EJ2.Blazor.Navigations.MenuEventArgs args) 
    { 
        if (args.Item.Text == "ExcelExport") 
        { 
            this.treeGrid.ExcelExport(); 
        } 
        if (args.Item.Text == "PdfExport") 
        { 
            this.treeGrid.PdfExport(); 
        } 
        if (args.Item.Text == "CsvExport") 
        { 
            this.treeGrid.CsvExport(); 
        } 
    } 
 
    public class Select 
    { 
        public string text { get; set; } 
    } 
    List<Select> LocalData = new List<Select> 
{ 
            new Select() { text = "ExcelExport"}, 
            new Select() { text = "PdfExport"}, 
            new Select() { text = "CsvExport"}, 
    }; 
 
 
    public class SelfReferenceData 
    { 
        public int TaskID { get; set; } 
        public string TaskName { get; set; } 
        public DateTime? StartDate { get; set; } 
 
                                 --------- 
 
        public static List<SelfReferenceData> GetTree() 
        { 
            List<SelfReferenceData> tree = new List<SelfReferenceData>(); 
            int root = -1; 
            int TaskNameID = 0; 
            int ChildCount = -1; 
            int SubTaskCount = -1; 
            for (var t = 1; t <= 10; t++) 
            { 
 
                          ------- 
 
                int parent = tree.Count; 
                for (var c = 0; c < 2; c++) 
                { 
                    DateTime start1 = new DateTime(1992, 07, 09); 
                    int range1 = (DateTime.Today - start1).Days; 
                    DateTime startingDate1 = start1.AddDays(gen.Next(range1)); 
                     
                                   ------ 
 
                    if ((((parent + c + 1) % 3) == 0)) 
                    { 
                        int immParent = tree.Count; 
                        for (var s = 0; s < 3; s++) 
                        { 
 
                                  ------- 
 
                            tree.Add(new SelfReferenceData() { TaskID = root + 1, TaskName = "Sub Task " + (SubTaskCount + 1).ToString(), StartDate = startingDate2, EndDate = endingDate2, isParent = false, ParentID = iD, Progress = (immParent % 2 == 0) ? "On Progress" : "Closed", Priority = Prior, Duration = ran.Next(1, 50), Approved = appr }); 
                        } 
                    } 
                } 
            } 
            return tree; 
        } 
    } 
} 

 


Regards, 
Sathyanarayanamoorthy 


Loader.
Live Chat Icon For mobile
Up arrow icon