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

Forums / Developing with Sitefinity / Custom Widget With Multiple Link Selectors

Custom Widget With Multiple Link Selectors

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