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. Image for the cookie policy date

How to add DropDownList to grid ToolBar for Ej2?

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>();
    ToolbarItem separator = new ToolbarItem { Type = ItemType.Separator };

    // adds a regular checkbox to toolbar using Template works 
    ToolbarItem checkbox = new ToolbarItem {Template = "<div><input type='checkbox' id='check1' checked=''>Accept</input></div>"};

   // How to add an EJS().DropDownList ?
    ToolbarItem dropdown = new ToolbarItem { Type = ItemType.Input, Template = new DropDownList { DataSource: ViewBag["SelectedSports"] } };

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

<div class="row">
          .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); })
          .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); })
          .Columns(col => {
              col.Field(p => p.Id).IsPrimaryKey(true).IsIdentity(true).Visible(false).Add();
              col.Field("FirstName").HeaderText("First tName").Type("string").Add();
              col.Field("LastName").HeaderText("Last Name").Type("string").Add();
              col.Field("PhoneNumber").HeaderText("Phone Number").Type("string").ValueAccessor("formatPhoneNumber").Add();

3 Replies

TS Thavasianand Sankaranarayanan Syncfusion Team March 21, 2019 10:51 AM UTC

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. 


    List<object> toolbarItems = new List<object>(); 
    toolbarItems.Add(new { template = "#template" }); 
    var query = "new ej.data.Query()"; 
<div id="template" type="text/x-template"> 
        @Html.EJS().DropDownList("games").DataSource((IEnumerable<object>)ViewBag.dropDownData).Fields(new Syncfusion.EJ2.DropDowns.DropDownListFieldSettings{ Text ="text", Value="value"}).Query(query).Render() 
<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("ShipCountry").HeaderText("Ship Country").Width("150").Add(); 


 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. 

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

Thavasianand S. 

RW Richard Werning March 22, 2019 01:05 PM UTC

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,

TS Thavasianand Sankaranarayanan Syncfusion Team March 25, 2019 05:46 AM UTC

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.  

Thavasianand S. 

Live Chat Icon For mobile
Up arrow icon