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. (Last updated on : Nov 16th 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Update dropdown data source while editing a row

Thread ID:

Created:

Updated:

Platform:

Replies:

121285 Nov 26,2015 02:42 PM UTC Nov 27,2015 08:32 AM UTC JavaScript 1
loading
Tags: ejGrid
Madawa Wipulaguna
Asked On November 26, 2015 02:42 PM UTC

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 NameAggregation TypeWeighting Field
Metric_1
Average

Metric_2Average
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?

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

                $("#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



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

;