Grid - inline form editing

[Pratheep]

Hi

Autocomplete  not binding in inline form editing template

It's possible  get  selected ID (not text)  from Autocomplete   client side ajax json 

  <ej:Autocomplete ID="ShipCountry" Width="205px"  ShowPopupButton="true" FilterType="Contains" HighlightSearch="true"  runat="server" WatermarkText="Select a country"></ej:Autocomplete>

        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 = "Antarctica", ID = "300003" });

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

            c.Add(new Countries { text = "Brazil", ID = "500005" });

            c.Add(new Countries { text = "Canada", ID = "600006" });

            c.Add(new Countries { text = "Cuba", ID = "700007" });

            c.Add(new Countries { text = "Denmark", ID = "800008" });

            c.Add(new Countries { text = "Dominica", ID = "900009" });

            this.ShipCountry.DataSource = c;

            ShipCountry.DataTextField = "text";

            ShipCountry.DataUniqueKeyField = "ID";

            ShipCountry.DataBind();

            

        }

        [Serializable]

        class Countries

        {

            public string text;

            public string ID;

        }

Thanks

Pratheep

[Balaji Marimuthu]

Hi Pratheep,

Thanks for contacting Syncfusion support.

Query:1 Autocomplete  not binding in inline form editing template
We have created a sample based on your requirement using inline form editing. Refer to the sample and code example as follows,
Sample: Sample-EditTemplate

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

            <Columns>

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

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

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

                </ej:Column>

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

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

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

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

            </Columns>

            <EditSettings AllowEditing="True" AllowAdding="True" AllowDeleting="True" EditMode="InlineForm"></EditSettings>

            <ToolbarSettings ShowToolbar="True" ToolbarItems="add,edit,delete,update,cancel"></ToolbarSettings>
        </ej:Grid>

Refer to the Document and Demo for Edit Template in following link:
http://asp.syncfusion.com/demos/web/grid/edittemplate.aspx
http://help.syncfusion.com/aspnet/grid/editing#edit-template

We have rendered the AutoComplete control to Grid in EditTemplate write function. Refer to the code example as below.

[Default]

<script type="text/javascript">

        function create() {

            return $("<input>");

        }

        function write(args) {

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

            //render autocomplete control

            args.element.ejAutocomplete({

                width: "100%",

                dataSource: obj.model.columns[1].dataSource,   //bind datasource

                showPopupButton: true,

                highlightSearch: true,

                enableDistinct: true,

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

                watermarkText: "Select a country",

                filterType: 'contains',

                value: args.rowdata !== undefined ? args.rowdata["CustomerID"] : ""

            });

        }

        function read(args) {

                 . . .

        }

            . . .

    </script>

[Controller]

private void BindDataSource()

        {

           

            . . .

           this.OrdersGrid.DataSource = order;

            this.OrdersGrid.Columns[1].DataSource = BindCountry();

            this.OrdersGrid.DataBind();

        }

        private object 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 = "Antarctica", ID = "300003" });

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

            c.Add(new Countries { text = "Brazil", ID = "500005" });

            return c;

           
        }

Query:2 It's possible  get  selected ID (not text)  from Autocomplete client side ajax json 

You can get the selected items ID using the getSelectedItems method in Grid Edit Template read function. Refer to the help document.

http://help.syncfusion.com/js/api/ejautocomplete#methods:getselecteditems

function read(args) {

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

            var obj = args.ejAutocomplete('instance');

            alert(obj.getSelectedItems()[0].ID);  //get ID for the selected items

            return args.ejAutocomplete("getValue");
        }

If we misunderstood your requirement, please share the following details.

1.     Share the Editing Mode which have you used.

2.     Are you using Normal Editing/ Inline Form Editing/ Inline Form Template Editing. Refer to the document as below.

http://help.syncfusion.com/aspnet/grid/editing#edit-mode

Regards,
Balaji Marimuthu

---

PR Pratheep October 21, 2015 10:41 AM UTC

Hi

Thanks for you guide 

I need   Autocomplete ( customer ID) change event ( selected change event - combo box change event )  pass selected  customer ID to data base (ajax json) and get data according to the customer ID and  fill ( set data) another controls  (read only textboxes  )   

Thanks

Pratheep

---

BM Balaji Marimuthu Syncfusion Team October 22, 2015 06:15 AM UTC

Hi Pratheep,

Based on your requirement we have created a sample. Refer to the sample and code example below.
Sample: ASPGrid(Autocomplete)

<div>

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

            <Columns>

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

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

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

                </ej:Column>

               

              . . . .

    </div>

We have rendered AutoComplete control in EditTemplate write function and passed the selected CustomerID data to controller using ajax. Refer to the code example and helpdocument as below.
http://help.syncfusion.com/js/api/ejautocomplete#events:select

function write(args) {

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

            var proxy = obj._id; //grid id

            //render autocomplete control

            args.element.ejAutocomplete({

                width: "100%",

                dataSource: obj.model.columns[1].dataSource,  //bind datasource

                showPopupButton: true,

                highlightSearch: true,

                enableDistinct: true,

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

                watermarkText: "Select a country",

                filterType: 'contains',

                select: function (args) {

                  //select event in autocomplete

                        $.ajax({

                            url: "/Default.aspx/dropdowndata",

                            type: "POST",

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

                            data: JSON.stringify({ id: args.value }),

                            dataType: "json",

                            success: function (data) {

                                //set value to the EmployeeID column

                                $('#' + proxy + 'EmployeeID').val(data.d);  //binding value to text box

                            }

                        });

                    },

                value: args.rowdata !== undefined ? args.rowdata["CustomerID"] : ""

            });
        }

[Controller]

[WebMethod]

        public static string dropdowndata(string id)

        {

            int val;

            if (id == "Austria")

                val = 3;

            else if (id == "Australia")

                val = 4;

            else if (id == "Antarctica")

                val = 5;

            else if (id == "Bangladesh")

                val = 6;

            else

                val = 8;

            return val.ToString();
        }

In above code example, we have filled the textboxes control value in ajax success. When you want to make a column as read-only then set allowEditing as false for that column. Refer to the help document.
http://help.syncfusion.com/js/grid/columns#read-only

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

            <Columns>

                 . . .

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

                        </ej:Grid>

Regards,
Balaji Marimuthu

---

PR Pratheep October 22, 2015 09:25 AM UTC

Hi

it's working fine thanks. but ejAutocomplete selected text passing(json) to code behind 

it's possible  pass selected ID(code) to code behind

      [WebMethod]

        public static string dropdowndata(string id)

        {

            int val;

            if (id == "100001")

                val = 3;

            else if (id == "20002")

                val = 4;

            else if (id == "300003")

                val = 5;

            else if (id == "400004")

                val = 6;

            else

                val = 8;

            return val.ToString();

        }

Thanks

Pratheep

---

PR Pratheep October 22, 2015 09:56 AM UTC

Hi

Thanks.it's working fine (changed - args.key)

Thanks

Pratheep

---

BM Balaji Marimuthu Syncfusion Team October 23, 2015 05:02 AM UTC

Hi Pratheep,

We are happy that the provided solution helped you.

Please get back to us if you need any further assistance. We will be happy to assist you.

Regards,
Balaji Marimuthu

[Pratheep]

Hi

Thanks for you guide 

I need   Autocomplete ( customer ID) change event ( selected change event - combo box change event )  pass selected  customer ID to data base (ajax json) and get data according to the customer ID and  fill ( set data) another controls  (read only textboxes  )   

Thanks

Pratheep

[Balaji Marimuthu]

Hi Pratheep,

Based on your requirement we have created a sample. Refer to the sample and code example below.
Sample: ASPGrid(Autocomplete)

<div>

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

            <Columns>

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

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

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

                </ej:Column>

               

              . . . .

    </div>

We have rendered AutoComplete control in EditTemplate write function and passed the selected CustomerID data to controller using ajax. Refer to the code example and helpdocument as below.
http://help.syncfusion.com/js/api/ejautocomplete#events:select

function write(args) {

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

            var proxy = obj._id; //grid id

            //render autocomplete control

            args.element.ejAutocomplete({

                width: "100%",

                dataSource: obj.model.columns[1].dataSource,  //bind datasource

                showPopupButton: true,

                highlightSearch: true,

                enableDistinct: true,

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

                watermarkText: "Select a country",

                filterType: 'contains',

                select: function (args) {

                  //select event in autocomplete

                        $.ajax({

                            url: "/Default.aspx/dropdowndata",

                            type: "POST",

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

                            data: JSON.stringify({ id: args.value }),

                            dataType: "json",

                            success: function (data) {

                                //set value to the EmployeeID column

                                $('#' + proxy + 'EmployeeID').val(data.d);  //binding value to text box

                            }

                        });

                    },

                value: args.rowdata !== undefined ? args.rowdata["CustomerID"] : ""

            });
        }

[Controller]

[WebMethod]

        public static string dropdowndata(string id)

        {

            int val;

            if (id == "Austria")

                val = 3;

            else if (id == "Australia")

                val = 4;

            else if (id == "Antarctica")

                val = 5;

            else if (id == "Bangladesh")

                val = 6;

            else

                val = 8;

            return val.ToString();
        }

In above code example, we have filled the textboxes control value in ajax success. When you want to make a column as read-only then set allowEditing as false for that column. Refer to the help document.
http://help.syncfusion.com/js/grid/columns#read-only

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

            <Columns>

                 . . .

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

                        </ej:Grid>

Regards,
Balaji Marimuthu

[Pratheep]

Hi

it's working fine thanks. but ejAutocomplete selected text passing(json) to code behind 

it's possible  pass selected ID(code) to code behind

      [WebMethod]

        public static string dropdowndata(string id)

        {

            int val;

            if (id == "100001")

                val = 3;

            else if (id == "20002")

                val = 4;

            else if (id == "300003")

                val = 5;

            else if (id == "400004")

                val = 6;

            else

                val = 8;

            return val.ToString();

        }

Thanks

Pratheep

[Pratheep]

Hi

Thanks.it's working fine (changed - args.key)

Thanks

Pratheep

[Balaji Marimuthu]

Hi Pratheep,

We are happy that the provided solution helped you.

Please get back to us if you need any further assistance. We will be happy to assist you.

Regards,
Balaji Marimuthu