Grid Column Building Different DataSource for DropDownList Categories

[Aaron]

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 });

    }

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

                  .Datasource(ds => ds.Json(Model)

                            .InsertURL(@Url.Action("AddSalesData", "Admin"))

                            .UpdateURL(@Url.Action("EditSalesData", "Admin"))

                    .Adaptor(AdaptorType.RemoteSaveAdaptor)

                    )

    .EditSettings(edit =>

    {

        edit.AllowAdding()

            .AllowEditing()

                    .AllowDeleting()

                    .EditMode(EditMode.Normal)

        .ShowDeleteConfirmDialog(true);

    })

            //   .AllowGrouping()

    .EnableHeaderHover()

    .EditSettings(edit => { edit.AllowAdding().AllowDeleting().AllowEditing(); })

              .ToolbarSettings(toolbar =>

                {

                    toolbar.ShowToolbar().ToolbarItems(items =>

                    {

                        items.AddTool(ToolBarItems.Add);

                        items.AddTool(ToolBarItems.Edit);

                        items.AddTool(ToolBarItems.Delete);

                        items.AddTool(ToolBarItems.Update);

                        items.AddTool(ToolBarItems.Cancel);

                    });

                })

    .AllowPaging()

    .AllowScrolling()

    .Columns(col =>

    {

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

        .HeaderText(Html.DisplayNameFor(m => m.First().ID).ToString())

        .IsPrimaryKey(true)

        .TextAlign(TextAlign.Right)

        .Visible(false)

        .Add();   

     

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

        .HeaderText(Html.DisplayNameFor(m => m.First().ProductName).ToString())

        .TextAlign(TextAlign.Right)

        .EditType(EditingType.Dropdown)

                 .AllowGrouping()

         .DataSource((IEnumerable<object>)productData)

        .Add();   

    })

[Madhu Sudhanan P]

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

. . . . .

.Add();

})

)

<script>

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

args.element.ejDropDownList({

width: "100%",

dataSource: data,

allowGrouping:true,

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

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

});

}

</script>

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.

Regards,

Madhu Sudhanan. P