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

Grid Column Building Different DataSource for DropDownList Categories

Thread ID:





118537 Mar 17,2015 10:24 PM UTC Mar 18,2015 07:34 AM UTC ASP.NET MVC 1
Tags: Grid
Asked On March 17, 2015 10:24 PM UTC

So  I'm attempting  to make a dropdownlist    for when ever someone edit/add a value into the Grid.      So Far I can make the Drop down list appear but I cannot  get it to group the options  inside of the drop down list. 

My code is as follows

  var productData = new List<object>();
    foreach (var product in productCollection)
        productData.Add(new { value = product.Id, text = product..Name, category = product.DealerID });

                  .Datasource(ds => ds.Json(Model)
                            .InsertURL(@Url.Action("AddSalesData", "Admin"))
                            .UpdateURL(@Url.Action("EditSalesData", "Admin"))
    .EditSettings(edit =>


            //   .AllowGrouping()
    .EditSettings(edit => { edit.AllowAdding().AllowDeleting().AllowEditing(); })
              .ToolbarSettings(toolbar =>
                    toolbar.ShowToolbar().ToolbarItems(items =>
    .Columns(col =>
        col.Field(Html.NameFor(m => m.First().ID).ToString())
        .HeaderText(Html.DisplayNameFor(m => m.First().ID).ToString())
        col.Field(Html.NameFor(m => m.First().ProductName).ToString())
        .HeaderText(Html.DisplayNameFor(m => m.First().ProductName).ToString())

Madhu Sudhanan P [Syncfusion]
Replied On March 18, 2015 07:34 AM UTC

Hi Aaron,

Thanks for using Syncfusion products.

Query: “I can make the Drop down list appear but I cannot get it to group the options inside of the drop down list.”

We can use ejDropDownList for editing columns by settings the EditType as Dropdown but we don’t have in-built support to set grouping option for those DropDownList. And so we can achieve your requirement with the Edit Template feature of the grid. The EditTemplate of the column allow the user to specify the custom controls to be used on editing.

The DropDownList for a column with grouping can be achieved as follows.

@(Html.EJ().Grid<vendorsalesdetailviewmodel> ("SalesDetails")

. . . . .

.Columns(col =>


. . . . . .

col.Field(Html.NameFor(m => m.First().ProductName).ToString())

. . . .

.EditTemplate(t => t.Create("create").Read("read").Write("write"))

. . . . .





var data = @Html.Raw(Json.Encode((IEnumerable<object>)productData))

function create() {

return "<input>"; //Specify the element used to create custom control


function read(args) {

//Tell how to read value from custom control

return args.ejDropDownList("model.value");


function write(args) {

//Create custom control


width: "100%",

dataSource: data,


fields: { text: "ProductName", value: "ProductName", category: "Brand" },

value: args.rowdata !== undefined ? args.rowdata["ProductName"] : ""




Now while editing, the ejDropDownList with group option enabled is used to edit column ProductName. The grouping in dropdownlist will be done by setting the allowGrouping as true and provide the field to be grouped in category property of the fields.

Please refer the below link for more details on EditTemplate feature.

Demo: http://mvc.syncfusion.com/demos/web/grid/edittemplate

UG: http://help.syncfusion.com/ug/js/default.htm#!documents/edittemplate.htm

Please let us know if you require further assistance.


Madhu Sudhanan. P


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

or the page will be automatically redirected to 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