는 Syncfusion

Question

편집 모드가 inlineFormTemplate

예에 대한

때 자동 완성 상자를 만드는 방법

에 자동 완성 상자를 만듭니다

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