trying add custom component grid toolbar with a template

Hi, 

i'm trying adding a dropdownMenu to standar toolbar grid 

definion toolbar:

private List<Object> Toolbaritems = new List<Object>() { "Add", "Edit", "Delete", "Update", "Cancel",
        new ItemModel() { Type = ItemType.Separator },
        new ItemModel() { Text = "Ver Reservas", PrefixIcon = "e-CalculatedMember", Id = "btnReservas" },
        new ItemModel() { Text = "Cuantificación Comandas", PrefixIcon = "e-Sum", Id = "btnCuantificacio" },
        new ItemModel() { Type = ItemType.Separator } ,
        new ItemModel() { Type = ItemType.Button, Template = AditionalOps}
  };

definition RenderFragment:

  private static RenderFragment AditionalOps =@<div>
        <SfDropDownButton Content="Funciones">
            <DropDownButtonEvents ItemSelected="OpcSelected"></DropDownButtonEvents>
            <DropDownMenuItems>
                <DropDownMenuItem Id="OPC1" Text="Option 1" IconCss="e-ddb-icons e-dashboard" ></DropDownMenuItem>
                <DropDownMenuItem Id="OPC2" Text="Option 2" IconCss="e-ddb-icons e-notifications"></DropDownMenuItem>
                <DropDownMenuItem Id="OPC3" Text="Option 3" IconCss="e-ddb-icons e-settings"></DropDownMenuItem>
            </DropDownMenuItems>
        </SfDropDownButton>
    </div>;

all is correct if not put DropDpownButtonEvents node, but with the DropDpownButtonEvents i have compile error: CS0026 Keyword 'this' is not valid in a static property, static method, or static field initializer

if omit the static in renderfragment definition, another compiler error happens, don't sure where is the problem, 

the OpcSelectetd method is:

public void OpcSelected(MenuEventArgs args)
  {
          // handle option selected
  }


can please supply any example for this i was search in documentation and forum but not found similar situation


thanks.




7 Replies

RS Renjith Singh Rajendran Syncfusion Team December 7, 2020 03:31 PM UTC

Hi Sergio, 

Greetings from Syncfusion support. 

We suggest you to use as like the below code to overcome the reported problem you are facing. Please refer and use the below highlighted codes to overcome the reported behavior, 

 
<SfGrid DataSource="@Orders" ... AllowPaging="true" Height="200" Toolbar="@(new List<Object>() { "Add""Edit""Delete""Update""Cancel", 
        new ItemModel() { Type = ItemType.Separator }, 
        new ItemModel() { Text = "Ver Reservas", PrefixIcon = "e-CalculatedMember", Id = "btnReservas" }, 
        new ItemModel() { Text = "Cuantificación Comandas", PrefixIcon = "e-Sum", Id = "btnCuantificacio" }, 
        new ItemModel() { Type = ItemType.Separator } , 
        new ItemModel() { Type = ItemType.Button, Template = AditionalOps} 
  })"> 
    ... 
</SfGrid> 
 
    private RenderFragment AditionalOps => @<div> 
        <SfDropDownButton Content="Funciones"> 
            <DropDownButtonEvents ItemSelected="OpcSelected"></DropDownButtonEvents> 
            <DropDownMenuItems> 
                <DropDownMenuItem Id="OPC1" Text="Option 1" IconCss="e-ddb-icons e-dashboard"></DropDownMenuItem> 
                <DropDownMenuItem Id="OPC2" Text="Option 2" IconCss="e-ddb-icons e-notifications"></DropDownMenuItem> 
                <DropDownMenuItem Id="OPC3" Text="Option 3" IconCss="e-ddb-icons e-settings"></DropDownMenuItem> 
            </DropDownMenuItems> 
        </SfDropDownButton> 
    </div>; 
    public static void OpcSelected(MenuEventArgs args) 
    { 
        // handle option selected 
    } 


Please get back to us if you need further assistance. 

Regards, 
Renjith Singh Rajendran 



SC Sergio Cabello December 7, 2020 05:14 PM UTC

yes, is working

thanks Renjith 

best regards


RS Renjith Singh Rajendran Syncfusion Team December 8, 2020 06:04 AM UTC

Hi Sergio, 

Thanks for your update. 

We are glad to hear that the suggestion solution helped you in achieving this requirement.  

Please get back to us if you need further assistance. 

Regards, 
Renjith R 



BD Boot Dat replied to Renjith Singh Rajendran November 24, 2021 02:54 PM UTC

Hi Renjith Singh Rajendran

i have 

Toolbar="@Toolbaritems" in my grid.


How can i add a search to the itemmodel?

i currently have these

Toolbaritems.Add(new ItemModel() { Text = "Add", TooltipText = "Add a new Product Name", PrefixIcon = "e-add" });

Toolbaritems.Add(new ItemModel() { Text = "Edit", TooltipText = "Edit selected Product Name", PrefixIcon = "e-edit" });

Toolbaritems.Add(new ItemModel() { Text = "Delete", TooltipText = "Delete selected Product Name", PrefixIcon = "e-delete" });

or is there anyway i can add  (new List<string>() { "Search" })  to the grid as a template and not include it as an itemmodel  ?





RS Renjith Singh Rajendran Syncfusion Team November 25, 2021 11:50 AM UTC

Hi Boot, 
 
We have already documented the topic to render built-in and custom toolbar items in Grid’s toolbar. We suggest you to refer the below documentation for more details, 
 
Please get back to us if you need further assistance. 
 
Regards, 
Renjith R 



ET enis tüfekci December 3, 2021 11:22 AM UTC

Merhaba, bir sorunum var ve ondan kurtulamıyorum. 

Gridde mevcut elemanların yanına yeni itemler ekledim ve diğerleri gibi tıklandıgında bir popup ekranı açmak istiyorum.


korumalı Liste<Nesne> DownTimeToolbaritems = new()

        {

            "Add",

            new ItemModel() { Text = "Düzenle", TooltipText = "Finish", PrefixIcon = "e-stop e-icons e-btn-icon e-icon-left", Id = "Grid_edit" },

            "Delete",

            new ItemModel() { Metin = "Bitir", TooltipText = "Bitir", PrefixIcon = "e-stop e-icons e-btn-icon e-icon-left", Id = "Grid_Finish"},

            new ItemModel() { Text = "AddBatch", TooltipText = "AddBatch", PrefixIcon = "e-iconlar e-btn-icon e-icon-left", Id = "Grid_add" },

            new ItemModel() { Text = "FinishBatch", TooltipText = "FinishBatch", PrefixIcon = "e-pause e-icons e-btn-icon e-icon-left", Id = "FinishBatch" },

            "Print",

            "Search",

            "ExcelExport",

            "PdfExport",

            "ColumnChooser",


        };


public async Task ToolbarClickHandlerDownTime(Syncfusion.Blazor.Navigations.ClickEventArgs args)

        {

            try

            {

                switch (CurrentToolBarId = args.Item.Id)

                {

                    case "Grid_refresh": DefaultGrid.Refresh(); break;

                    case "Grid_save": break;

                    case "Grid_edit": break;

                    case "Grid_add": break;

                    case "Grid_AddBatch":break;

                    case "Grid_Finish" :

                        break;

                    case "Grid_delete": break;

                    case "Grid_update": break;

                    case "Grid_excelexport":

                        await this.DefaultGrid.ExcelExport();

                        break;

                    case "Grid_pdfexport":

                        await this.DefaultGrid.PdfExport();

                        break;

                }

            }

What method would you suggest?



RS Renjith Singh Rajendran Syncfusion Team December 6, 2021 04:09 AM UTC


Loader.
Up arrow icon