Autocomplete for editable cell

[Luca]

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...

[Ragavee U S]

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

[Luca]

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

[Kasithangam C]

Hi Luca,

Currently we don’t have the support to achieve this behavior “multiple 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

[Fatin Norsyazwani]

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 

[Pon Selva Jeganathan]

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