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.
Syncfusion Feedback

Grid - inline form editing

Thread ID:

Created:

Updated:

Platform:

Replies:

120833 Oct 20,2015 07:52 PM UTC Oct 23,2015 05:02 AM UTC ASP.NET Web Forms 6
loading
Tags: Grid
Pratheep
Asked On October 20, 2015 07:52 PM UTC

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 [Syncfusion]
Replied On October 21, 2015 08:36 AM UTC

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


Pratheep
Replied On 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


Balaji Marimuthu [Syncfusion]
Replied On 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

Pratheep
Replied On 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

Pratheep
Replied On October 22, 2015 09:56 AM UTC

Hi

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

Thanks
Pratheep

Balaji Marimuthu [Syncfusion]
Replied On 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

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.

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

;