+1-888-365-2779
Try Now
More in this section

Forums / Developing with Sitefinity / Issue with drop down list control on custom MVC designer

Issue with drop down list control on custom MVC designer

4 posts, 1 answered
  1. Balu
    Balu avatar
    3 posts
    Registered:
    11 Apr 2014
    27 Apr
    Link to this post

    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

    Answered
  2. Nikola Zagorchev
    Nikola Zagorchev avatar
    424 posts
    Registered:
    26 Sep 2016
    02 May
    Link to this post
    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
     
    Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Sitefinity CMS Ideas&Feedback Portal and vote to affect the priority of the items
     
  3. Balu
    Balu avatar
    3 posts
    Registered:
    11 Apr 2014
    17 May
    Link to this post





    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;
                });
        }]);
    })();
  4. Nikola Zagorchev
    Nikola Zagorchev avatar
    424 posts
    Registered:
    26 Sep 2016
    17 May
    Link to this post
    Hi,

    Make sure the properties values are updated when saving.
    $scope.properties.ConferenceId.PropertyValue = newValue;

    The values should be sent to the service when you click the save button. Check if you have correctly set the PropertyValues and what is the service call.

    Regards,
    Nikola Zagorchev
    Telerik
     
    Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Sitefinity CMS Ideas&Feedback Portal and vote to affect the priority of the items
     
4 posts, 1 answered