Custom Widget With Multiple Link Selectors - Front- & Back-End Development - Front- & Back-End Development - Progress Community
 Front- & Back-End Development

Custom Widget With Multiple Link Selectors

  • Custom Widget With Multiple Link Selectors
  • 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:


    <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 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 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"/>


    (function ($)

    var tileModule = angular.module("designer");

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

    // turn on the spinner
    $ = true;

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

                function (data)
                $ = true;
                if (data)
                $ = data.Detail;
                .then(function ()
                $ ()
                // main link
                var link = linkService.getHtmlLink($scope.selectedItem1);
                $ = link[0].outerHTML;

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

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

                // link 4 (optional)
                var link4 = linkService.getHtmlLink($scope.selectedItem4);
                $ = link4[0].outerHTML;
                .finally(function ()
                $ = false;




    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.



  • 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!



  • Hey, 

    There hasn't been any fixes for this yet, that I'm aware of.  It's been reported as a bug here:  (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.

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



  • Mind sharing exactly what you did? I'm ok with a dirty fix for now lol.