html helpers for autocomplete is not binding inside inlineFormtemplate in ej-datagrid -Syncfusion

Question

Index page

    <ej-grid id="State" allow-paging="true" allow-filtering="true" allow-sorting="true" virtual-loading="true"
                 is-responsive="true" height="500" allow-multi-sorting="true" enable-touch="true" common-width="10">
            <e-filter-settings filter-type="Menu" />
            <e-datamanager adaptor="UrlAdaptor" url="/State/GetAll" update-url="/State/Update" insert-url="/State/Update" />

            <e-edit-settings allow-deleting="true" allow-editing="true" allow-adding="true" 
                             edit-mode="InlineFormTemplate" inline-form-template-id="#template"/>
            <e-toolbar-settings show-toolbar="true"                            
                                toolbar-items='@new List<string> {"search","add","edit","delete", "excelExport", "pdfExport", "wordExport"}' />



            <e-columns>
                <e-column header-text="Test Col" visible="true"
                          Template="<a href=/state/Edit?AutoId={{:StateMasterAutoId}}>Edit</a>" width="12" priority="1" />
                <e-column field="StateMasterAutoId" header-text="ID" is-primary-key="true" width="10" visible="false" />
                <e-column field="StateId" header-text="StateId" width="20" />
                <e-column field="StateName" header-text="State Name" width="50" />
                <e-column field="CountryName" header-text="Country Name" visible="false" width="50" />
                <e-column field="StateShortname" header-text="Short Name" width="50" />
                <e-column field="CountryId" header-text="Country Id" visible="false" width="50" />
            </e-columns>
            <e-sort-settings>
                <e-sorted-columns>
                    <e-sorted-column field="StateMasterAutoId" direction="Ascending" />
                </e-sorted-columns>
            </e-sort-settings>
        </ej-grid>
@Html.Partial("statepartial")

Statepartial

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

            <form action="/state/edit" method="post">
                <table cellspacing="10">
                    <tr>
                        <td>State ID</td>
                        <td>
                            <input id="StateId" name="StateId" disabled="disabled" value="{{:StateId}}" class="e-field e-ejinputtext" style="width:116px;height:28px" />
                        </td>
                        <td>StateMasterAutoId</td>
                        <td>
                            <input id="StateMasterAutoId" name="StateMasterAutoId" disabled="disabled" class="e-field e-ejinputtext" style="width:116px;height:28px" />
                        </td>
                        <td>State Name</td>
                        <td>
                            <input id="StateName" name="StateName" value="{{:StateName}}" class="e-field e-ejinputtext" style="width: 116px; height: 28px" />

                        </td>
                    </tr>
                    <tr>
                        <td>Country ID</td>
                        <td>

                            @{Html.EJ().Autocomplete("CountryId").Width("200").PopupWidth("350px").PopupHeight("300px").WatermarkText("enter country name")
                                .FilterType(FilterOperatorType.Contains).ShowPopupButton(true).MinCharacter(2).ItemsCount(20).EnableDistinct(true)
                                .ShowRoundedCorner(true).ShowResetIcon(true).EnableAutoFill(true).HighlightSearch(true).ShowRoundedCorner(true).ShowResetIcon(true)
                                  .Datasource(ds => { ds.URL("/Lookup/LookUps?LookUpId=country"); ds.Key("CountryMasterAutoId"); ds.Adaptor("UrlAdaptor"); })
                                  .AutocompleteFields(f => f.Text("CountryName").Key("CountryMasterAutoId"))
                                  .Query("ej.Query().select('CountryMasterAutoId','CountryName')")
                                  .MultiColumnSettings(mc => mc.Enable(true).Columns(obj1 =>
                                  {
                                      obj1.Field("CountryName").HeaderText("Country Name").Add();
                                      obj1.Field("CountryMasterAutoId").HeaderText("ID").Add();

                                  }).ShowHeader(true).StringFormat("{0}"))
                          .Visible(true).Render(); }




                        </td>
                    </tr>

                </table>
            </form>

        </script>

html helpers for autocomplete is not rendering inside the

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

Taghelpers for autocomplete is also not working inside the script tag

how can i get autocomplete field inside inlineTemplateform

Answer 1

We can render the html element alone inside the script tag with type jsrender. So, we need to specify the input element inside the template and render the ejAutoComplete by using that element on ActionComplete event of Grid control.

Partial view

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

            <form action="/state/edit" method="post">
                <table cellspacing="10">

                    <tr>
                        <td>Country ID</td>
                        <td>
                             <input id="CountryId" name="CountryId" value="{{:CountryId}}" class="e-field e-ejinputtext" style="width: 116px; height: 28px" />  
                        </td>
                    </tr>

                </table>
            </form>

        </script>

Index Page

function onActionComplete(args) {
        if (args.requestType == "beginedit" || args.requestType == "add") {

            var ele = $(".gridform").find("#CountryId");
            //Render ejAutoComplete inside edit form
            ele.ejAutocomplete({ width: "100%", dataSource: data, enableDistinct: true, fields: { text: "CountryId", key: "CountryId" },filterType: ej.filterType.StartsWith });
        }
    }