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. Image for the cookie policy date

Autocomplete for editable cell

Hi,

I'm using Syncfusion ASPNET grid control. Is it possible to use ej:Autocomplete  in a  cell while in edit mode ? I have search in the forum and in KB, but without success.

asp:Content ContentPlaceHolderID="topContainer" runat="server">
    <script src="/Scripts/Ej/jquery-1.10.2.min.js" type="text/javascript"></script>
    <script src="/Scripts/Ej/jquery.easing.1.3.min.js" type="text/javascript"></script>
    <script src="/Scripts/Ej/jquery.globalize.min.js" type="text/javascript"></script>
    <script src="/Scripts/Ej/jsrender.min.js" type="text/javascript"></script>
    <script src="/Scripts/Ej/ej.web.all.min.js" type="text/javascript"></script>
    <script src="/Scripts/Ej/ej.webform.min.js" type="text/javascript"></script>
</asp:Content>
<asp:Content runat="server" ContentPlaceHolderID="mainContainer">
    <ej:Grid ID="EjGrid" runat='server' AllowPaging="True" AllowGrouping="true" AllowResizing="true" AllowMultiSorting="true" AllowFiltering="true">
        <DataManager URL="Test.aspx/BatchData" BatchURL="Test.aspx/BatchUpdate" Adaptor="WebMethodAdaptor"/>
        <PageSettings PageSize="20" />
        <Columns>
            <ej:Column Field="IDLotto" HeaderText="Lotto" IsPrimaryKey="True" TextAlign="Right" Width="75" />
            <ej:Column Field="IDCommessa" HeaderText="IdCommessa" Width="80" />
            <ej:Column Field="QtaIniziale" HeaderText="QtaIniz" TextAlign="Right" Width="75" EditType="Numeric"/>
            <ej:Column Field="QtaResidua" HeaderText="QtaLeft" TextAlign="Right" Width="75" EditType="Numeric"/>
            <ej:Column Field="Peso" HeaderText="Peso" TextAlign="Right" Width="75" EditType="Numeric"/>
            <ej:Column Field="Carica" HeaderText="Carica" Width="110" />
            <ej:Column Field="CodCDL" HeaderText="CDL" Width="110" />
            <ej:Column Field="DescLavorazione" HeaderText="Lavorazione" Width="110" />
            <ej:Column Field="CodAnagrafica" HeaderText="CodiceA" Width="110" />
        </Columns>
        <EditSettings AllowEditing="True" AllowAdding="True" AllowDeleting="True" EditMode="Batch"></EditSettings>
        <FilterSettings FilterType="Menu"></FilterSettings>
        <ToolbarSettings ShowToolbar="True" ToolbarItems="add,edit,delete,update,cancel"></ToolbarSettings>
    </ej:Grid>
</asp:Content>
<asp:Content runat="server" ContentPlaceHolderID="footerContainer">
</asp:Content>

It's also possible configure multicolumns in autocomplete control, Like ComboBox in Asp.Net Classic ?

Thank's in advance.

P.S. Sorry for my bad English...


5 Replies

RU Ragavee U S Syncfusion Team July 17, 2015 08:38 AM UTC

Hi Luca,

Thanks for your interest in Syncfusion products.

We have analyzed your requirement to use ejAutoComplete control in a column upon editing. Using EditTemplate property of the grid, we can achieve your requirement.

Please refer the below Online Sample Link for more information on EditTemplate.

Online Sample Link: http://asp.syncfusion.com/demos/web/grid/edittemplate.aspx

In the above sample, we have converted the CustomerID column to AutoComplete Control upon editing using the EditTemplate property of the grid.

Please refer the below online documentation link for more information on the EditTemplate property.

Documentation Link: http://help.syncfusion.com/ug/aspnet/index.html#!Documents/edittemplate.htm

Query: It's also possible configure multicolumns in autocomplete control, Like ComboBox in Asp.Net Classic ?

Could you please tell us if your requirement is to display multiple columns in the AutoComplete popup dialog similar to that of Multi-DropDownCombobox in ASP.NET Classic? Or if you are expecting to select multiple values from the popup dialog. Please share more and clear information on your requirement which will be helpful for us to assist you accordingly.

Please get back to us if you need any further assistance.

Regards,
Ragavee U S


LU Luca July 17, 2015 12:52 PM UTC

Hi Ragavee,

I see online example and it's ok for me project.

Sorry for my ambiguous question: My requirement is to display multiple columns in the AutoComplete popup dialog similar to that of Multi-DropDownCombobox in ASP.NET.
I need to show the cell with autocomplete the customer id, customer name, address and other specific information.

Thanks in advance for your help.

Regards,

Luca








KC Kasithangam C Syncfusion Team July 21, 2015 12:30 PM UTC

Hi Luca,

Currently we don’t have the support to achieve this behaviormultiple columns in the AutoComplete, and we have logged your requirement as a feature request in our database. A support incident to track the status of this issue has been created under your account. Please log on to our support website to check for further updates.

https://www.syncfusion.com/account/login?ReturnUrl=%2fsupport%2fdirecttrac%2fincidents 

Please let us know if you have further concern.


Regards,
Kasithangam



FN Fatin Norsyazwani replied to Kasithangam C August 11, 2022 02:24 AM UTC

Hi, is it in latest version already support for behavior multicolumn in the Autocomplete inside the grid? If yes, could you please provide me the sample? Thank 



PS Pon Selva Jeganathan Syncfusion Team August 12, 2022 04:42 PM UTC

Hi  Fatin,


Query: is it in latest version already support for behavior multicolumn in the Autocomplete inside the grid? If yes, could you please provide me the sample? Thank 


Yes, You can use the multicolumn in the autocomplete inside the grid. We achieved your query by using the Edit Template feature of the grid.


Please refer to the below code example,


<ej:Grid ID="OrdersGrid" runat="server" AllowPaging="true" AllowSelection="true" AllowFiltering ="true">

       

            <ej:Column Field="CustomerID" HeaderText="Customer Name" Width="80" >

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

                 </ej:Column>

..

        </Columns>

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

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

    </ej:Grid>

    <script type="text/javascript">      

        function create() {

            return $("<input>");

        }

 

        function write(args) {

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

            var dataManger = ej.DataManager({

                /* OData service */

                url: http://mvc.syncfusion.com/Services/Northwnd.svc/

            });

            /* Create Query */

            var query = ej.Query().from("Orders").select("OrderID", "CustomerID", "EmployeeID");

 

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

            args.element.ejAutocomplete({

                width: "100%", dataSource: data, query: query, multiColumnSettings: {

                    enable: true,

                    showHeader: true,

                    stringFormat: "{0}",

                    searchColumnIndices: [0, 1],

                    columns: [

                        { "field": "CustomerID", "headerText": "CustomerID" },

                        { "field": "EmployeeID", "headerText": "EmployeeID" },

                       

]

                                },

              

                fields: { key: "OrderID", text: "CustomerID" }, enableDistinct: true, value: args.rowdata !== undefined ? args.rowdata["CustomerID"] : ""

            });

        }

 

        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 + "CustomerID").ejAutocomplete("instance")

                    if (autocomp.getValue() != "" && autocomp.getActiveText() != "No suggestions")

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

                }

            });

        });

    </script>


Please refer to the below sample,

https://www.syncfusion.com/downloads/support/directtrac/general/ze/Autocomplete2060991145

Please refer to the below screenshot,



Please refer the below demo,
http://asp.syncfusion.com/demos/web/grid/edittemplate.aspx

Please refer the below help documentation,
http://help.syncfusion.com/ug/aspnet/index.html#!Documents/edittemplate.htm


Kindly get back to us for further assistance.


Regards,  

Pon selva   



Loader.
Up arrow icon