Autocomplete is not working inside a grid

[Sandeep]

Grid is bound with 5 columns and one of the column is Country and I want when I edit a column, country coulmn will be populated as a autocomplete text box so that I can type and choose the corresponding country.

Please help! below is the code

<ej:Grid ID="OrdersGrid" runat="server" AllowPaging="True" OnServerEditRow="EditEvents_ServerEditRow"

            OnServerAddRow="EditEvents_ServerAddRow" OnServerDeleteRow="EditEvents_ServerDeleteRow">

            <ClientSideEvents ActionComplete="complete" EndAdd="endAdd" EndDelete="endDelete"

                EndEdit="endEdit" />

            <Columns>

                <ej:Column Field="Currency_Id" HeaderText="Currency ID" TextAlign="Right" Visible="false"

                    Width="90">

                    <ValidationRule>

                        <ej:KeyValue Key="number" Value="true" />

                    </ValidationRule>

                </ej:Column>

                <ej:Column Field="Code" HeaderText="Code" Width="110" IsPrimaryKey="true">

                    <ValidationRule>

                        <ej:KeyValue Key="required" Value="true" />

                    </ValidationRule>

                </ej:Column>

                <ej:Column Field="Description" HeaderText="Description" Width="90">

                    <ValidationRule>

                        <ej:KeyValue Key="required" Value="true" />

                    </ValidationRule>

                </ej:Column>

                <ej:Column Field="Country_Id" HeaderText="Country ID" TextAlign="Right" Visible="false"

                    Width="90">

                    <ValidationRule>

                        <ej:KeyValue Key="number" Value="true" />

                    </ValidationRule>

                </ej:Column>

                <ej:Column Field="Countryname" HeaderText="Country Name" Width="90">

                    <EditTemplate Create="create" Read="read" Write="write" />

                    <ValidationRule>

                        <ej:KeyValue Key="required" Value="true" />

                    </ValidationRule>

                </ej:Column>

                <ej:Column Field="Unit_Name" HeaderText="Unit Name" Width="90">

                </ej:Column>

                <ej:Column Field="Decimal_Name" HeaderText="Decimal Name" Width="90">

                </ej:Column>

                <ej:Column Field="Unit_Sign_Char" HeaderText="Unit Sign" Width="90">

                </ej:Column>

                <ej:Column Field="Decimal_Sign_Char" HeaderText="Decimal Sign" Width="90">

                </ej:Column>

                <ej:Column Field="IsDeleted" HeaderText="Active" Width="80" EditType="Boolean">

                </ej:Column>

            </Columns>

            <EditSettings AllowEditing="True" AllowAdding="True" AllowDeleting="True" EditMode="InlineForm"

                ShowDeleteConfirmDialog="true"></EditSettings>

            <ToolbarSettings ShowToolbar="True" ToolbarItems="add,edit,delete,update,cancel,search">

            </ToolbarSettings>

        </ej:Grid>

<script type="text/javascript">

        function create() {

            return $("<input>");

        }

        function write(args) {

           // alert($('#' + String(args.element.attr('id'))).val());

            obj = $('#<%= OrdersGrid.ClientID %>').ejGrid('instance');

            var proxy = obj._id; //grid id

            // var sparam = 

            //render autocomplete control

            args.element.ejAutocomplete({

                width: "100%",

                dataSource: obj.model.columns[5].dataSource,  //bind datasource

                showPopupButton: true,

                highlightSearch: true,

                enableDistinct: true,

                fields: { text: "CountryName", key: "Country_Id" },

                watermarkText: "Select a country",

                filterType: 'contains',

                select: function (args) {

                    //select event in autocomplete  

                    $.ajax({

                        url: "CurrencyMaster.aspx/BindCountry",

                        type: "POST",

                        contentType: "application/json; charset=utf-8",

                        data: "{'id': '" + args.value + "'}",

                        dataType: "json",

                        success: function (data) {

                            alert('here');

                            $('#' + proxy + 'Country_Id').val(data.d);  //binding value to text box

                        },

                        error: function (XMLHttpRequest, textStatus, errorThrown) {

                            var error = $.parseJSON(XMLHttpRequest.responseText);

                            if (error.Message == 'Authentication failed.') {

                                //  window.location.reload();

                                return false;

                            }

                            else {

                                alert(errorThrown);

                            }

                        }

                    });

                },

                value: args.rowdata !== undefined ? args.rowdata["Countryname"] : ""

            });

        }

        function read(args) {

            args.ejAutocomplete('suggestionList').css('display', 'none');

            return args.ejAutocomplete("getValue");

        }

        $(function () {

            $('#<%= OrdersGrid.ClientID %>').keyup(function (e) {

                if (e.keyCode == 40 && $(e.target).hasClass("e-autocomplete")) {

                    var gridid = $('#<%= OrdersGrid.ClientID %>').attr("id");

                    var autocomp = $("#" + gridid + "Countryname").ejAutocomplete("instance")

                    if (autocomp._getActiveText() != "No suggestions")

                        $(e.target).val(autocomp._getActiveText());

                }

            });

        });

    </script>

Please help where did I mistake!

Regards,

Sandeep

[Venkatesh Ayothi Raman]

Hi Sandeep,

Thanks for contacting Syncfusion support.

We have analyzed your code example and found that you are using select event of ejAutoComplete control to perform external request. For which purpose you are need to use that event in ejAutocomplete control. Please provide more details about that and also could you please share us the actual problem you faced while using Edit template feature.

We have created a sample for your reference. Refer to the sample and code example,

Code Example:

<ej:Grid ID="Grid1"    AllowPaging="True"

              Locale="en-US" 

               runat="server">

            <Columns>

                <ej:Column Field="OrderID" HeaderText="Order ID" IsPrimaryKey="true"    TextAlign="Right" Width="90" />

                <ej:Column Field="CustomerID" HeaderText="Customer ID"   Width="100">

                    <EditTemplate Create="create" Read="read" Write="write" />

                    </ej:Column>

                <ej:Column Field="EmployeeID" HeaderText="Employee ID" HeaderTemplateID="#employeeTemplate" TextAlign="Right" Width="110"  />

                <ej:Column Field="Freight" HeaderText="Freight"  TextAlign="Right" Width="90" Format="{0:C}" />

                <ej:Column Field="OrderDate" HeaderText="Order Date" Width="100" HeaderTemplateID="#dateTemplate" TextAlign="Right" Format="{0:MM/dd/yyyy}" />

                <ej:Column Field="ShipCity" HeaderText="Ship City" Width="100" />

            </Columns>

             <PageSettings PageSize="15" />

              <EditSettings AllowEditing="True" AllowAdding="True" AllowDeleting="True"></EditSettings>

                    <ToolbarSettings ShowToolbar="True" ToolbarItems="add,edit,delete,update,cancel"></ToolbarSettings>

            <SelectionSettings EnableToggle="true" />

        </ej:Grid>

<Script section>

<Create>

function create() {

            return $("<input style='text-transform: uppercase'>");

        }

<WRITE>

        function write(args) {

            obj = $('#MainContent_Grid1').ejGrid('instance');

            var data = ej.DataManager(obj.model.dataSource).executeLocal(new ej.Query().select("CustomerID"));

            args.element.ejAutocomplete({

                width: "100%",

               dataSource: data,

               enableDistinct: true,

               value: args.rowdata !== undefined ? args.rowdata["CustomerID"] : "",

            });

        }

<READ>

        function read(args) {

           

          args.ejAutocomplete('suggestionList').css('display', 'none');

            return args.ejAutocomplete("getValue");

        }

        $("#MainContent_Grid1").keyup(function (e) {

            if (e.keyCode == 40 && $(e.target).hasClass("e-autocomplete")) {

               

var autocomp = $("#MainContent_Grid1CustomerID").ejAutocomplete("instance")

                if (autocomp._getActiveText() != "No suggestions")

                    $(e.target).val(autocomp._getActiveText());

            }

        });

Sample: http://www.syncfusion.com/downloads/support/directtrac/general/7z/AutocompleteEditTemplateASP1645222289



Regards,
Venkatesh Ayothiraman.