Using DropDownList widget with edit template

[Nate Greene]

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:

<script id="addRecipeItemTemplate" type="text/template">

    <table cellspacing="10">

        <tr>

            <td>Description</td>

            <td>

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

            </td>

        </tr>

        <tr>

            <td>Qty</td>

            <td>

                <input type="text" id="Qty" name="Qty" value="{{:Qty}}" />

            </td>

        </tr>

        <tr>

            <td>Cost</td>

            <td>

                <input type="text" id="InvIndUnitCost" name="{{:InvIndUnitCost}}" />

            </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

[Vignesh Natarajan]

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

                        })) 

 

<script id="template" type="text/template"> 

    <table cellspacing="10"> 

        <tr> 

            <td>ShipCity</td> 

            <td> 

                <input type="text" id="ShipCity" name="ShipCity" value="{{:ShipCity}}" /> 

            </td> 

        </tr> 

        <tr> 

            <td>Freight</td> 

            <td> 

                <input type="text" id="Freight" name="Freight" value="{{:Freight}}" /> 

            </td> 

        </tr> 

        <tr> 

            <td>ShipCountry</td> 

            <td> 

                <input type="text" id="ShipCountry" name="{{:ShipCountry}}" /> 

            </td> 

        </tr> 

    </table> 

</script> 

 

<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: 

 

 

 

Refer the below link for help documentation, 

 

https://help.syncfusion.com/aspnetmvc/grid/editing#edit-modes  

 

https://help.syncfusion.com/api/js/ejdropdownlist#members:enablefiltersearch  

 

https://help.syncfusion.com/api/js/ejgrid#events:actioncomplete  

 

We have also discussed the same in our knowledge base document section. Kindly refer the below link for the knowledge base document 

 

Kb: https://www.syncfusion.com/kb/7746/how-render-ejcontrols-in-the-edit-form-template-of-the-mvc-grid  

 

Regards, 

Vignesh Natarajan.