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. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

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

<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 [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(); 
                        })) 
 
<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, 
 
 
 
 
We have also discussed the same in our knowledge base document section. Kindly refer the below link for the knowledge base document 
 
 
Regards, 
Vignesh Natarajan. 
 


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.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon 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.Close Icon

;