We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
Unfortunately, activation email could not send to your email. Please try again.

AutoComplete Cell in Grid

Thread ID:

Created:

Updated:

Platform:

Replies:

131051 Jun 17,2017 09:51 AM Jun 21,2017 05:18 AM ASP.NET Core 3
loading
Tags: Grid
Zhen Liu
Asked On June 17, 2017 09:51 AM

Is it possible to make AutoComplete Grid cells?

Jayaprakash Kamaraj [Syncfusion]
Replied On June 19, 2017 04:42 AM

Hi Zhen Liu, 

Thank you for contacting Syncfusion support. 

We can render any other control(Eg: textarea /colorpicker/dropdown/autocomplete) in grid column using edittemplate feature and also we can use all the features for corresponding controls. Please refer to the below help document, code example and sample. 


<ej-grid id="FlatGrid" allow-paging="true" datasource="ViewBag.dataSource"> 
    <e-edit-settings allow-adding="true" allow-editing="true" allow-deleting="true"></e-edit-settings> 
    <e-toolbar-settings show-toolbar="true" toolbar-items='@new List<string> {"add","edit","update","cancel"}' /> 
    <e-columns> 
        <e-column field="OrderID" is-primary-key="true" header-text="Order ID"></e-column> 
        <e-column field="CustomerID" header-text="CustomerID"> 
            <e-edit-template create="create" read="read" write="write"> 
            </e-edit-template> 
        </e-column> 
        <e-column field="Freight" header-text="Freight"></e-column> 
        <e-column field="ShipCity" header-text="ShipCity"> 
        </e-column> 
    </e-columns> 
</ej-grid> 
 
 
<script type="text/javascript"> 
    function create() { 
        return $("<input>"); 
    } 
 
    function write(args) { 
        obj = $('#FlatGrid').ejGrid('instance'); 
        var data = ej.DataManager(obj.model.dataSource); 
        args.element.ejAutocomplete({ width: "100%", dataSource: data, fields: { text: "CustomerID" }, enableDistinct: true, value: args.rowdata !== undefined ? args.rowdata["CustomerID"] : "", select: "onautoselect" }); 
    } 
 
    function read(args) { 
        args.ejAutocomplete('suggestionList').css('display', 'none'); 
        return args.ejAutocomplete("getValue"); 
    } 
    $("#FlatGrid").keyup(function (e) { 
        if (e.keyCode == 40 && $(e.target).hasClass("e-autocomplete")) { 
            var autocomp = $("#FlatGridCustomerID").ejAutocomplete("instance") 
            if (autocomp.getValue() != "" && autocomp.getActiveText() != "No suggestions") 
                $(e.target).val(autocomp.getActiveText()); 
        } 
    }); 
 
</script> 


Regards, 

Jayaprakash K. 
 


Zhen Liu
Replied On June 20, 2017 06:34 PM

I tried to bind to my own data through Json API, when I type things in the autocomplete field, all the candidates show up in the drop down list regardless of what I am typing.

Is there anything wrong with my code?

And also, is there a simple way to bind ViewBag datasource to the autocomplete control in the Script section?


                                <e-column field="SKU" header-text="SKU" width="80">
                                    <e-edit-template create="create" read="read" write="write">
                                    </e-edit-template>
                                </e-column>

        function create() {
            return $("<input>");
        }

        var proddata = ej.DataManager({ url: "/api/Products", adaptor: new ej.WebApiAdaptor() })
        function write(args) {
            args.element.ejAutocomplete({ width: "100%", dataSource: proddata, fields: { text: "value" }, enableDistinct: true, value: args.rowdata !== undefined ? args.rowdata["SKU"] : "", select: "onautoselect" });
        }

        function read(args) {
            args.ejAutocomplete('suggestionList').css('display', 'none');
            return args.ejAutocomplete("getValue");
        }

        $("#FlatGrid").keyup(function (e) {
            if (e.keyCode == 40 && $(e.target).hasClass("e-autocomplete")) {
                var autocomp = $("#FlatGridSKU").ejAutocomplete("instance")
                if (autocomp.getValue() != "" && autocomp.getActiveText() != "No suggestions")
                    $(e.target).val(autocomp.getActiveText());
            }
        });

Jayaprakash Kamaraj [Syncfusion]
Replied On June 21, 2017 05:18 AM

Hi Zhen Liu, 

Query1: I tried to bind to my own data through Json API, when I type things in the autocomplete field, all the candidates show up in the drop down list regardless of what I am typing. 
 
While using webApiAdaptor in AutoComplete control we need to handle searching operation in server side and then return filtered records in server side. Please refer to the below code example. 
 
        public ActionResult DataSource([FromBody] Syncfusion.JavaScript.DataManager dm) 
        { 
            if (dm.Where[0].value.ToString() == "") 
            { 
                return null; 
            } 
            else 
            { 
                IEnumerable Data = order; 
                var result = order.ToList(); 
                var search = from n in result where n.CustomerID.ToLower().Contains(dm.Where[0].value.ToString()) select n; // Filtering based on the searched word 
                return Json(search.ToList()); 
            } 
        } 


Query 2:  is there a simple way to bind ViewBag datasource to the autocomplete control in the Script section? 
 
We suggest you to use below code example to bind ViewBag.datasource in autocomplete control. 
 
    function write(args) { 
        obj = $('#FlatGrid').ejGrid('instance'); 
        var data =  @Html.Raw(Json.Serialize(ViewBag.dataSource));   
        args.element.ejAutocomplete({ width: "100%", dataSource: data, fields: { text: "FirstName" }, enableDistinct: false, value: args.rowdata !== undefined ? args.rowdata["CustomerID"] : "", select: "onautoselect" }); 
    } 


Regards, 

Jayaprakash K. 
 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.

;