1. Home
  2. Forum
  3. ASP.NET Core
  4. AutoComplete Cell in Grid

AutoComplete Cell in Grid

Is it possible to make AutoComplete Grid cells?

3 Replies
JK Jayaprakash Kamaraj Syncfusion Team June 19, 2017 08:42 AM UTC

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. 
 


ZL Zhen Liu June 20, 2017 10:34 PM UTC

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

JK Jayaprakash Kamaraj Syncfusion Team June 21, 2017 09:18 AM UTC

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. 
 


Loader.
Up arrow icon