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

Setting grid cell value based on drop down selection in another column

Thread ID:

Created:

Updated:

Platform:

Replies:

124737 Jun 24,2016 05:32 PM UTC Jun 27,2016 09:04 AM UTC JavaScript 1
loading
Tags: ejGrid
s
Asked On June 24, 2016 05:32 PM UTC

Hi,

I am ej Grid to display the data. I will explain my functionality step by step and 

1) In a Grid I will need to add new row and enter data into it. It has 3 columns.....................Done
2) First column of row will be a dropdown on selection of the drop down data will be filled in the cell and then event will be fired. In that event I  will get datasource from controller to next column auto complete box............................................Done
3)In the last column I need to set the data  depending on the autocomplete box selected value.By an event I am getting selected text of auto complete box but I need selected item value(may be key).
And the most important thing is how to bind to that column of existing row 



Please help me





Seeni Sakthi Kumar Seeni Raj [Syncfusion]
Replied On June 27, 2016 09:04 AM UTC

Hi Sri, 

Query #1: Setting grid cell value based on  drop down selection in another column and autocomplete selection in another column 

We have prepared a sample with explained scenario that can be downloaded from the following location. 


In the sample, change event for the dropdown was bound within the actionComplete event while editing/adding. Using the editTemplate of the columns, rendered the ejAutoComplete. In the change event of ejDropDownList, an ajax post will populate the data for the autoComplete text box and in the select event of this, update the value for the last column.  

<div id="Grid"></div> 
 
<script type="text/javascript"> 
    $(function () { 
        var gridData = [ 
            { ID: 1, OrderID: 10248, EmployeeName: "JOHN", CustomerID: "VINET" }, 
               . .. . 
            { ID: 9, OrderID: 10256, EmployeeName: "JOHN1", CustomerID: "VINET" } 
        ] 
        $("#Grid").ejGrid({ 
              . . . . 
            columns: [ 
                { field: "ID", isPrimaryKey: true }, 
                { field: "OrderID", editType: "dropdownedit" }, 
                { 
                    field: "EmployeeName", 
                    editTemplate: { 
                        create: function () { 
                            return "<input>"; 
                        }, 
                        read: function (args) { 
                            args.ejAutocomplete('suggestionList').css('display', 'none'); 
                            return args.ejAutocomplete("getValue"); 
                        }, 
                        write: function (args) { 
                            var data = ej.DataManager(gridData).executeLocal(new ej.Query().select("EmployeeName")); 
                            args.element.ejAutocomplete({ dataSource: data, value: args.rowdata !== undefined ? args.rowdata["EmployeeName"] : "" }); 
                        } 
                    } 
                }, 
                { field: "CustomerID" } 
            ], 
            actionComplete: function (args) { 
                if (args.requestType == 'beginedit' || args.requestType == 'add') { 
                    $("#GridOrderID").ejDropDownList({//Grid’ ID + field name 
                        change: function (args) { 
                            $("#Grid").ejWaitingPopup("show")//show popup 
                            $.ajax({ 
                                type: "POST", 
                                url: "/Home/autoCompleteData", 
                                data: { gridObj: args.selectedText },//pass the grid model 
                                dataType: "json", 
                                success: function (response) { 
                                    $("#Grid").ejWaitingPopup("hide")//hide popup 
                                    $("#GridEmployeeName").ejAutocomplete({ 
                                        dataSource: response, 
                                        fields: { text: "FirstName", key: "EmployeeID" }, 
                                        select: function (args) { 
                                            if (args.key < 5) $("#GridCustomerID").val("VINET"); 
                                            else $("#GridCustomerID").val("ALFGH"); 
                                        } 
                                    }); 
                                }, 
                                error: function (Result) { 
                                    $("#Grid").ejWaitingPopup("hide")//hide popup 
                                    //Result.responseText => get the response message 
                                    alert(Result.statusText); 
                                } 
                            }); 
 
                        } 
                    }) 
                } 
            }, 
 
        }); 
    }); 

Refer to the following Help Documents and Online demo on editTemplate. 


Query #2: the most important thing is how to bind to that column of existing row 

We understand that you would like to perform the explained scenario to the editing records along with the newly added records. The solution provided above will work with the add/edit actions. If we misunderstood your query, please explain the scenario in detail. 

Regards, 
Seeni Sakthi Kumar S. 


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

;