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. Image for the cookie policy date

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

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





1 Reply

SS Seeni Sakthi Kumar Seeni Raj Syncfusion Team 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. 


Loader.
Up arrow icon