用于自动完成的html帮助程序在ej-datagrid -Syncfusion中的inlineFormtemplate内部没有绑定

Question

索引页

    <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助手不会在

内呈现

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

用于自动填充的Taghelpers也无法在脚本标记

中使用

如何在inlineTemplateform

中获取自动完成字段

Answer 1

我们可以使用jsrender类型在脚本标记内单独呈现html元素。因此，我们需要在模板中指定input元素，并通过在Grid控件的ActionComplete事件上使用该元素来呈现ejAutoComplete。

部分视图

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

索引页

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