Update dropdown data source while editing a row

[Madawa Wipulaguna]

Hello,

   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 Name	Aggregation Type	Weighting Field
Metric_1	Average
Metric_2	Average
Metric_3	Weighted Average	Metric_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?

[Balaji Marimuthu]

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)) {

                $("#GridweightingField").ejDropDownList("enable");

                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 {

                $("#GridweightingField").ejDropDownList("disable");

            }
        }

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 };

                                                  weightingFieldMetrics.push(newMetric);

                     }

        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.

Regards,
Balaji Marimuthu