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. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to add DropDownList to grid ToolBar for Ej2?

Thread ID:

Created:

Updated:

Platform:

Replies:

143448 Mar 20,2019 01:45 PM UTC Mar 25,2019 05:46 AM UTC ASP.NET MVC - EJ 2 3
loading
Tags: Grid
Richard Werning
Asked On March 20, 2019 01:45 PM UTC

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 [Syncfusion]
Replied On 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. 

[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. 


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

Regards, 
Thavasianand S. 


Richard Werning
Replied On 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,
Rich

Thavasianand Sankaranarayanan [Syncfusion]
Replied On 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.  

Regards, 
Thavasianand S. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;