Create autocomplete box in Syncfusion

Question

How to create autocomplete box when edit mode is inlineFormTemplate

for eg:

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

score 3 · Answer 1 · answered Feb 21 '17 at 12:42

We would like to inform you that, In Asp.Net Core, control has been rendered initially. When using the render Template concepts, the control will not be created. To handle this, we have achieved your requirement by rendering the Autocomplete control from client side.Please find code of the sample in the Grid to use the Autocomplete in a Grid column when Editing.

Code:

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

Create autocomplete box in Syncfusion

1 Answers1