Using DropDownList widget with edit template

Thread ID:	Created:	Updated:	Platform:	Replies:
143253	Mar 11,2019 07:58 PM UTC	Mar 12,2019 10:46 AM UTC	ASP.NET MVC	1

Subscribe to this post

Tags: Grid

Nate Greene

Asked On March 11, 2019 07:58 PM UTC

I am using the Grid widget in a project and have decided to use the InlineFormTemplate to customize the input of information and used the example in the documentation to guide me.

The template script looks like this:

<tr>

<td>Description</td>

<td>

@Html.Raw(Session["MenuItemSelect"].ToString())

</td>

</tr>

<tr>

<td>

</td>

</tr>

<tr>

<td>

</td>

</tr>

</table>

</script>

The Html.Raw input is a string that dynamically places a select list into the template.

The grid looks like this :

@(Html.EJ().Grid<RecipeModel>("RecipeBuilder").ClientSideEvents(c => c.CellSave("completeAction"))

.Columns(col =>

{

col.Field("Description").HeaderText("Description").EditType(EditingType.Dropdown).IsPrimaryKey(true).Width(80).Add();

col.Field("MenuItemID").Visible(false).Add();

col.Field("Qty").HeaderText("Qty").TextAlign(TextAlign.Right).Width(75).Add();

col.Field("InvIndUnitCost").HeaderText("Cost").TextAlign(TextAlign.Right).Width(75).Add();

col.Field("RecipeItemID").Visible(false).Add();

}).AllowPaging()

.EditSettings(edit => { edit.AllowAdding().AllowDeleting().AllowEditing().EditMode(EditMode.InlineFormTemplate).InlineFormTemplateID("#addRecipeItemTemplate"); })

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

});

})

Can I use the dropdownlist widget with the inline template? I need to give the users the ability to search everything within the selectlist but the native html does not offer that option. I would like to use the dropdownlist widget to achieve this if possible. Could you show me how this can be accomplished and if anything special needs to be done for this to happen?

Many Thanks,

Nate

Reply | Reply with quote

Vignesh Natarajan [Syncfusion]

Replied On March 12, 2019 10:46 AM UTC

Hi Nate,

Thanks for contacting Syncfusion support.

Query: Can I use the dropdownlist widget with the inline template?

While using template form, you can change the HTML elements to appropriate JS controls based on the column type. This can be achieved by using ActionComplete event of grid. And to enable the dropdown list searching we suggest you to enable the enableFilterSearch property of ejDropDownList. Please refer the below code example,

@(Html.EJ().Grid<Object>("FlatGrid")

………………………………………….

.ClientSideEvents(eve => { eve.ActionComplete("complete"); })

.EditSettings(edit => { edit.AllowAdding().AllowDeleting().AllowEditing().EditMode(EditMode.InlineFormTemplate).InlineFormTemplateID("#template"); })

……………..

.Columns(col =>

{

col.Field("ShipCity").HeaderText("ShipCity").EditType(EditingType.DropdownEdit).IsPrimaryKey(true).Width(80).Add();

col.Field("CustomerID").Visible(false).Add();

col.Field("Freight").HeaderText("Qty").TextAlign(TextAlign.Right).Width(75).Add();

col.Field("ShipCountry").HeaderText("Cost").TextAlign(TextAlign.Right).Width(75).Add();

}))

<tr>

<td>ShipCity</td>

<td>

</td>

</tr>

<tr>

<td>Freight</td>

<td>

</td>

</tr>

<tr>

<td>ShipCountry</td>

<td>

</td>

</tr>

</table>

</script>

function complete(args) {

$("#ShipCountry").ejNumericTextbox();

$("#Freight").ejNumericTextbox();

$("#ShipCity").ejDropDownList({ enableFilterSearch: true, width: "100%", dataSource: window.gridData, fields: { text: "ShipCity", value: "ShipCity" } }); // render the html element to a desire jscontrol here.

}

</script>

Output: