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

Grid Column Building Different DataSource for DropDownList Categories

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())

1 Reply

MS Madhu Sudhanan P Syncfusion Team 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

Live Chat Icon For mobile
Up arrow icon