Issue with drop down list control on custom MVC designer

Hi,

I have widget designer having two dropdown list as below.

Here are snippets of my code.

DesignerView.Simple.cshtml
    <tab heading="Corticon">

        <div class="form-group" ng-app="simpleViewModule" ng-controller="CustomCtrl">
            <div>
                <label for="inputType">Corticon Entity Name</label>
            </div>

            <div class="row">
                <div class="col-xs-6">
                    <div><label for="entities">Entities:</label></div>
                    <select class="form-control" ng-model="x" ng-options="item.Entity for item in data"></select>
                </div>
            </div>
        </div>
        <div class="form-group">
            <div>
                <label for="inputType">Corticon Field Name</label>
            </div>
            <div class="row">
                <div class="col-xs-6">
                    <div><label for="fields">Fields:</label></div>
                    <select class="form-control" ng-model="Attr" ng-options="opt.name for opt in x.Attributes"></select>
                </div>
            </div>
        </div>


I am populating dropdown lists data from the web services using angular JS.
Below is the JS file code.

designerview-simple.js

var customModule = angular.module('simpleViewModule', ['pageEditorServices', 'breadcrumb', 'expander', 'designer', 'sfFields', 'sfSelectors']);
angular.module('designer').requires.push('simpleViewModule');

//basic controller for the advanced designer view
customModule.controller('CustomCtrl', ['$scope', '$http','$log','propertyService',
    function ($scope, propertyService,$http)

        $scope.feedback.showLoadingIndicator = true;

        propertyService.get()
            .then(function (data)
                if (data)
                    // Here the $scope.properties are the properties of the widget – the ControlData
                    // This can be used as ‘refreshUI’
                    $http.get("http://nbhydkantu-7:8850/axis/corticon/getVocabulary/Sitefinity_CoveredCA/3/0")
                          .then(function (response)
                              $scope.data = response.data;
                              );
                                            $scope.x =
                                                selected: ""
                                            ;
                                            $scope.Attrs = $scope.x.selected;
                    $scope.properties = propertyService.toAssociativeArray(data.Items);
               
            ,
            function (data)
                $scope.feedback.showError = true;
                if (data)
                    $scope.feedback.errorMessage = data.Detail;
            )
            .finally(function ()
                $scope.feedback.showLoadingIndicator = false;
            );
    ]);

If I run the above code in HTML editor ,I could get the dropdown lists with the which is populated from service . However, If I integrate the same in designer ,The data is not populating in dropdownlists.

Widget Designer: Attached 

Can someone me help how  to get the drop lists with the data?

Thanks,
Balu

Hello Balu,

You need to bind the first dropdown and when a value is selected, to bind the second one and enable it.
You can use the $scope.$watch to do this. You can also use it to persist the selections in the Controller properties.
If you are using default values for the dropdowns, you also need to handle the 'unselect' of an item and set back the properties of the widget.

Complete sample can be found here:
https://github.com/nzagorchev/Sitefinity.MvcCascadingDropdownsDesignerOData

Let me know if you have any questions.

Regards,
Nikola Zagorchev
Telerik

Hi Nikola,

Thank you. I could get the dropdown lists with the values. However, I have an issue on persisting the values.

I have added a widget to form and Selected values from dropdown lists on designer and closed the dialog by clicking save button.
I Wanted to change the values so again opened designer by clicking on Edit option on the widget. I found that previously selected values are not present.

Can you please explain to me how to persist the selected drop down values on widget designer?



My Model.cs file has CorticonEntityName, CorticonFieldName properties.


Here the code snippet for the designer.
    <tab heading="Corticon">
        <div class="form-group">
            <div>
                <label for="Corticon Entity Name">Corticon Entity Name:</label>
            </div>
            <div class="row">
                <div class="col-xs-6">
                    <select id="entities" ng-model="entity" ng-options="entity.Entity for entity in entities" class="form-control">
                        <option value=''>Select category</option>
                    </select>
                </div>
            </div>
        </div>
        <div class="form-group">
            <div>
                <label for="Corticon field Name">Corticon field Name:</label>
            </div>
            <div class="row">
                <div class="col-xs-6">
                    <select id="fields" ng-disabled="!(entity.Attributes)" ng-model="field" ng-options="field.name for field in entity.Attributes" class="form-control">
                        <option value=''>Select field</option>
                    </select>
                </div>
            </div>
        </div>
    </tab>


Code snippet for js file:

(function ()
    var simpleViewModule = angular.module('designer');
    angular.module('designer').requires.push('sfServices');

    simpleViewModule.config(['$httpProvider', function ($httpProvider)
        $httpProvider.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

        delete $httpProvider.defaults.headers.get['Cache-Control'];
        delete $httpProvider.defaults.headers.get["Pragma"];
    ]);

    simpleViewModule.controller('SimpleCtrl', ['$scope', '$http', '$filter', 'propertyService',
    function ($scope, $http, $filter, propertyService)

        $scope.feedback.showLoadingIndicator = true;


        $scope.$watch('properties.CorticonEntityName.PropertyValue', function (newValue, oldValue)
            if (newValue)
                $scope.CorticonEntityName = JSON.stringify(newValue);
           
        );

        $scope.$watch('entity', function (newVal)
            if (newVal)
                $scope.properties.CorticonEntityName.PropertyValue = newVal;
           
        );


        $scope.$watch('properties.CorticonFieldName.PropertyValue', function (newValue, oldValue)
            if (newValue)
                $scope.CorticonFieldName = JSON.stringify(newValue);
           
        );

        $scope.$watch('field', function (newVal)
            if (newVal)
                $scope.properties.CorticonFieldName.PropertyValue = newVal;
           
        );

        propertyService.get()
            .then(function (data)
                if (data)
                    $scope.properties = propertyService.toAssociativeArray(data.Items);
               

                return $http.get("http://localhost:8850/axis/corticon/getVocabulary/Sitefinity_CoveredCA/3/0");
            ,
            function (data)
                $scope.feedback.showError = true;
                if (data)
                    $scope.feedback.errorMessage = data.Detail;
            )
            .then(function (response)
                $scope.entities = response.data;
            )
            .finally(function ()
                $scope.feedback.showLoadingIndicator = false;
            );
    ]);
)();

Hi,

Make sure the properties values are updated when saving.