編集モードは、例えばためinlineFormTemplate</p> <p>ときに、オートコンプリートボックスを作成する方法Syncfusion

Question

でオートコンプリートボックスを作成します。

<script id="template" type="text/template"> 
<input type="text" name="test" value="{{:test}}"/> 
//here i need autocomplete textbox like this 
<ej-autocomplete id="search1" filter-type="Contains" highlight-search="true" show-rounded-corner="true" enable-auto-fill="true" 
        enable-distinct="true" show-popup-button="true" watermark-text="Country name" items-count="20" min-character="2" 
        width="150" popup-width="500px" popup-height="250px" 
        template="<div width='5%'>${CountryName} ${CountryId}</div>"> 
     <e-autocomplete-fields key="CountryId" text="CountryName" /> 
     <e-datamanager adaptor="UrlAdaptor" url="/country/SelectCountry"></e-datamanager> 
    </ej-autocomplete> 
</script> 

Answer 1

我々はAsp.Netコアでは、コントロールがレンダリングされている、ことをお知らせしたいと思います最初はレンダーテンプレートの概念を使用する場合、コントロールは作成されません。これを処理するために、クライアント側からオートコンプリートコントロールをレンダリングすることで、要件を満たしています。編集時にグリッドのオートコンプリートを使用するために、グリッド内のサンプルのコードを見つけてください。

コード：

<ej-grid id="Edittemplate" allow-paging="true"> 
     <e-datamanager url="//mvc.syncfusion.com/Services/Northwnd.svc/Orders/?$top=45" offline="true"></e-datamanager> 
     <e-edit-settings allow-adding="true" allow-deleting="true" allow-editing="true" edit-mode="Normal" /> 
     <e-toolbar-settings show-toolbar="true" toolbar-items='new List<string>() { "add", "edit", "delete", "update", "cancel", "search" }' /> 
     <e-columns> 
      <e-column field="OrderID" is-primary-key="true" header-text="Order ID" text-align="Right" width="70"></e-column> 
      <e-column field="CustomerID" header-text="Customer ID" width="80"> 
       <e-edit-template create="create" read="read" write="write"></e-edit-template> 
      </e-column> 
      <e-column field="EmployeeID" header-text="Employee ID" text-align="Left" width="75"></e-column> 
      <e-column field="Freight" header-text="Freight" text-align="Right" format="{0:C2}" width="75"></e-column> 
      <e-column field="OrderDate" header-text="Order Date" text-align="Right" width="80" format="{0:MM/dd/yyyy}"></e-column> 
      <e-column field="ShipCity" header-text="Ship City" width="110"></e-column> 
     </e-columns> 
    </ej-grid> 

<script type="text/javascript"> 
function create() { 
    return $("<input>"); 
} 

function write(args) { 
    obj = $('#Edittemplate').ejGrid('instance'); 
    args.element.ejAutocomplete({ 
     width: "100%", dataSource: obj.model.dataSource, 
     query: ej.Query().from("Suppliers").select("CustomerID"), 
     filterType: "contains", 
     multiColumnSettings: { 
      stringFormat: "{0} ({2}) ({1})", 
      enable: true, 
      showHeader: true, 
      columns: [{ 
       field: "CustomerID", 
       headerText: "CustomerID", 
      }, 
      { 
       field: "OrderID", 
       headerText: "OrderID" 
      }, 
      { 
       field: "EmployeeID", 
       headerText: "EmployeeID" 
      }, 
      { 
       field: "ShipCity", 
       headerText: "ShipCity" 
      } 
      ] 
     }, value: args.rowdata !== undefined ? args.rowdata["CustomerID"] : "" 
    }); 
} 

function read(args) { 
    args.ejAutocomplete('suggestionList').css('display', 'none'); 
    return args.ejAutocomplete("getValue"); 
} 
$("#Edittemplate").keyup(function (e) { 
    if (e.keyCode == 40 && $(e.target).hasClass("e-autocomplete")) { 
     var autocomp = $("#EdittemplateCustomerID").ejAutocomplete("instance") 
     if (autocomp.getValue() != "" && autocomp.getActiveText() != "No suggestions") 
      $(e.target).val(autocomp.getActiveText()); 
    } 
});