How to bind data on grid with autocomplete

[Alfonso]

Good day.

I need support with a case using their tools.

I have a problem to use Autocomplete through a Grid I already have the functional method but I do not know how to
make retrieve to the information and insert the data in the grid cell, I send the image and the html code as the code behind in C #
for your review.

Thank you very much for your support.

Attachment: GRIDC_5ce33500.7z

[Vignesh Natarajan]

Hi Alfonso,  

 

Greetings from Syncfusion support.  

 

Query: “I do not know how to make retrieve to the information and insert the data in the grid cell” 

 

From your query and code example, we understand that you need to bind the dataSource for autoComplete control while editing a record in Grid. We have achieved your requirement edit template and sent an ajax post to retrieve data from server and bind it to autoComplete. 

 

Refer the below code example 

 

  <ej:Grid ID="OrdersGrid" runat="server" AllowPaging="True"> 

        <Columns> 

            <ej:Column Field="OrderID" HeaderText="Order ID" IsPrimaryKey="true" TextAlign="Right" Width="90"> 

                <ValidationRule> 

                    <ej:KeyValue Key="required" Value="true" /> 

                    <ej:KeyValue Key="number" Value="true" /> 

                </ValidationRule> 

            </ej:Column> 

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

                <ValidationRule> 

                    <ej:KeyValue Key="required" Value="true" /> 

                </ValidationRule> 

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

            </ej:Column> 

            <ej:Column Field="EmployeeID" HeaderText="Employee ID" EditType="DropdownEdit" TextAlign="Right" Width="90" /> 

            <ej:Column Field="Freight" HeaderText="Freight" TextAlign="Right" Width="80" Format="{0:C}" EditType="NumericEdit"> 

                <NumericEditOptions DecimalPlaces="2"></NumericEditOptions> 

            </ej:Column> 

            <ej:Column Field="ShipName" HeaderText="ShipName" Width="150" /> 

            <ej:Column Field="ShipCountry" HeaderText="ShipCountry" Width="90" EditType="DropdownEdit" /> 

        </Columns> 

        <EditSettings AllowEditing="True" AllowAdding="True" AllowDeleting="True"></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'); 

            $.ajax( 

                { 

                    type: "POST", 

                    contentType: 'application/json; charset=utf-8', 

                    url: 'GridFeatures.aspx/GetContainer', 

                    data: "{'strcontainer':'" + args.value + "'}", 

                    dataType: 'json', 

                    success: function (data) { 

 

                        // get the element using its Grid ID + ColumnName 

                        $("#<%= OrdersGrid.ClientID %>CustomerID").ejAutocomplete({ width: "100%", dataSource: data.d, change: "enviar", enableDistinct: true, value: args.rowdata !== undefined ? args.rowdata["CustomerID"] : "" }); 

                    }, 

 

                }); 

 

        } 

 

        function read(args) { 

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

            return args.ejAutocomplete("getValue"); 

        } 

 

    </script> 

 

 

C# 

 

[WebMethod()] 

        public static object GetContainer(string strcontainer) 

        {             

            List<string> items = dt.AsEnumerable().Select(s => s.Field<string>("CustomerID")).ToList(); 

             

            return items; 

        } 

 

Note: in your code example you have bounded the dataSource in the change event. But we have modified the solution to retrieve the data from server and bound to autocomplete in write function of edit templates feature.     

 

Refer the below screenshot for the output 

 

 

 

Please get back to us if you have further queries. 

 

Regards, 

Vignesh Natarajan. 

[Alfonso]

Good day, an apology for the delay.


I must admit that I am new using this tool.


The detail was fixed, I just had to make some changes as they suggested, some lines I had to modify them because some objects did not work for me in my project and in the return for filling the field I had to change it for a different argument, it helped me a lot his answer since he did not know how the data is added in the autocomplete. Also the behind code leaves it the same.

And now i have a new problem, i want fill the other fields with data has retrieve, but i don´t know how do it

Thank you for your support.

Attachment: GRIDC_1f4b9168.7z

[Alfonso]

Good day, an apology for the delay.


I must admit that I am new using this tool.


The detail was fixed, I just had to make some changes as they suggested, some lines I had to modify them because some objects did not work for me in my project and in the return for filling the field I had to change it for a different argument, it helped me a lot his answer since he did not know how the data is added in the autocomplete. Also the behind code leaves it the same.

And now i have a new problem, i want fill the other fields with data has retrieve, but i don´t know how do it.

Thank you for your support.

Attachment: GRIDC_1c63442c.7z

[Farveen Sulthana Thameeztheen Basha]

Hi Alfonso, 

Query#:-  I want fill the other fields with data has retrieve, but i don´t know how do it. 

 

We have checked your query and we suspect that you need to bind the data for the other fields based on the selected value from autoComplete. In the previous update, we have retrieved the data from serverside and bind data to autoComplete column in Grid. We have achieved your requirement using select event of the autoComplete. In the select event of the Grid, we have closed the editForm using endEdit method of Grid, after that we have updated other fields using updateRecord method of the Grid by filtering records based on selected text from autoComplete. 

 

Note:- Also IsPrimaryKey property is necessary to perform Edit operations in the Grid. Please ensure that you have enabled in your sample. 

Refer to the code example:- 

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

      <Columns> 

            <ej:Column Field="OrderID" HeaderText=" Order ID" IsPrimaryKey="True" TextAlign="Right" Width="75"> 

            </ej:Column> 

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

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

            </ej:Column>  

                .   .    .  

            </Columns> 

  </ej:Grid> 

    <script type="text/javascript">  

        var primarykey; 

        function create() {  

            return $("<input>");  

        }  

        function write(args) {  

             primarykey = args.rowdata.OrderID; 

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

            $.ajax(  

                {  

                    type: "POST",  

                    contentType: 'application/json; charset=utf-8',  

                    url: 'Default.aspx/GetContainer',  

                    data: "{'strcontainer':'" + args.value + "'}",  

                    dataType: 'json',  

                    success: function (data) {  

                        $("#<%= OrdersGrid.ClientID %>CustomerID").ejAutocomplete({ width: "100%", dataSource: data.d, select: "enviar", enableDistinct: true, value: args.rowdata !== undefined ? args.rowdata["CustomerID"] : "" });  

                    },  

  

                });  

  

        }  

  

        function read(args) {  

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

            return args.ejAutocomplete("getValue");  

        }  

 

        function enviar(args) { 

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

            obj.endEdit();                                                  //close the EditForm using endEdit method 

            var data = obj.model.dataSource.filter(x => x.CustomerID == args.text)[0];  //filter records based on the selected Text from autocomplete 

            obj.updateRecord("OrderID", { OrderID: primarykey, CustomerID: args.text, EmployeeID: data.EmployeeID, ShipCity: data.ShipCity });  //update other fields through updateRecord method 

             

        } 

   </script>  

API Link:- https://help.syncfusion.com/api/js/ejgrid#methods:updaterecord 

https://help.syncfusion.com/api/js/ejgrid#methods:endedit 

 https://help.syncfusion.com/api/js/ejautocomplete#events:select 

If your requirement is different from above solution, please get back to us with further details. 

Regards, 

Farveen sulthana T