How to clean edit cell list and autocomplete with 2 values?

[César Alejandro Guerrero Nava]

Hi syncfusion workers, its a pleasure contact with you again.

The last time you solved my problem, thank you very much. But this time, I have two questions:

1.- I have a grid, in which only one column is edited (with the batch mode option). Then, when I write on the edited cell, appears a list with all the values than I use previously. Is there a form to prevent that that list shows?

2.- In the same field I am going to develop an autocomplete with the names of the articles in my inventory. The question is: Is there a form than when the autocomplete brings the names of the articles its shows the existence of the article in the same line. ?  Something like this:

Write: Filter:

Options:

Oil filter 5

Water filter 2

Air filter 1

Please, I need help. 

Thank you so much, have a nice weekend.

[Vignesh Natarajan]

Hi César, 

 

Thanks for contacting Syncfusion Support. 

 

Query#1:- I have a grid, in which only one column is edited (with the batch mode option). Then, when I write on the edited cell, appears a list with all the values than I use previously. Is there a form to prevent that that list shows? 

 

We have checked your query and we suspect that you need to prevent default pop-up while editing a cell. To prevent that list, we suggest you to use AutoComplete control in EditTemplate on the particular Field. From this you can avoid the previously searched values being displayed. By using EditTemplate property we can render any other control(Eg: textarea /colorpicker/dropdown/autocomplete/) in Grid column. 

 

Query#2:- In the same field I am going to develop an autocomplete with the names of the articles in my inventory. The question is: Is there a form than when the autocomplete brings the names of the articles its shows the existence of the article in the same line. ?   

 

If you want to filter the value with the existence of the article in the same line you can use filterType property of the autoComplete as “contains”. Please refer to the code example:- 

 

<ej:Grid ID="FlatGrid" runat="server" AllowPaging="true"> 

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

         <EditSettings AllowEditing="true" AllowAdding="true" AllowDeleting="true" EditMode="Batch"></EditSettings> 

      <ClientSideEvents ActionComplete="complete" /> 

        <Columns> 

            <ej:Column Field="OrderID" IsPrimaryKey="true" HeaderText="Order ID" /> 

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

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

                </ej:Column> 

        </Columns> 

    </ej:Grid> 

 

     <script type="text/javascript">        

        function create() { 

            return $("<input>"); 

        } 

 

        function write(args) { 

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

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

            args.element.ejAutocomplete({ width: "100%", dataSource: data, filterType: 'contains',enableDistinct: true, value: args.rowdata !== undefined ? args.rowdata["CustomerID"] : "" }); 

        } 

 

        function read(args) { 

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

            return args.ejAutocomplete("getValue"); 

        } 

    </script> 

     

 

 

For your convenience we have prepared a sample which can be downloaded from below link 

 

Sample:  http://www.syncfusion.com/downloads/support/directtrac/207150/ze/Sample_(3)-199529396.zip 

 

  

Please refer our UG documentation for your reference 

  

 

https://asp.syncfusion.com/demos/web/grid/edittemplate.aspx 

 

https://help.syncfusion.com/api/js/ejautocomplete#members:filtertype 

 

https://help.syncfusion.com/aspnet/grid/editing#cell-edit-template 

 

 

Please get back to us if you have further queries. 

 

 

Regards, 

Vignesh Natarajan