1. Home
  2. Forum
  3. Blazor
  4. join built-in toolbar with custom toolbar that have custom template

join built-in toolbar with custom toolbar that have custom template

I wanna join built-in toolbar with my custom toolbar that have template inside. Can i do that?

my custom toolbar is an inputbox for searching inside the datagrid.
and my built-in toolbar is a columnchooser. I want them both in the same toolbar. Right now they are in separate toolbar. The example that i found in the documentation only refer to joining custom toolbar that doesnt have template. just simple button to click. 

Screenshot attached.


Attachment: Screenshot_eda29589.zip

12 Replies 1 reply marked as answer
VN Vignesh Natarajan Syncfusion Team March 10, 2021 07:34 AM UTC

Hi Indra,  
 
Thanks for contacting Syncfusion support.  
 
Query: “I wanna join built-in toolbar with my custom toolbar that have template inside. Can i do that?” 
 
Yes, we can render the Custom Toolbar item with Template and built in Grid toolbar item in a single Grid toolbar. We suggest you to render the custom toolbar item as RenderFragment and define the custom components inside it.  
 
<SfGrid DataSource="@Employees" ShowColumnChooser="true" Toolbar=@ToolbarItems> 
</SfGrid> 
  
@code{ 
    private List<Object> ToolbarItems = new List<Object>() { new ItemModel() { Type = ItemType.Input, Template = title, Align = ItemAlign.Left }, "ColumnChooser" }; 
    private static RenderFragment title = @<Searchtext></Searchtext>;   
} 
  
[Searchtext.razor] 
 
<span class="e-search-icon e-icons"></span><SfTextBox Placeholder="Cari Invoice" Input="OnInput"></SfTextBox>@code{    [CascadingParameter]    public SfGrid<EmployeeData> Grid { get; set; }    public void OnInput(InputEventArgs Args)    {        Grid.Search(Args.Value);    }
 
 
For your convenience we have prepared a sample suing above solution which can be downloaded from below  
 
We would like to inform you that we have built in search support in grid component. Refer the below UG documentation for your reference 
 
 
Please get back to us if you have further queries.   
 
Regards, 
Vignesh Natarajan 


Marked as answer
IN Indra March 10, 2021 09:14 AM UTC

Thank you so much.

I havent tried it yet, but now, i understand the concept that we just make a template and assign it to built in toolbar. 

VN Vignesh Natarajan Syncfusion Team March 11, 2021 04:21 AM UTC

Hi Indra, 

Thanks for the update. 

Kindly use the solution provided in previous update to achieve your requirement. Please get back to us if you have further queries or if you are facing any difficulties in achieving your requirement  

Regards, 
Vignesh Natarajan  



CJ chris johansson May 31, 2021 09:23 PM UTC

Yes If i also have this scenario with mixed built in and custom toolbar templates with drop downs. How Can I make a custom button visible and not visible. ? seems like an issue here when assigning a variable thanks



CJ chris johansson May 31, 2021 09:55 PM UTC

As well as making built in buttons like add/update visible or not visible?
I was thinking because I have so many buttons across the grid toolbar. To also have it grouped in drop downs.. Is it possible to easily make the built in add/update into drop down menus instead of straight across?

VN Vignesh Natarajan Syncfusion Team June 1, 2021 11:32 AM UTC

Hi Chris,  
 
Thanks for contacting Syncfusion support.  
 
Query: “I was thinking because I have so many buttons across the grid toolbar. To also have it grouped in drop downs.. Is it possible to easily make the built in add/update into drop down menus instead of straight across?” 
 
We have analyzed your query and we would like to inform that we do not have support to show/hide the Grid toolbar items. Instead we have support to enable or disable them. So we request you to enable / disable the toolbar items instead of show and hide. Also we have achieved your requirement to group the default CRUD action toolbar item under a dropdown by rendering a DropDownButton in Grid toolbar using template feature and perform the actions externally in Select event.  
 
Refer the below code example.  
 
<SfGrid ID="Grid" @ref="Grid" DataSource="@Orders" AllowPaging="true" Toolbar="Toolbaritems" Height="315"> 
    <GridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true" ShowConfirmDialog="true" Mode="EditMode.Batch"></GridEditSettings> 
</SfGrid> 
  
@code{ 
  public RenderFragment title =@<Tool></Tool>; 
} 
 
[Index.razor.cs] 
public partial class Index : ComponentBase    {        SfGrid<Order> Grid { get; set; }        public bool notvisible = false;        private List<Object> Toolbaritems = new List<Object>();        protected override void OnInitialized()        {            .  . . .             Toolbaritems.Add(new Syncfusion.Blazor.Navigations.ItemModel() { Template = title });        }
 
 
[Tool.razor] 
 
<SfDropDownButton Content="Actions" IconCss="e-icons e-message">    <DropDownButtonEvents ItemSelected="((args) => select(args))"></DropDownButtonEvents>    <DropDownMenuItems>        <DropDownMenuItem IconCss="e-icons e-edit" Text="Edit"></DropDownMenuItem>        <DropDownMenuItem IconCss="e-icons e-delete" Text="Delete"></DropDownMenuItem>        <DropDownMenuItem IconCss="e-icons e-update" Text="Update"></DropDownMenuItem>        <DropDownMenuItem IconCss="e-icons e-cancel-icon" Text="Cancel"></DropDownMenuItem>    </DropDownMenuItems></SfDropDownButton>  <style>    .e-message::before {        content: '\ec26';    }     .e-edit::before {        content: '\e81e';    }     .e-delete::before {        content: '\e84e';    }     .e-update::before {        content: '\e735';    }     .e-cancel-icon::before {        content: '\e825';    }</style>  @code {    [CascadingParameter]    public SfGrid<Order> Grid { get; set; }     private async Task select(MenuEventArgs args)    {        switch (args.Item.Text)        {            case "Edit":                await Grid.StartEdit(); //to start the edit action                break;            case "Delete":                await Grid.DeleteRecord(); // to delete  the record                break;            case "Update":                await Grid.EndEdit(); // to save the changes                break;            case "Cancel":                await Grid.CloseEdit(); // to cancel the editing                break;         }     }
 
Kindly refer the below sample for your reference 
 
 
Refer our UG documentation for your reference 
 
 
Please get back to us if you have further queries. 
 
Regards, 
Vignesh Natarajan 


CJ chris johansson June 1, 2021 10:27 PM UTC

Ok. So if you have a drop down menu then inside the toolbar and use this syntax:
   
The bind-visible won't work either? I tried and noticed it didn't quite work with a local variable set to false.

Also i'm wondering where can I find all the icons for other built in features for the grid. Such as Excel Export and Print. Also can you put the Reorder columns in a menu too?

Lastly, I was able to put together some menu items in a drop down in the toolbar, but my css is a bit different then yours. This is what I have for my default layout and the button is just black. It seems by default its highlighted and I don't want it to be highlighted by default. Is it possible to just have it normal grey such as gainsboro, like the other buttons and function when you highlight over like the rest of the toolbar. thanks for all your help.

Without clicking on the menu by default





   
   
       
       
       
       
       
       
       
   

VN Vignesh Natarajan Syncfusion Team June 2, 2021 07:27 AM UTC

Hi Chris,  
 
Query: “where can I find all the icons for other built in features for the grid. Such as Excel Export and Print” 
 
We have analyzed your and currently we do not have separate topic on icons used specifically in Grid component. But we have documented the list of Syncfusion icons available in the below ug documentation. Refer the below link for your reference 
 
 
Query: “Also can you put the Reorder columns in a menu too?” 
 
We are quite unclear about your requirement. So kindly share the following details to validate the reported query at our ends.  
 
  1. Do you want to render a Button to Reorder column in DropDownMenu?
  2. Or do you want to place ComboxBox control in Grid toolbar which is used reorder columns in Grid?
  3. Kindly share more details about the query.  
 
Query: “ Is it possible to just have it normal grey such as gainsboro, like the other buttons” 
 
We have analyzed your query and we found that you have referred Bootstrap4 theme in your application. By default, Button component will displayed in black color in Bootstrap 4 theme. If you want to change the color then, we request you to achieve your requirement using CssClass property of DropDownbutton component.  
 
Refer the below code example  
 
<SfDropDownButton Content="Actions" CssClass="GridBtn" IconCss="e-icons e-message"> 
. . . .  
</SfDropDownButton> 
  
  
<style> 
    .GridBtn{ 
        background-color: white; 
        color: black; 
    } 
 
 
For your convenience we have prepared a sample which can be downloaded from below  
 
 
Please get back to us if you have further queries.  
  
Regards, 
Vignesh Natarajan 


CJ chris johansson June 2, 2021 11:50 PM UTC

Ok thanks for that information I appreciate it.

I guess I was also just wondering if you could put this   which is the drop down for the column chooser to have inside the custom menu with the other add/update/delete buttons.

Also Is there any way possible when you have a     private static RenderFragment Menu =@<Menu></Menu>; To some how when the option is selected inside the menu fragment, do it's logic, and then when it returns to the index page run some logic and call a statehaschanged?
I tried to put some callback methods, those don't work with static renderfragment. Also tried some cascading values and such but I can't get the statehaschanged on the index  page to work. thanks

VN Vignesh Natarajan Syncfusion Team June 3, 2021 07:31 AM UTC

Hi Chris,  
 
Thanks for the update.  
 
Query: “which is the drop down for the column chooser to have inside the custom menu with the other add/update/delete buttons.” 
 
We have analyzed your query and we would like to inform that we have already provided support to open to Column chooser dialog on a external button. So we request you to achieve your requirement by opening the column chooser dialog externally on a custom button from dropdown menu.  
 
Refer the below code example  
 
<SfDropDownButton Content="Actions" CssClass="GridBtn" IconCss="e-icons e-message"> 
    <DropDownButtonEvents ItemSelected="((args) => select(args))"></DropDownButtonEvents> 
    <DropDownMenuItems> 
        <DropDownMenuItem IconCss="e-icons e-edit" Text="Edit"></DropDownMenuItem> 
        <DropDownMenuItem IconCss="e-icons e-delete" Text="Delete"></DropDownMenuItem> 
        <DropDownMenuItem IconCss="e-icons e-update" Text="Update"></DropDownMenuItem> 
        <DropDownMenuItem IconCss="e-icons e-cancel-icon" Text="Cancel"></DropDownMenuItem> 
        <DropDownMenuItem Text="Columns"></DropDownMenuItem> 
    </DropDownMenuItems> 
</SfDropDownButton> 
  
 
@code { 
    [CascadingParameter] 
    public SfGrid<Order> Grid { get; set; } 
  
    [Parameter] 
    public Func<string, bool> OnClickCallback { get; set; } 
  
    private async Task select(MenuEventArgs args) 
    { 
        OnClickCallback.Invoke(args.Item.Text); 
        switch (args.Item.Text) 
        { 
            case "Columns": 
              //SPECIFY X AND Y COORDINATES 
                await Grid.OpenColumnChooser(50,75); 
                break; 
  
        } 
 
 
Kindly refer the below sample for your reference 
 
 
Refer our UG documentation for your reference 
 
 
Query: “ then when it returns to the index page run some logic and call a statehaschanged?” 
 
In our sample previously provided, we have rendered the RenderFragment without the static variable. Kindly modify your sample above sample to ignore the static definition from RenderFragment and we are able to call back function in Index page when Menu item is clicked.  
 
Kindly refer the sample attached in first query and please get back to us with more details if you are still facing the issue.    
 
Regards, 
Vignesh Natarajan 


CJ chris johansson June 3, 2021 04:46 PM UTC

Thanks the grid columns in the menu works as expected.

Even if you rearrange the way you did, I can't call statehaschanged because its static. and can't change the static return method.


VN Vignesh Natarajan Syncfusion Team June 4, 2021 06:49 AM UTC

 Hi Chris,  
 
Query: “Even if you rearrange the way you did, I can't call statehaschanged because its static. and can't change the static return method.” 
 
We are able to reproduce the reported issue at our end also. we have modified the solution (to remove the static name) as below to resolve the reported issue. Refer the below code example.  
 
[Index.razor] 
@code{ 
  
    public RenderFragment title 
    { 
        get 
        { 
            return@<Tool OnClickCallback="Clicked"></Tool>; 
        } 
    } 
} 
[Index.razor.cs] 
public void Clicked(string text) {     StateHasChanged();     Console.WriteLine(text);            }
 
[Tool.razor] 
 
[Parameter]   public Action<string> OnClickCallback { get; set; }    private async Task select(MenuEventArgs args)   {       OnClickCallback.Invoke(args.Item.Text);  . . .    }
 
 
 
Kindly download the modified sample from below  
 
 
Please get back to us if you have further queries.  
 
Regards, 
Vignesh Natarajan  
 


Loader.
Up arrow icon