Custom Widget With Multiple Link Selectors

Posted by Community Admin on 04-Aug-2018 21:16

Custom Widget With Multiple Link Selectors

All Replies

Posted by Community Admin on 19-Oct-2015 00:00

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.

Posted by Community Admin on 12-May-2016 00:00

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

Posted by Community Admin on 17-May-2016 00:00

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.

Posted by Community Admin on 17-May-2016 00:00

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

Posted by Community Admin on 17-May-2016 00:00

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

This thread is closed