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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to bind data on grid with autocomplete

Thread ID:

Created:

Updated:

Platform:

Replies:

143821 Apr 5,2019 11:55 PM UTC Apr 12,2019 12:16 PM UTC ASP.NET Web Forms 4
loading
Tags: Grid
Alfonso
Asked On April 5, 2019 11:55 PM UTC

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 [Syncfusion]
Replied On April 8, 2019 11:30 AM UTC

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
Replied On April 11, 2019 11:59 PM UTC

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
Replied On April 12, 2019 12:06 AM UTC

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 [Syncfusion]
Replied On April 12, 2019 12:16 PM UTC

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>  


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

Regards, 
Farveen sulthana T 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon