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.
Unfortunately, activation email could not send to your email. Please try again.

Dialog editing - Autocomplete

Thread ID:

Created:

Updated:

Platform:

Replies:

126043 Sep 20,2016 08:53 AM Sep 29,2016 03:23 AM ASP.NET Web Forms 13
loading
Tags: Grid
Pratheep
Asked On September 20, 2016 08:53 AM

Hi

Can make it dialog template  auto complete country ( bind code and text)  and   add / edit event get code behind  country code and text 

 

        private void bindcountry()

        {

            List<Countries> c = new List<Countries>();

            c.Add(new Countries { text = "Austria", ID = "100001" });

            c.Add(new Countries { text = "Australia", ID = "20002" });

            c.Add(new Countries { text = "Bangladesh", ID = "300003" });


            this.ShipCountry.DataSource = c;

            ShipCountry.DataTextField = "text";

            ShipCountry.DataUniqueKeyField = "ID";

            ShipCountry.DataBind();

      }

 


        [Serializable]

        class Countries    {

            public string text;

            public string ID;

        }



//   here get it country code and text 

   protected void EditEvents_ServerEditRow(object sender, GridEventArgs e)

        {

            EditAction(e.EventType, e.Arguments["data"]);

        }

 //   here get it country code and text 

        protected void EditEvents_ServerAddRow(object sender, GridEventArgs e)

        {

            EditAction(e.EventType, e.Arguments["data"]);

        }

 





Grid Template 

<ej:Autocomplete ID="ShipCountry" runat="server" Width="100%" WatermarkText="Select a country"></ej:Autocomplete>

Pratheep



Attachment: GridDialog_70e8e6b6.rar

Mani Sankar Durai [Syncfusion]
Replied On September 21, 2016 02:05 PM

Hi Pratheep, 

Thanks for contacting Syncfusion support. 

We have analyzed your query and found that you have render the Autocomplete control inside the dialog template. We cannot able to render the autocomplete control inside the template. So we can’t able to get the data. 
For you convenience we have passed the data to the autocomplete textbox as a suggestion using actionComplete event in grid. 

Please refer the below code example, 
   <ej:Grid ID="OrdersGrid" runat="server" AllowPaging="True" OnServerEditRow="EditEvents_ServerEditRow" OnServerAddRow="EditEvents_ServerAddRow" 
                    OnServerDeleteRow="EditEvents_ServerDeleteRow"> 
                    <ClientSideEvents ActionComplete="complete" EndAdd="endAdd" EndDelete="endDelete" EndEdit="endEdit" /> 
                     
 
                </ej:Grid> 
            </ContentTemplate> 
        </asp:UpdatePanel> 
    </div> 
 
         <script type="text/template" id="template"> 
        <b>Order Details</b> 
        <table cellspacing="10"> 
            <tr> 
              
                <td style="text-align: right;">ShipCountry 
                </td> 
                <td style="text-align: left"> 
                  <input id="ShipCountry1" name="ShipCountry" class="e-field e-ejinputtext valid" 
                        style="width: 116px; height: 28px" value="{{:ShipCountry}}" /> 
                   </td> 
            </tr> 
 
        </table> 
    </script> 
 
 
<script type="text/javascript"> 
 
        function complete(args) { 
                       
            if ((args.requestType == "beginedit" || args.requestType == "add") && args.model.editSettings.editMode == "dialogtemplate") { 
                 
                var obj = $(".e-grid").ejGrid("instance"); 
                var data = ej.DataManager(obj.model.dataSource).executeLocal(new ej.Query().select("ShipCountry")); 
                $("#ShipCountry1").ejAutocomplete({ width: "100%", dataSource: data, enableDistinct: true}); 
                 
            } 
       } 
    </script> 
 
 
 

In the above code example we have render the autocomplete control in the actionComplete event of grid and passed the particular data to the control. From there we can able to get the value in the server side events when editing. 

We have also modified a sample that can be downloaded from the below link, 



Please let us know if you need further assistance, 

Regards, 
Manisankar Durai. 


Pratheep
Replied On September 21, 2016 11:29 PM

Hi

Thank you for your support. it's working fine but  your code  country text (Australia) only get  server side event (add/edit)

It's possible get text (Australia) and code (20002)  server side event (add/edit) ?

Thanks

Pratheep
 

Jayaprakash Kamaraj [Syncfusion]
Replied On September 22, 2016 01:00 PM

Hi Pratheep, 

We have achieved your requirement using ASP.Net HiddenField and select event of ejAutocomplete. In select event, we are able to get selected item details(code and text). In this event we need to bind selected item details(code and text) in HiddenField value and then we can  get code and text in server side event add/edit using below code example, 

<asp:HiddenField runat="server" ID="autoComp" ClientIDMode="Static" /> 
…… 
      <script type="text/javascript"> 
 
 
        function complete(args) { 
            if (args.requestType == "refresh" || args.requestType == "save") { 
                $('#<%= OrdersGrid.ClientID %>').ejWaitingPopup("hide"); 
            } 
            
            if ((args.requestType == "beginedit" || args.requestType == "add") && args.model.editSettings.editMode == "dialogtemplate") { 
.. 
                data1 = [ 
              { ID: "100001", text: "Germany" }, { ID: "20002", text: "Australia" }, { ID: "300003", text: "Bangladesh" }, 
                ]; 
                var obj = $(".e-grid").ejGrid("instance"); 
             
                $("#ShipCountry1").ejAutocomplete({ 
                    width: "100%", dataSource: data1, 
 
                    select: function (argument) { 
                        $("#autoComp").val(JSON.stringify(argument.item)); 
                    }, 
 
                    enableDistinct: true 
                }); 
                 
            } 
       } 
….. 
 
  protected void EditEvents_ServerEditRow(object sender, GridEventArgs e) 
        { 
            var item = this.autoComp.Value; 
            JavaScriptSerializer mySerialiser = new JavaScriptSerializer(); 
            var selectedrow = mySerialiser.Deserialize<object>(item); // here you will get records 
 
            EditAction(e.EventType, e.Arguments["data"]); 
        } 



Regards, 

Jayaprakash K. 


Pratheep
Replied On September 22, 2016 01:14 PM

Hi

Thank you for your support.

  data1 = [ 
              { ID: "100001", text: "Germany" }, { ID: "20002", text: "Australia" }, { ID: "300003", text: "Bangladesh" }, 
                ];

I want to binds ID's and text's from from database(code behind)..it's possible?

Thanks

Pratheep


Jayaprakash Kamaraj [Syncfusion]
Replied On September 23, 2016 08:19 AM

  

Hi Pratheep, 

The ejAutocomplete is rendered using JavaScript, we cannot assign the Data( server-side) directly to client-side. So we have retrieved the data in the code behind using the AutoComplete defined at the view page and bound to the ejAutocomplete.  Please refer to the below code example and sample. 
 
public IEnumerable AutoDataSource; 
        private List<Orders> order = new List<Orders>(); 
   
        private void bindcountry() 
        { 
 
 
            List<Countries> c = new List<Countries>(); 
            c.Add(new Countries { text = "Austria", ID = "100001" }); 
            c.Add(new Countries { text = "Australia", ID = "20002" }); 
            c.Add(new Countries { text = "Bangladesh", ID = "300003" }); 
 
            this.AutoDataSource = c; 
.. 
             
        } 
 
………………………. 
 
function complete(args) { 
            if ((args.requestType == "beginedit" || args.requestType == "add") && args.model.editSettings.editMode == "dialogtemplate") { 
.. 
                var data1 = JSON.parse('<%= new System.Web.Script.Serialization.JavaScriptSerializer().Serialize(this.AutoDataSource)%>'); 
                $("#ShipCountry1").ejAutocomplete({ 
                    width: "100%", dataSource: data1, 
 
                    select: function (argument) { 
                        $("#autoComp").val(JSON.stringify(argument.item)); 
                    }, 
 
                    enableDistinct: true 
                }); 
                 
            } 


Regards, 

Jayaprakash K. 


Pratheep
Replied On September 24, 2016 12:40 AM

Hi

Thank you for your support. I'm using Version - 14.2450.0.28 

ejAutocomplete not bind country text and code



 if ((args.requestType == "beginedit" || args.requestType == "add") && args.model.editSettings.editMode == "dialogtemplate") {

             

              

                var data1 = JSON.parse('<%= new System.Web.Script.Serialization.JavaScriptSerializer().Serialize(this.AutoDataSource)%>');

                $("#ShipCountry1").ejAutocomplete({

                    width: "100%", dataSource: data1,

 

                    select: function (argument) {

                        $("#autoComp").val(JSON.stringify(argument.item));

                    },

 

                    enableDistinct: true

                });

 

 

            }


code behind   country text and code is empty 


            var item = this.autoComp.Value;

            JavaScriptSerializer mySerialiser = new JavaScriptSerializer();

            var data = mySerialiser.Deserialize<object>(item);


Thanks

Pratheep




Attachment: Autocomplete_a7a685c4.rar

Mani Sankar Durai [Syncfusion]
Replied On September 26, 2016 08:12 AM

Hi Pratheep, 


We are sorry but the issue is not reproducible at our end. In the previously attached sample we have created one IEnumerable named as “AutoDataSource” in code behind and assigned the list of data for the autocomplete to that AutoDataSource. We have retrieved that data at client side and bound the data for the autocomplete. So please ensure whether the data are passed to the AutoDataSource so that we can bind the data to the autocomplete. 

Please refer the below code example, 

[WebForm2.aspx.cs] 
public partial class WebForm2 : System.Web.UI.Page 
    { 
 
        public IEnumerable AutoDataSource;  
 
  private void bindcountry() 
        { 
 
            this.AutoDataSource = c;  
             

Also please find the screenshot below, 


Screenshot 1: We are getting the data from server side to client side in actionComplete event to render the data for the autocomplete 
 
 


Screenshot 2:  When selecting the text in autocomplete as “Australia” we are passing the selected data with code “20002” to the server side events using Select event of autocomplete 

 


Screenshot 3: The selected data with country text and code passed from the client side to server side can able to retrieve in EditEvents_ServerEditRow method in code behind. 

 


If you still face the issue please get back to us with the following details, 
 
1.       Send the screenshot/video demo of the issue that you face when passing the data to the autocomplete. 
2.       Is that AutoDataSource from codebehind contains the list of data for the Autocomplete. 
 
The provided information will help us to analyze the issue and provide you the response as early as possible. 
 

We have prepared a sample on 14.2.0.28 that can be downloaded from the below link, 

Regards, 
Manisankar Durai. 


Pratheep
Replied On September 26, 2016 09:36 AM

Hi Manisankar

your screenshot 1 showing code  

var data1 = Json.parse[
              { ID: "100001", text: "Germany" }, { ID: "20002", text: "Australia" }, { ID: "300003", text: "Bangladesh" },
                ];



Can I Load  list of country load from database ( user to user different country list that's why need to  load from database) ?



 

        private void bindcountry()

        {

 

 

            List<Countries> c = new List<Countries>();

            c.Add(new Countries { text = "Austria", ID = "100001" });

            c.Add(new Countries { text = "Australia", ID = "20002" });

            c.Add(new Countries { text = "Bangladesh", ID = "300003" });

 

            this.AutoDataSource = c;

            this.ShipCountry.DataSource = c;

            ShipCountry.DataTextField = "text";

            ShipCountry.DataUniqueKeyField = "ID";

            ShipCountry.DataBind();

           

 

 

        }

 

 

                var data1 = JSON.parse('<%= new System.Web.Script.Serialization.JavaScriptSerializer().Serialize(this.AutoDataSource)%>');

                $("#ShipCountry1").ejAutocomplete({

                    width: "100%", dataSource: data1,

 

                    select: function (argument) {

                        $("#autoComp").val(JSON.stringify(argument.item));

                    },

 

                    enableDistinct: true

                });

 

 

 

 


        protected void EditEvents_ServerEditRow(object sender, GridEventArgs e)

        {

            var item = this.autoComp.Value;

            JavaScriptSerializer mySerialiser = new JavaScriptSerializer();

            var data = mySerialiser.Deserialize<object>(item);    // here I'm getting empty records


 

      

            EditAction(e.EventType, e.Arguments["data"]);

        }


Thanks
Pratheep


Attachment: Screenshot_5b77da16.rar

Mani Sankar Durai [Syncfusion]
Replied On September 27, 2016 08:58 AM

Hi Pratheep, 

We have checked your screen shot and we suspect that you have searched the data that are not in the list of data passed to the autocomplete dataSource. So you can’t get the text and ID in the server side events. Based on your requirement we have passed the list of data from the database to client side by passing the data to IEnumerable type “AutoDataSource” in code behind and retrieved those data and bound to the Autocomplete dataSource in client side 

Please refer the below code example, 
[Default.aspx.cs
 
namespace Sample 
{ 
    public partial class Default : System.Web.UI.Page 
    { 
        public IEnumerable AutoDataSource; 
        IEnumerable a = new NorthwndDataContext().Orders.ToList(); 
        private List<Orders> order = new List<Orders>(); 
 
private void bindcountry() 
        { 
 
            this.AutoDataSource = a; 
 
         } 
     } 
} 
 
[Default.aspx] 
 
<form id="form1" runat="server"> 
     
     <asp:HiddenField runat="server" ID="autoComp" ClientIDMode="Static" /> 
 
 
function complete(args) { 
 
  var data1 = JSON.parse('<%= new System.Web.Script.Serialization.JavaScriptSerializer().Serialize(this.AutoDataSource)%>'); 
                 var data = ej.DataManager(data1).executeLocal(new ej.Query().select("OrderID", "ShipCountry")); 
                $("#ShipCountry1").ejAutocomplete({ 
                    width: "100%", 
                    dataSource: data, 
                    fields: { text: "ShipCountry", key: "OrderID" }, 
                    select: function (argument) { 
                        $("#autoComp").val(JSON.stringify(argument.item)); 
                    }, 
 
 
                    enableDistinct: true 
                }); 
} 


From the above code example, in client side we have get the list of data from server side in the variable data1. From the list of data we have retrieved the OrderID (ID) and ShipCountry (text) data alone using ej.Query and passed those data to the autocomplete dataSource. To get the suggestion items in the Autocomplete textbox we have used fields which is the property of Autocomplete to define the specific text (ShipCountry) and ID (OrderID).When saving the data both text and ID will be retrieved in the server side events. 
Please refer the below screenshot, 
 

We have also prepared a sample that can be downloaded from the below link, 

Please let us know if you need further assistance. 

Regards, 
Manisankar Durai. 

  


Pratheep
Replied On September 27, 2016 09:38 PM


Hi Manisankar

Thank you for your support . still I'm getting empty records in server side .don't know where i made mistake


//Code behind

 

public IEnumerable AutoDataSource;

 

  // List of countries

  private void bindcountry()

        {

 

            List<Countries> c = new List<Countries>();

            c.Add(new Countries { text = "Austria", ID = "100001" });

            c.Add(new Countries { text = "Australia", ID = "20002" });

            c.Add(new Countries { text = "Bangladesh", ID = "300003" });

 

            this.AutoDataSource = c;    //list to autodatasource

 

            this.ShipCountry.DataSource = c;

            ShipCountry.DataTextField = "text";

            ShipCountry.DataUniqueKeyField = "ID";

            ShipCountry.DataBind();

           

        }

 

 protected void EditEvents_ServerEditRow(object sender, GridEventArgs e)

        {

            var item = this.autoComp.Value;

            JavaScriptSerializer mySerialiser = new JavaScriptSerializer();

            var data = mySerialiser.Deserialize<object>(item); // empty records

 

            EditAction(e.EventType, e.Arguments["data"]);

        }

 

 

// WebForm2.aspx  -design view

 

<asp:HiddenField runat="server" ID="autoComp" ClientIDMode="Static" />

 


<script type="text/template" id="template">

<input id="ShipCountry1" name="ShipCountry" class="e-field e-ejinputtext valid"

                        style="width: 116px; height: 28px" value="{{:ShipCountry}}" />

    </script>




  if ((args.requestType == "beginedit" || args.requestType == "add") && args.model.editSettings.editMode == "dialogtemplate") {

 

                var data1 = JSON.parse('<%= new System.Web.Script.Serialization.JavaScriptSerializer().Serialize(this.AutoDataSource)%>');

                var data = ej.DataManager(data1).executeLocal(new ej.Query().select("ID", "text"));

 

                $("#ShipCountry1").ejAutocomplete({

                    width: "100%",

                    dataSource: data,

                    fields: { text: "text", key: "ID" },

                    select: function (argument) {

                        $("#autoComp").val(JSON.stringify(argument.item));

                      

                    },

                    enableDistinct: true

                });

 

 

            }


Thanks

Pratheep



Attachment: WebApplication1_efd3892e.rar

Mani Sankar Durai [Syncfusion]
Replied On September 28, 2016 09:23 AM

Hi Pratheep, 

We have checked your sample and we are not able to reproduce the reported issue.  
The autocomplete dataSource that contains only the following data, 
var data1 = JSON.parse('[{"text":"Austria","ID":"100001"},{"text":"Australia","ID":"20002"},{"text":"Bangladesh","ID":"300003"}]'); 
  
Those data only passed from the code behind to client side for the autocomplete suggestion list. 
Please refer the below table, 
[WebForm2.aspx.cs] 
… 
public IEnumerable AutoDataSource; 
 
protected void Page_Load(object sender, EventArgs e) 
        { 
            BindDataSource(); 
            bindcountry(); 
            Session["DialogDataSource"] = order; 
        } 
  private void bindcountry() 
        { 
            List<Countries> c = new List<Countries>(); 
            c.Add(new Countries { text = "Austria", ID = "100001" }); 
            c.Add(new Countries { text = "Australia", ID = "20002" }); 
            c.Add(new Countries { text = "Bangladesh", ID = "300003" }); 
 
            this.AutoDataSource = c; 
            this.ShipCountry.DataSource = c; 
            ShipCountry.DataTextField = "text"; 
            ShipCountry.DataUniqueKeyField = "ID"; 
            ShipCountry.DataBind(); 
             
 
 
        } 

In the above code example we have passed only those data which are in the list Country and passed to this.AutoDataSource. So when we search for Australia, Austria or Bangladesh in ShipCountry column you can get both text and ID to the server side events. 

 
<asp:HiddenField runat="server" ID="autoComp" ClientIDMode="Static" /> 
 
function complete(args) { 
$("#ShipCountry1").ejAutocomplete({ 
                    width: "100%", 
                    dataSource: data, 
                    fields: { text: "text", key: "ID" }, 
                    select: function (argument) { 
                        $("#autoComp").val(JSON.stringify(argument.item)); 
                        
                    }, 
                    enableDistinct: true 
                }); 

And in the server side events we are getting the selected data in autocomplete by using this.autoComp.Value 
Please refer the below code example, 
protected void EditEvents_ServerEditRow(object sender, GridEventArgs e) 
        { 
            var item = this.autoComp.Value; 
            JavaScriptSerializer mySerialiser = new JavaScriptSerializer(); 
            var data = mySerialiser.Deserialize<object>(item); // empty  
 
            EditAction(e.EventType, e.Arguments["data"]); 
        } 

We have shared the video and it can be available from the below link, 

If you still face the issue please get back to us with the following details, 
1.       Share the video of the issue that you are facing. 
2.       If possible please replicate the issue in the attached sample. 
The provided information will help us to analyze the issue and provide you the response as early as possible. 


Regards, 
Manisankar Durai. 


Pratheep
Replied On September 28, 2016 03:12 PM

Hi Manisankar

Thank you for your support.Now working fine


Many thanks
Pratheep

Mani Sankar Durai [Syncfusion]
Replied On September 29, 2016 03:23 AM

Hi Pratheep, 

We are happy to hear that your requirement has been achieved. Please get back to us if you need further assistance on this.  
 
Regards, 
Manisankar Durai. 


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.

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.

;