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
close icon

Dropdown box inside Grid cell

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


6 Replies

SN Sridhar N Syncfusion Team August 16, 2011 07:39 AM UTC

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




JB Jason Beal August 16, 2011 01:01 PM UTC

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





JB Jason Beal August 16, 2011 02:13 PM UTC

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?



JB Jason Beal August 16, 2011 02:20 PM UTC

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

gridModel.Scrolling.width = (1004 * 1.25)



SN Sridhar N Syncfusion Team August 18, 2011 11:41 AM UTC

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



SN Sridhar N Syncfusion Team August 18, 2011 05:13 PM UTC

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



Loader.
Live Chat Icon For mobile
Up arrow icon