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:

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.

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

Hey, 

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

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

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