More in this section
Forums / Developing with Sitefinity / Custom Widget With Multiple Link Selectors

Custom Widget With Multiple Link Selectors

The forums are in read-only mode. In case that you want to directly contact the Progress Sitefinity team use the support center. In our Google Plus group you can find more than one thousand Sitefinity developers discussing different topics. For the Stack Overflow threads don’t forget to use the “Sitefinity” tag.
5 posts, 0 answered
  1. Dana
    Dana avatar
    7 posts
    Registered:
    16 Mar 2015
    19 Oct 2015
    Link to this post

    Hi,

     We using Sitefinity 8.1.5810.0 with the latest Feather update running in pure MVC mode.  I'm creating a "tile" widget that requires multiple links to be added (see tile.jpg).  Here are snippets of my code:

    DesignerView.Simple.cshtml:

    <div role="tabpanel" class="tab-pane" id="link2">
                    <div class="form-group" style="margin-top: 30px;">
                        <sf-link-selector sf-link-html="tileLink2" sf-selected-item="selectedItem2" sf-editor-content="editorContent"/>
                    </div>
                </div>
                <div role="tabpanel" class="tab-pane" id="link3">
                    <div class="form-group" style="margin-top: 30px;">
                        <sf-link-selector sf-link-html="tileLink3" sf-selected-item="selectedItem3" sf-editor-content="editorContent"/>
                    </div>
                </div>
                <div role="tabpanel" class="tab-pane" id="link4">
                    <div class="form-group" style="margin-top: 30px;">
                        <sf-link-selector sf-link-html="tileLink4" sf-selected-item="selectedItem4" sf-editor-content="editorContent"/>
                    </div>
                </div>

    designerview-simple.js:

    (function ($) {

    var tileModule = angular.module("designer");
    angular.module("designer").requires.push("sfSelectors","expander");

    // note: controller needs to be named VIEWNAMECtrl
    tileModule.controller('SimpleCtrl', ['$scope', 'propertyService', 'sfLinkService', function ($scope, propertyService, linkService) {

    // turn on the spinner
    $scope.feedback.showLoadingIndicator = true;

    //Makes call to the controlPropertyService to get the properties for the widgets.
    propertyService.get()
                .then(function (data) {
                if (data) {
                $scope.properties = propertyService.toAssociativeArray(data.Items);
                $scope.tileLink1 = $($scope.properties.TileLink1.PropertyValue);
                $scope.tileLink2 = $($scope.properties.TileLink2.PropertyValue);
                $scope.tileLink3 = $($scope.properties.TileLink3.PropertyValue);
                $scope.tileLink4 = $($scope.properties.TileLink4.PropertyValue);
               

                }
                },
                function (data) {
                $scope.feedback.showError = true;
                if (data)
                $scope.feedback.errorMessage = data.Detail;
                })
                .then(function () {
                $scope.feedback.savingHandlers.push(function () {
                // main link
                var link = linkService.getHtmlLink($scope.selectedItem1);
                $scope.properties.TileLink1.PropertyValue = link[0].outerHTML;

                // link 2 (optional)
                var link2 = linkService.getHtmlLink($scope.selectedItem2);
                $scope.properties.TileLink2.PropertyValue = link2[0].outerHTML;

                // link 3 (optional)
                var link3 = linkService.getHtmlLink($scope.selectedItem3);
                $scope.properties.TileLink3.PropertyValue = link3[0].outerHTML;

                // link 4 (optional)
                var link4 = linkService.getHtmlLink($scope.selectedItem4);
                $scope.properties.TileLink4.PropertyValue = link4[0].outerHTML;
                });
                })
                .finally(function () {
                $scope.feedback.showLoadingIndicator = false;
                });
    }
    ]);

    })(jQuery);

     

    The problem is this: when I open the designer and select "Page from this site", the page selector does not show up for links 1, 2, and 3 (see link123issue.jpg) but on link 4, this works (see link4.jpg).  What am I doing wrong?

    This WAS working prior to the latest Feather update so I'm wondering if there is an issue or what I can do to fix my code.

     

    Thanks.

  2. Harry
    Harry avatar
    3 posts
    Registered:
    10 May 2016
    12 May 2016
    Link to this post

    Hey, have you figured out what's wrong?

    I traced it to one of the kendo tools but had no time to continue. I applied a dirty fix to show all the first .k-content inside (which are the page selectors) after 2 seconds time out. If you find some better way to fix this, please share!

    Thanks,

    Harry

  3. Dana
    Dana avatar
    7 posts
    Registered:
    16 Mar 2015
    17 May 2016
    Link to this post

    Hey, 

    There hasn't been any fixes for this yet, that I'm aware of.  It's been reported as a bug here: http://feedback.telerik.com/Project/153/Feedback/Details/174008-feather-after-placing-multiple-link-selector-on-a-widget-designer-pages-from-t  (so please go vote for it), but they haven't fixed it.  I think we need to open up an issue on github because it's been over 6 months.

  4. Dana
    Dana avatar
    7 posts
    Registered:
    16 Mar 2015
    17 May 2016 in reply to Harry
    Link to this post
    Mind sharing exactly what you did? I'm ok with a dirty fix for now lol.
  5. Harry
    Harry avatar
    3 posts
    Registered:
    10 May 2016
    17 May 2016
    Link to this post

    Hi,

    So I traced it down to kendo-tap-strip not being initialized properly (the first tab is k-state-active but the corresponding tabpanel is not). Basically when a tab is active, the tabpanel will have "display:block;". Thus, I put this code to the designer controller to manually show all of them after 2 seconds (mostly to let all the init code run first):

                setTimeout(function () {
                    jQuery("custom-link-selector sf-multisite-page-selector sf-list-selector .k-tabstrip--selection").each(function () { jQuery(this).find(".k-content:first").show(); });
                }, 2000);

    I used my own "custom-link-selector" directive for different purpose, but you can just change it to "sf-link-selector".

    Like I said, it's very dirty and I feel uncomfortable using it, but it did the trick for me. I'll look back at this problem if I have spare time in the future.

    Please tell me if that works on yours.

    EDIT: One of the reasons I used my own "custom-link-selector" was that I was having problem with the radio buttons too! Say when I clicked "select internal page" in the second link selector, the first one switched! So I had to put in unique identifiers for all of them. Did you encounter this and if yes how you solved it?

    Regards,

    Harry

5 posts, 0 answered