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

Update dropdown data source while editing a row


   I have created a sample app on jsplayground to show what I need. But it is not completed. And not working as I needed. But it should be sufficient to understand how we have implemented the functionalities we need.  http://jsplayground.syncfusion.com/i1hc1i5n
Metric NameAggregation TypeWeighting Field

Metric_3Weighted AverageMetric_2

Say we have above grid with dropdown lists for 'Aggregation Type' and 'Weighting Field'.  'Aggregation Type' has two options 'Average' and 'Weighted Average'.  'Weighting Field' dropdown is initially empty. When we add a metric with Aggregation Type 'Average' we add that metric name to the 'Weighting Field' dropdown. And if we remove that metric we remove that metric from 'Weighting Field' dropdown. So that when we add a Metric with Aggregation Type 'Weighted Average' we can select a Metric with 'Average' Aggregation Type as a Weighting Field for that new Metric. 'Weighting Field' dropdown must not contain any metric with Aggregation Type 'Weighted Average'. 

Problem comes when we are editing.
On the above grid if we edit 'Metric_2' to change the Aggregation Type to 'Weighted Average', then we need to remove Metric_2 from the 'Weighting Field' dropdown.
We tried to achieve this by removing the Metric_2 from the Weighting Field array (as implemented in the sample app) within 'onchange()' event and updating the column as follows.  (this bit is not implemented in the sample app)

// remove 'Metric_2' from 'weightingFieldMetrics' and then
var gridObj = $("#Grid").data("ejGrid");
gridObj.columns(gridObj.model.columns[3], "update");

This triggers a refresh action to the grid and discard all the changes and exit the edit mode.

So the question is, how can we update the datasource of a dropdown while we are editing a row?

1 Reply

BM Balaji Marimuthu Syncfusion Team November 27, 2015 08:32 AM UTC

Hi Madawa,

Thanks for contacting Syncfusion support.

You can update the dataSource of dropdown by using the setModel option. Refer to the sample and code example as below.
Sample: http://jsplayground.syncfusion.com/ivuzpfwr

Helpdocument: http://help.syncfusion.com/js/api/ejdropdownlist#members:datasource

var onchange = function (args) {

            if (isAggTypeWeightedAverage(args)) {


                var index;

                $.each(weightingFieldMetrics, function (key, value) {

                    if (value["text"] == "Metric_2")

                        index = key;


                if (index != null) {

                    weightingFieldMetrics.splice(index, 1);

                    $("#GridweightingField").ejDropDownList("option", "dataSource", weightingFieldMetrics);



            else {



Based on your requirement, we have removed the “Metric_2” from dropdown and update the values to dropdown dataSource.

$scope.tools = ["add", "edit", "delete", "update", "cancel"];

                                      $scope.columns = [

                                { field: "ordinal", isPrimaryKey: true, type: "number" },

                                { field: "metricfieldname", headerText: "Metric Name", editType: ej.Grid.EditingType.String, width: 100 },

                                { field: "aggregationType", headerText: "Aggregation Type", editType: ej.Grid.EditingType.Dropdown, dataSource: aggTypes, foreignKeyField: "value", foreignKeyValue: "text", width: 75 },

                                { field: "weightingField", headerText: "Weighting Field", editType: ej.Grid.EditingType.Dropdown, dataSource: weightingFieldMetrics, foreignKeyField: "value", foreignKeyValue: "text", width: 75 }

To update the same to the columns dataSource, please modified your code as follows.

if (args.requestType == "save") {

                                              if(isAggregationTypeField(args.data.aggregationType)) {

       var newMetric = { "text": args.data.metricfieldname, "value": args.data.ordinal };



        var gridObj = $("#Grid").data("ejGrid");

        gridObj.columns(gridObj.model.columns[3], "update");

Note: In your sample, you have used the text value pair ({text:”Metric_1”, value:”0”}), so bind the foreignKeyField as value and foreignKeyValue as text to the weightingField column.

Balaji Marimuthu

Live Chat Icon For mobile
Up arrow icon