Autocomplete en grid

[Jessica]

Buenas tardes, podrían orientarme en algún ejemplo donde un grid contenga un autocompletado y el autocompletado este enlazado a una consulta de base de datos.

Gracias

[Seeni Sakthi Kumar Seeni Raj]

Hi Jessica,  

 

Thanks for contacting Syncfusion Support.  

 

Before proceeding with your query, please provide the following details.  

 

1. Where you would like to place the AutoComplete?
2. For the Editing columns like the following demo?

 

https://asp.syncfusion.com/demos/web/grid/edittemplate.aspx, it uses the inline editing with the EditTemplate feature of the Grid.  

 

3. Which type of edit mode, you would like to use?
4. In the other cases, filterbar template also uses the autocomplete, as shown in the demo, https://asp.syncfusion.com/demos/web/grid/defaultfiltering.aspx
5. If you are using foreignkey column for autocomplete, please mention it also

 

Regards,  

Seeni Sakthi Kumar S. 

[Jessica]

Gracias por responder, respondiendo a sus preguntas:

1.-El autocomplete seria en una de las columnas del grid y al estar en modo edición.

2.- Es casi lo mismo que deseo, solo que traiga las coincidencias desde la base de datos. 

3.- Edición batch.

4.- También podría ser como ese autocomplete, pero no quiero que me filtre el grid en si, si  no que me traiga una lista de coincidencias mientras vaya escribiendo y así podría añadir como quien dice una nueva fila.

En pocas palabras es como su control autocomplete que puede tener un origen de base de datos, solo que ese control este dentro de una columna en un grid.

Gracias por su ayuda y que tenga un lindo día. 

[Seeni Sakthi Kumar Seeni Raj]

Hi Jessica,  

 

Using EditTemplate property of column, we can render the AutoComplete to Grid columns while editing. Refer the below code example and sample, 

 

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

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

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

        <Columns> 

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

            <ej:Column Field="CustomerID"> 

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

            </ej:Column> 

                …………………….. 

        </Columns> 

    </ej:Grid> 

    <script type="text/javascript">        

        function create() { 

            return $("<input>"); 

        } 

 

        function write(args) { 

            var dataManger = ej.DataManager({ 

                url: "https://mvc.syncfusion.com/Services/Northwnd.svc/" 

            }); 

            var query = ej.Query().from("Suppliers").select("SupplierID", "ContactName"); 

            args.element.ejAutocomplete({ dataSource: dataManger, query: query, fields: { text: "ContactName", key: "SupplierID" }, width: "100%" }); 

        } 

 

        function read(args) { 

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

            return args.ejAutocomplete("getValue"); 

        } 

    </script> 

 

Refer the below link for sample, 

https://www.syncfusion.com/downloads/support/forum/139180/7z/SyncfusionASPNETApplication2231552345  

  

  

 

 

 

Regards, 

Seeni Sakthi Kumar S.