1. Home
  2. Forum
  3. Blazor
  4. Visble the tollbar items

Visble the tollbar items

How to visible and invisible the other toolbar items?

For example: When I click the EditDate the other toolbar like Add, Edit, Delete, PDF Export, Excel Export and Archive will be invisible in the toolbar only three toolbar are still visible the EditDate, Update and CScreenshot (427).png


15 Replies
VN Vignesh Natarajan Syncfusion Team November 26, 2021 07:50 AM UTC

Hi Belle,  
 
Thanks for contacting Syncfusion support. 
 
Query: “How to visible and invisible the other toolbar items?” 
 
We have analyzed your query and we have achieved your requirement by applying display none style to specific toolbar item using its class name. Refer the below code example.  
 
<SfGrid ID="Grid" @ref="GridInstance" DataSource="@Orders" AllowPaging="true" AllowExcelExport="true" AllowPdfExport="true" Toolbar="@Toolbaritems"> 
    <GridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true"></GridEditSettings> 
    <GridEvents OnToolbarClick="ToolbarClicked" TValue="Order"></GridEvents> 
    <GridColumns> 
        <GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" IsPrimaryKey="true" TextAlign="TextAlign.Right" Width="120"></GridColumn> 
        <GridColumn Field=@nameof(Order.CustomerID) HeaderText="Customer Name" Width="120"></GridColumn> 
        <GridColumn Field=@nameof(Order.OrderDate) HeaderText=" Order Date" EditType="EditType.DatePickerEdit" Format="d" TextAlign="TextAlign.Right" Width="130" Type="ColumnType.Date"></GridColumn> 
        <GridColumn Field=@nameof(Order.Freight) HeaderText="Freight" Format="C2" TextAlign="TextAlign.Right" Width="120"></GridColumn> 
    </GridColumns> 
</SfGrid> 
  
@if(Necessary) 
{ 
    <style> 
        /*Id is combination of Grid's ID and itemname*/ 
        #Grid_add, #Grid_edit, #Grid_delete, #Grid_pdfexport, #Grid_excelexport, #Archive { 
            display: none; 
        } 
    </style> 
} 
  
@code{ 
    SfGrid<Order> GridInstance { get; set; } 
    public List<Order> Orders { get; set; } 
    public bool Necessary { get; set; } 
    private List<Object> Toolbaritems = new List<Object>() { "Add", "Edit", new ItemModel() { Text = "EditDate", TooltipText = "EditDate", Id = "editdate" }, "Delete", "Update", "Cancel", "PdfExport", "ExcelExport", new ItemModel() { Text = "Archive", TooltipText = "Archive", Id = "Archive" } }; 
  
    public async Task ToolbarClicked(Syncfusion.Blazor.Navigations.ClickEventArgs Args) 
    { 
        Necessary = false; 
        if (Args.Item.Id == "Grid_pdfexport")  //Id is combination of Grid's ID and itemname 
        { 
            await this.GridInstance.PdfExport(); 
        } 
        if (Args.Item.Id == "Grid_excelexport") //Id is combination of Grid's ID and itemname 
        { 
            await this.GridInstance.ExcelExport(); 
        } 
        if (Args.Item.Id == "editdate") 
        { 
            Necessary = true; 
            await GridInstance.EnableToolbarItemsAsync(new List<string>() { "Grid_update", "Grid_cancel" }, true); 
        } 
    } 
 
 
We have applied styles to toolbar item based on the clicked item. Necessary Boolean variable is used show style element in DOM element.  
 
 Kindly refer the below sample for your reference 
 
 
Please get back to us if you have further queries. 
 
Regards, 
Vignesh Natarajan 


BC Belle Cruz November 27, 2021 02:40 AM UTC

Thank you Vignesh


But how about the Add, Edit and Delete? I want them to visible like the Pdfexport, Excelexport and Archive.


BC Belle Cruz November 27, 2021 06:01 AM UTC

I want to visible the built-in toolbar items like Add, Edit, Delete when I click the EditDate.Screenshot (435).png


VN Vignesh Natarajan Syncfusion Team November 29, 2021 04:51 AM UTC

Hi Belle,  
 
Thanks for the update.  
 
Query: “I want to visible the built-in toolbar items like Add, Edit, Delete when I click the EditDate.” 
 
From your query and screenshot, we suspect that you want to enable Add, Edit and Delete toolbar items similar to other buttons. If yes, we request you to achieve your requirement using EnableToolbarItemsAsync method of Grid.   
 
Kindly specify the Id of toolbar item to enable the toolbar item. Kindly refer the below code example for your reference 
 
<SfGrid ID="Grid" @ref="GridInstance" DataSource="@Orders" AllowPaging="true" AllowExcelExport="true" AllowPdfExport="true" Toolbar="@Toolbaritems"> 
    <GridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true"></GridEditSettings> 
    <GridEvents OnToolbarClick="ToolbarClicked" TValue="Order"></GridEvents> 
    <GridColumns> 
        <GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" IsPrimaryKey="true" TextAlign="TextAlign.Right" Width="120"></GridColumn> 
        <GridColumn Field=@nameof(Order.CustomerID) HeaderText="Customer Name" Width="120"></GridColumn> 
        <GridColumn Field=@nameof(Order.OrderDate) HeaderText=" Order Date" EditType="EditType.DatePickerEdit" Format="d" TextAlign="TextAlign.Right" Width="130" Type="ColumnType.Date"></GridColumn> 
        <GridColumn Field=@nameof(Order.Freight) HeaderText="Freight" Format="C2" TextAlign="TextAlign.Right" Width="120"></GridColumn> 
    </GridColumns> 
</SfGrid> 
  
  
@code{ 
    SfGrid<Order> GridInstance { get; set; } 
    public List<Order> Orders { get; set; } 
    private List<Object> Toolbaritems = new List<Object>() { "Add", "Edit", new ItemModel() { Text = "EditDate", TooltipText = "EditDate", Id = "editdate" }, "Delete", "Update", "Cancel", "PdfExport", "ExcelExport", new ItemModel() { Text = "Archive", TooltipText = "Archive", Id = "Archive" } }; 
  
    public async Task ToolbarClicked(Syncfusion.Blazor.Navigations.ClickEventArgs Args) 
    {         
        if (Args.Item.Id == "editdate") 
        { 
            await GridInstance.EnableToolbarItemsAsync(new List<string>() { "Grid_add",  "Grid_edit", "Grid_delete" }, true); 
        } 
    } 
 
 
Note: Second variable EnableToolbarItemsAsync method is used to enable/disable the toolbar item.  
 
If we misunderstood your requirement, kindly share more details about your requirement along with your current Grid implementation. 
 
Regards, 
Vignesh Natarajan  


BC Belle Cruz November 29, 2021 06:37 AM UTC

Screenshot (439).pngThe Add, Edit and Delete are still in the toolbar when I click the Edit Date. I want the built-in toolbar items to be visible when I click the EditDate or in other word it just only 3 toolbar items left the EditDate, Update and Cancel


BC Belle Cruz November 29, 2021 06:47 AM UTC

Like This:Screenshot (443).png


VN Vignesh Natarajan Syncfusion Team November 30, 2021 08:04 AM UTC

Hi Belle,  
 
Query: “I want the built-in toolbar items to be visible when I click the EditDate or in other word it just only 3 toolbar items left the EditDate, Update and Cancel” 
 
From your query and screenshot attached we understand that you want to hide the built in toolbar items also. In our previous update on November 26th, we have provided solution to hide custom as well as built in toolbar items.  
 
Kindly refer the sample attached in below update. 
 
 
We have applied style to corresponding toolbar items using their id’s. Kindly ensure that you have defined ID property to Grid component and specified the Id’s properly in style tag. Refer the below code example.  
 
<SfGrid ID="Grid" @ref="GridInstance" DataSource="@Orders" AllowPaging="true" AllowExcelExport="true" AllowPdfExport="true" Toolbar="@Toolbaritems"> 
    <GridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true"></GridEditSettings> 
    . . . .. . . .  
</SfGrid> 
  
@if(Necessary) 
{ 
    <style> 
        /*Id is combination of Grid's ID and itemname*/ 
        #Grid_add, #Grid_edit, #Grid_delete, #Grid_pdfexport, #Grid_excelexport, #Archive { 
            display: none; 
        } 
    </style> 
} 
 
 
Refer the below screenshot for the output of above code (after clicking the EditDate button) example with sample  
 
 
 
Please get back to us if you have further queries.   
 
Regards, 
Vignesh Natarajan 


BC Belle Cruz February 16, 2022 11:13 AM UTC

  1. When I clicked the Trashbin I want to display the restore button only.

2. Is it possible to have a multiple css on tha same page?

Screenshot (584).png


RN Rahul Narayanasamy Syncfusion Team February 18, 2022 03:21 AM UTC

Hi Belle, 

Query: When I clicked the Trashbin I want to display the restore button only. 

We suspect that you want to show only restore button in the grid toolbar when clicking button(Trashbin). You can achieve your requirement by using CSS(applying display none style to other toolbar items) with a boolean variable. Find the below code snippets and sample for your reference. 

 
<button @onclick="Click">TrashBin</button> 
 
<SfGrid ID="Grid" @ref="GridInstance" DataSource="@Orders" AllowPaging="true" AllowExcelExport="true" AllowPdfExport="true" Toolbar="@Toolbaritems"> 
    <GridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true"></GridEditSettings> 
    <GridEvents OnToolbarClick="ToolbarClicked" TValue="Order"></GridEvents> 
    <GridColumns> 
        . ..  
    </GridColumns> 
</SfGrid> 
 
. .. 
@if (HideAllExcept) 
{ 
    <style> 
        /*Id is combination of Grid's ID and itemname*/ 
        #Grid_add, #Grid_edit, #Grid_delete, #Grid_pdfexport, #Grid_excelexport, #Archive, #editdate, #Grid_update, #Grid_cancel { 
            display: none; 
        } 
    </style> 
} 
 
@code{ 
    SfGrid<Order> GridInstance { get; set; } 
    public List<Order> Orders { get; set; } 
    public bool Necessary { get; set; } 
    bool HideAllExcept { get; set; } 
    private List<Object> Toolbaritems = new List<Object>() { "Add", "Edit", new ItemModel() { Text = "EditDate", TooltipText = "EditDate", Id = "editdate" }, "Delete", "Update", "Cancel", "PdfExport", "ExcelExport", new ItemModel() { Text = "Archive", TooltipText = "Archive", Id = "Archive" }, 
    new ItemModel() { Text = "Restore", TooltipText = "Restore", Id = "Restore" }}; 
 
    public void Click() 
    { 
        HideAllExcept = true; 
    } 
 
    . ..  
} 


Query: Is it possible to have a multiple css on tha same page? 

We need more details regarding this requirement. Could you please share below details which will be helpful to validate and provide a better solution. 

  • Whether did you want to apply different styles to different Grids?
  • Share more details about your requirement.
  • Whether did you want to apply different style dynamically ?

Regards, 
Rahul 


BC Belle Cruz February 19, 2022 07:48 AM UTC

 public async void SelectedOtherView(int selectedView) //02/10/22

        {

            HideAllExcept = true;

            foreach (var otherview in OtherViews)

            {

                otherview.ValueStyle = "#0099d7";

                otherview.CountStyle = "#0099d7";

            }


            OtherViews[selectedView].ValueStyle = "white";

            OtherViews[selectedView].CountStyle = "white";


            switch (selectedView)

            {

                case 0: //ViewAll

                    Necessary = false;

                    SelectedView = 0;

                    ViewList();

                    Necessary = true;

                    await GridHeader.EnableToolbarItemsAsync(new List<string>() { "GridHeader_recall", "GridHeader_add", "GridHeader_edit", "GridHeader_delete", "GridHeader_update", "GridHeader_cancel", "GridHeader_pdfexport", "GridHeader_excelexport", "Archive", "Restore", "Recall", "Charges", "DepositDate", "FolderDate" }, true);

                    break;


                case 1: //Deposited

                    Necessary = false;

                    SelectedView = 1;

                    ViewList();

                    Necessary = true;

                    await GridHeader.EnableToolbarItemsAsync(new List<string>() { "GridHeader_recall" }, true);

                    break;


                case 2: // Trashbin

                    Necessary = false;

                    SelectedView = 2;

                    ViewList();

                    Necessary = true;

                    await GridHeader.EnableToolbarItemsAsync(new List<string>() {"GridHeader_restore" }, true);

                    break;

            }


            OtherViews[0].Count = ViewAllCount;

            OtherViews[1].Count = DepositCount;

            OtherViews[2].Count = TrashbinCount;


           StateHasChanged();

        }


@if (Necessary)

{

    <style>

        /*Id is combination of Grid's ID and itemname*/

        #GridHeader_add, #GridHeader_edit, #GridHeader_delete, #GridHeader_update, #GridHeader_cancel, #GridHeader_pdfexport, #GridHeader_excelexport, #Archive, #Restore, #Charges, #DepositDate, #FolderDate {

            display: none;

        }

    </style>


}


@if (HideAllExcept)

{

    <style>

        /*Id is combination of Grid's ID and itemname*/

        #GridHeader_add, #GridHeader_edit, #GridHeader_delete, #GridHeader_pdfexport, #GridHeader_excelexport, #Archive, #GridHeader_update, #GridHeader_cancel, #Archive, #Charges, #DepositDate, #FolderDate{

            display: none;

        }

    </style>


}


It is not working


BC Belle Cruz February 19, 2022 07:50 AM UTC

  1. When I clicked the View All all buttons must be displayed.
  2. When I clicked Deposited the recall button will displayed only.
  3. When I clicked Trashbin the restore button will displayed only.

BC Belle Cruz February 21, 2022 06:43 AM UTC

Is there any update about my query?


RN Rahul Narayanasamy Syncfusion Team February 22, 2022 04:04 AM UTC

Hi Belle, 

Thanks for the update. 

Query: When I clicked the View All all buttons must be displayed. 
&&  When I clicked Deposited the recall button will displayed only.  
&& When I clicked Trashbin the restore button will displayed only. 

Based on your request we have modified the sample. You can achieve your requirement by using below CSS. Now, while clicking the ViewAll button, all toolbar buttons will be display. While clicking Deposited button, the recall button alone will display and while clicking the Trashbin button, the restore button only will display in toolbar. Find the below code snippets and sample for your reference. 

Based on your requirement, you can customize toolbar item styles like below to show the required items. 

 
<button @onclick="ViewAllClick">ViewAll</button> 
<button @onclick="deposit">Deposited</button> 
<button @onclick="Click">TrashBin</button> 
 
<SfGrid ID="Grid" @ref="GridInstance" DataSource="@Orders" AllowPaging="true" AllowExcelExport="true" AllowPdfExport="true" Toolbar="@Toolbaritems"> 
    <GridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true"></GridEditSettings> 
    <GridEvents OnToolbarClick="ToolbarClicked" TValue="Order"></GridEvents> 
    . . . 
</SfGrid> 
 
@if (Necessary) 
{ 
    <style> 
        /*Id is combination of Grid's ID and itemname*/ 
        #Grid_add, #Grid_edit, #Grid_delete, #Grid_pdfexport, #Grid_excelexport, #Archive { 
            display: none; 
        } 
    </style> 
} 
@if (HideAllExcept) 
{ 
    <style> 
        /*Id is combination of Grid's ID and itemname*/ 
        #Grid_add, #Grid_edit, #Grid_delete, #Grid_pdfexport, #Grid_excelexport, #Archive, #editdate, #Grid_update, #Grid_cancel, #Recall { 
            display: none; 
        } 
    </style> 
} 
@if (isDeposit) 
{ 
    <style> 
        /*Id is combination of Grid's ID and itemname*/ 
        #Grid_add, #Grid_edit, #Grid_delete, #Grid_pdfexport, #Grid_excelexport, #Archive, #editdate, #Grid_update, #Grid_cancel, #Restore { 
            display: none; 
        } 
    </style> 
} 
 
@code{ 
    SfGrid<Order> GridInstance { get; set; } 
    public List<Order> Orders { get; set; } 
    public bool Necessary { get; set; } 
    bool HideAllExcept { get; set; } 
    bool ViewAll { get; set; } 
    bool isDeposit { get; set; } 
    private List<Object> Toolbaritems = new List<Object>() { "Add", "Edit", new ItemModel() { Text = "EditDate", TooltipText = "EditDate", Id = "editdate" }, "Delete", "Update", "Cancel", "PdfExport", "ExcelExport", new ItemModel() { Text = "Archive", TooltipText = "Archive", Id = "Archive" }, 
    new ItemModel() { Text = "Restore", TooltipText = "Restore", Id = "Restore" }, 
    new ItemModel() { Text = "Recall", TooltipText = "Recall", Id = "Recall" }}; 
 
    public void Click() 
    { 
        HideAllExcept = true; 
    } 
    public void ViewAllClick() 
    { 
        HideAllExcept = false; 
        Necessary = false; 
        isDeposit = false; 
    } 
    public void deposit() 
    { 
        HideAllExcept = false; 
        isDeposit = true; 
    } 
    . . . 
} 


Please let us know if you have any concerns. 

Regards, 
Rahul 
 
 


BC Belle Cruz February 22, 2022 04:54 PM UTC

How about the Trashbin? When I clicked Trashbin I want to display restore button only


RN Rahul Narayanasamy Syncfusion Team February 23, 2022 01:41 PM UTC

Hi Belle, 

Thanks for the update. 

We are able to reproduce the reported case(while clicking the Trashbin button, the restore button was not shown in some scenario) from our end. Here, we have modified the sample to work correctly. Now while clicking the Trashbin button, the restore button shows correctly. Find the below code snippets and sample for your reference. 

 
<button @onclick="ViewAllClick">ViewAll</button> 
<button @onclick="deposit">Deposited</button> 
<button @onclick="Click">TrashBin</button> 
 
<SfGrid ID="Grid" @ref="GridInstance" DataSource="@Orders" AllowPaging="true" AllowExcelExport="true" AllowPdfExport="true" Toolbar="@Toolbaritems"> 
    <GridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true"></GridEditSettings> 
    . . . 
</SfGrid> 
 
. . . 
 
@code{ 
    SfGrid<Order> GridInstance { get; set; } 
    . . . 
 
    public void Click() 
    { 
        isDeposit = false; 
        HideAllExcept = true; 
    } 
    public void ViewAllClick() 
    { 
        HideAllExcept = false; 
        isDeposit = false; 
        Necessary = false; 
    } 
    public void deposit() 
    { 
        HideAllExcept = false; 
        isDeposit = true; 
    } 
 
    . ..  
} 


Please let us know if you have any concerns. 

Regards, 
Rahul 


Loader.
Up arrow icon