How to add DropDownList to grid ToolBar for Ej2?

[Richard Werning]

I've searched the web, forums, help & demos, but haven't found any example yet on how to add a custom toolbaritem of the EJS Dropdownlist to a grid in EJ2 / Razor pages. Lots of examples in EJ1 or other platforms, but not able to find what I need. 

I believe it's something along this line, but haven't been able to figure out the actual implementation yet:

@{ 

    List<object> toolbarItems = new List<object>();

    toolbarItems.Add("Add");

    toolbarItems.Add("Edit");

    ToolbarItem separator = new ToolbarItem { Type = ItemType.Separator };

    toolbarItems.Add(separator);

    toolbarItems.Add("ExcelExport");

    // adds a regular checkbox to toolbar using Template works 

    ToolbarItem checkbox = new ToolbarItem {Template = "<div><input type='checkbox' id='check1' checked=''>Accept</input></div>"};

    toolbarItems.Add(checkbox);

   // How to add an EJS().DropDownList ?

    ToolbarItem dropdown = new ToolbarItem { Type = ItemType.Input, Template = new DropDownList { DataSource: ViewBag["SelectedSports"] } };

    toolbarItems.Add(dropdown);

    // EJ1 example

    //var input = new ToolbarItem {Type = ItemType.Input, template = new ej.dropdowns.DropDownList({ dataSource: sportsData, width: 120, index: 2 })};

    //toolbarItems.Add(input);

} 

<div class="row">

    @(Html.EJS().Grid<PersonVm>("PersonGrid")

    @(Html.EJS().Grid<PersonVm>("PersonGrid")

          .DataSource(ds => { ds.Url(Url.Action("LoadRecords")).UpdateUrl(Url.Action("Edit")).InsertUrl(Url.Action("Create")).Adaptor("UrlAdaptor"); }) // .RemoveUrl(Url.Action("Delete"))

          .EditSettings(edit => { edit.AllowAdding(true).AllowEditing(true).ShowDeleteConfirmDialog(true).Mode(EditMode.Dialog); })

          .AllowPaging()

          .PageSettings(page => page.PageSize(15).PageSizes(new[] { "10", "15", "25", "50" }))

          .SortSettings(sort => sort.Columns(new { field = "LastName", direction = "Ascending" }))

          .AllowFiltering().FilterSettings(filter => { filter.Type(FilterType.Menu); })

          .Toolbar(toolbarItems)

          .AllowExcelExport()

          .Columns(col => {

              col.Field(p => p.Id).IsPrimaryKey(true).IsIdentity(true).Visible(false).Add();

              col.Field("Prefix").HeaderText("Prefix").Type("string").Add();

              col.Field("FirstName").HeaderText("First tName").Type("string").Add();

              col.Field("LastName").HeaderText("Last Name").Type("string").Add();

              col.Field("Suffix").HeaderText("Suffix").Add();

              col.Field("PhoneNumber").HeaderText("Phone Number").Type("string").ValueAccessor("formatPhoneNumber").Add();

          })

          .Render()

    )

</div>

[Thavasianand Sankaranarayanan]

Hi Richard, 

Greetings from Syncfusion support. 

We can achieve your requirement by using the toolbar.template property. We have prepared a simple sample in which we have added the custom toolbar items as a collection ItemModels. The custom component should be given inside a div element and you can use the id of that div element for the template property. Please refer to the below code example, Documentation link and sample link. 

[Child.cshtml] 

@{ 

    List<object> toolbarItems = new List<object>(); 

    toolbarItems.Add(new { template = "#template" }); 

 

    var query = "new ej.data.Query()"; 

} 

<div id="template" type="text/x-template"> 

    <div> 

        @Html.EJS().DropDownList("games").DataSource((IEnumerable<object>)ViewBag.dropDownData).Fields(new Syncfusion.EJ2.DropDowns.DropDownListFieldSettings{ Text ="text", Value="value"}).Query(query).Render() 

    </div> 

</div> 

 

<br /> 

 

@Html.EJS().Grid("FlatGrid").DataSource((IEnumerable<object>)ViewBag.dataSource).Toolbar(toolbarItems).Columns(col => 

{ 

    col.Field("EmployeeID").HeaderText("Employee ID").IsPrimaryKey(true).Width("120").Add(); 

    col.Field("CustomerID").HeaderText("Customer Name").Add(); 

    col.Field("OrderDate").HeaderText("Order Date").Type("date").Width("110").Add(); 

    col.Field("Freight").HeaderText("Freight").Width("120").Add(); 

    col.Field("ShipCountry").HeaderText("Ship Country").Width("150").Add(); 

}).AllowPaging().Render() 

------------------------------------------------------------------------------------------------------------------------------------------------ 

[HomeController.cs] 

 public static List<CustomToolBar> dropDownData = new List<CustomToolBar>(); 

public ActionResult Child() 

        { 

 

            ----             

 

            if (dropDownData.Count() == 0) 

            { 

                dropDownData.Add(new CustomToolBar() { text = "Add", value = "Add" }); 

                dropDownData.Add(new CustomToolBar() { text = "Edit", value = "Edit" }); 

                dropDownData.Add(new CustomToolBar() { text = "Delete", value = "Delete" }); 

                dropDownData.Add(new CustomToolBar() { text = "Update", value = "Update" }); 

                dropDownData.Add(new CustomToolBar() { text = "Cancel", value = "Cancel" }); 

            } 

            ViewBag.dropDownData = dropDownData; 

            ViewBag.datasource = orddata.ToArray(); 

            return View(); 

        } 

public class CustomToolBar 

        { 

            public CustomToolBar() { } 

 

            public CustomToolBar( string text, string value) 

            { 

                this.text = text; 

                this.value = value; 

            } 

            public string text { get; set; } 

            public string value { get; set; } 

        } 

Refer the below screen shot. 

 

Refer the help documentation. 

Link: https://ej2.syncfusion.com/aspnetmvc/documentation/grid/tool-bar/?no-cache=1#custom-toolbar-items 

Please let us know if you need further assistance on this. 

Regards, 

Thavasianand S. 

[Richard Werning]

Thank you, that helps me move forward.  Suggestion for improvement would be to add some thing similar to your help documentation, the link you provided did not explain how to implement a template very well.

Thank you,

Rich

[Thavasianand Sankaranarayanan]

Hi Richard, 

Thanks for your update. 

As per your suggestion we have logged an improvement task for detail explaining about how to render custom toolbar with DropDownList control and it will be refreshed online ASAP.  

Regards, 

Thavasianand S.