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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

New Feature Request: Create Export button menu in toolbar

Thread ID:

Created:

Updated:

Platform:

Replies:

150672 Jan 15,2020 02:54 PM UTC Jan 17,2020 12:36 PM UTC Blazor 1
loading
Tags: TreeGrid
Scott Peal
Asked On January 15, 2020 02:54 PM UTC

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. 

Sathyanarayanamoorthy Eswararao [Syncfusion]
Replied On 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 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon