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.
Unfortunately, activation email could not send to your email. Please try again.

Grid Column Building Different DataSource for DropDownList Categories

Thread ID:

Created:

Updated:

Platform:

Replies:

118537 Mar 17,2015 06:24 PM Mar 18,2015 03:34 AM ASP.NET MVC 1
loading
Tags: Grid
Aaron
Asked On March 17, 2015 06:24 PM


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 [Syncfusion]
Replied On March 18, 2015 03:34 AM

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


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.

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.

;