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. (Last updated on : Nov 16th 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Autocomplete is not working inside a grid

Thread ID:

Created:

Updated:

Platform:

Replies:

123723 Apr 14,2016 10:55 AM UTC Apr 15,2016 11:55 AM UTC ASP.NET Web Forms 1
loading
Tags: Grid
Sandeep
Asked On April 14, 2016 10:55 AM UTC

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 [Syncfusion]
Replied On April 15, 2016 11:55 AM UTC

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.

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.

Warning Icon 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.Close Icon

;