Dropdown box inside Grid cell

[Jason Beal]

I'm trying to figure out how to put a dropdown into a grid column with version 9.2.

[Sridhar N]

Hi Jason,

Thanks for your interest in Syncfusion products.

Query #1 "I'm trying to figure out how to put a dropdown into a grid column with version 9.2"

We suggest you to use DropDownList inside ItemTemplate of the GridColumnDescriptor. Please refer the below code snippet.

[ASPX]

OnSelectedIndexChanged="ddl_SelectedIndexChanged" EnableViewState="true">

[Codebehind- C#]

protected void ddlName_Init(object sender, EventArgs e)
{
DropDownList ddl = sender as DropDownList;
GridCell cell = ddl.NamingContainer as GridCell;
ddl.DataSource = GetList();
ddl.DataValueField = "Name";
ddl.DataBind();
ddl.SelectedValue = cell.StyleInfo.Text;
}
protected void ddl_SelectedIndexChanged(object sender, EventArgs e)
{
DropDownList ddl = sender as DropDownList;       
GridCell cell = ddl.NamingContainer as GridCell;
GridRow gr = cell.Row;
TableCellCollection tcc = gr.Cells;
foreach (TableCell tc in tcc)
{
GridCell gc = tc as GridCell;
if (gc.ColumnDescriptor.Name == "Name")
{
DropDownList ddlName = FindControlRecursive(cell.Row, "ddlName") as DropDownList;
gc.Row.Record.SetValue("Name", ddlName.SelectedValue);               
}
}
}

For your convenience, we have created sample and the same can be downloaded from the following link.

F1005391350280113.zip

Please let me know if you have any other questions or concerns.

Regards,
Sridhar.N

[Jason Beal]

How can I do the same thing with MVC 3/Razor?

My grid is created in the view and bound to a LINQ query through a call to the controller. I need to display the Action column as a drop down list of values, with the proper item selected based on the column's data.

VIEW:
@(New HtmlString( _
Html.Syncfusion.Grid(Of InfoCard) _
("Infocards", "InfocardModel", _
Sub(columns)
columns.Add(Of String)(Function(c As InfoCard) c.action).HeaderText("Action").Width(50)
columns.Add(Of String)(Function(c As InfoCard) c.data1).HeaderText("Data1").Width(40)
columns.Add(Of String)(Function(c As InfoCard) c.data2).HeaderText("Data2").Width(40)
columns.Add(Of String)(Function(c As InfoCard) c.data3).HeaderText("Data3").Width(40)
columns.Add(Of String)(Function(c As InfoCard) c.data4).HeaderText("Data4").Width(40)
columns.Add(Of String)(Function(c As InfoCard) c.data5).HeaderText("Data5").Width(40)
End Sub)))


IN CONTROLLER METHOD:

Dim infocards As IEnumerable(Of InfoCard) = InfoCardManager.GetAllCards

ViewData("Infocards") = infocards

Dim gridModel As GridPropertiesModel(Of InfoCard) = Nothing
gridModel = New GridPropertiesModel(Of InfoCard)() With { _
.Height = 100,
.Width = 1004,
.Caption = "InfoCards",
.DataSource = infocards,
.RowsSelectionMode = RowsSelectionMode.Normal,
.AllowSorting = True,
.AllowFiltering = True,
.AllowGrouping = True,
.AllowPaging = True,
.AllowScrolling = True,
.PageSize = 5,
.AutoFormat = Syncfusion.Mvc.Tools.jQuerySkins.MintChoc,
}
ViewData("InfocardModel") = gridModel

[Jason Beal]

Also, when I run the application, my grid is defined as 1180 width. When I perform any grid action, such as paging, the grid when redrawn resizes to 1255. What could be causing this?

[Jason Beal]

Disregard the scroll width problem. It was the following line:

gridModel.Scrolling.width = (1004 * 1.25)

[Sridhar N]

Hi Jason,

Thanks for your update.

We regret for the inconvenience caused. Before we start providing the solution, Could you please send us a simple sample reproducing the issue so that we can sort out the issue and provide you with the solution? The information provided would be of great help in resolving the issue.

Please let us know your concerns.

Regards,
Sridhar.N

[Sridhar N]

Hi Jason,

We regret for the inconvenience caused. Please ignore the previous response. Your requirement for using DropDown inside Grid in razor can be achieved by setting the CellEditType of the column. Please refer the below code snippet.

[View]

@{ Html.Syncfusion().Grid("SampleGrid")
.Datasource(Model)
.Caption("Orders")
.Column(col =>
{
col.Add(a => a.Id).MappingName("AdminId").HeaderText("Id");
col.Add(a => a.Forename).HeaderText("Forename");
col.Add(a => a.Surname).HeaderText("Surname");
col.Add(a => a.SageAccNo).HeaderText("Account No");               
col.Add(a => a.GoldCount).HeaderText("Gold").CellEditType(CellEditType.DropdownEdit);
})
.ClientSideEvents(eve=>{
eve.OnActionBegin("Mapping");
})
.EnablePaging()
.EnableSorting()
.EnableGrouping()
.EnableFiltering()
.ToolBar(tools =>
{
tools.Add(GridToolBarItems.AddNew)
.Add(GridToolBarItems.Edit)
.Add(GridToolBarItems.Delete)
.Add(GridToolBarItems.Update)
.Add(GridToolBarItems.Cancel);
})
.Editing(edit =>
{
edit.AllowEdit(true, "GridBuilder/OrderSave")
.AllowNew(true, "GridBuilder/AddOrder")
.AllowDelete(true, "GridBuilder/DeleteOrder");
edit.EditMode(GridEditMode.Normal);                                                                                               
edit.PrimaryKey(key => key.Add(p => p.Id));
})        
.Render(); 
}

For your convenience, we have created sample and the same can be downloaded from the following link.

Editing MVC Grid588066457.zip

We are unable to reproduce the issue. Could you please modify the above sample reproducing the issue so that we can sort out the issue and provide you with the solution? The information provided would be of great help in resolving the issue.

Please let me know if you have any other questions or concerns.

Regards,
Sridhar.N