Dialog editing - Autocomplete

[Pratheep]

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]

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, 

Link: https://www.syncfusion.com/downloads/support/forum/126043/ze/WebApplication1-105235846 

Please let us know if you need further assistance, 

Regards, 

Manisankar Durai. 

[Pratheep]

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]

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"]); 

        } 

Sample: https://www.syncfusion.com/downloads/support/forum/126043/ze/WebApplication12115620954 

Regards, 

Jayaprakash K. 

[Pratheep]

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]

  

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 

                }); 

                 

            } 

Sample: https://www.syncfusion.com/downloads/support/forum/126043/ze/WebApplication12134803505 

Regards, 

Jayaprakash K. 

[Pratheep]

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]

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, 

Link:  https://www.syncfusion.com/downloads/support/forum/126043/ze/WebApplication1-1551288142 

Regards, 

Manisankar Durai. 

[Pratheep]

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]

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, 

Link: https://www.syncfusion.com/downloads/support/forum/126043/ze/Sample2114850146 

Please let us know if you need further assistance. 

Regards, 

Manisankar Durai. 

  

[Pratheep]

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]

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, 

Link:  https://www.syncfusion.com/downloads/support/forum/126043/ze/Autocomplete_Video995211989 

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. 

Sample: https://www.syncfusion.com/downloads/support/forum/126043/ze/WebApplication11844065564 

Regards, 

Manisankar Durai. 

[Pratheep]

Hi Manisankar

Thank you for your support.Now working fine


Many thanks
Pratheep

[Mani Sankar Durai]

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.