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

Forums / General Discussions / Breadcrumb

Breadcrumb

3 posts, 0 answered
  1. Bini
    Bini avatar
    0 posts
    Registered:
    21 Aug 2017
    30 Aug
    Link to this post

    Hi,

    I want to add a new field to Breadcrumb widget of Sitefinity. In the edit mode of Breadcrumb there are several fields and I need one more drop down field to change the color of breadcrumb in the front end. My drop down field has two values light and dark. So upon selecting,  background color of the widget should change.

    I need to customize the existing breadcrumb widget(Do not want to create a new one).

    I could add the new drop down field, but have no idea how to change the color of the breadcrumb based on the selected value.

     

    Backend view : DesignerView.Simple.cshtml

    <div class="form-group">
            <label for="breadcrumbTheme">@Html.Resource("Theme")</label>
            <select id="breadcrumbTheme" ng-model="properties.Theme.PropertyValue" class="form-control">  
                <option value="light">Light</option>
                <option value="dark">Dark</option>
            </select>
        </div>

     

    Front end view : Breadcrumb.cshtml

    @model Telerik.Sitefinity.Frontend.Navigation.Mvc.Models.Breadcrumb.BreadcrumbViewModel
    <script src="~/Mvc/Scripts/Breadcrumb/designerview-simple.js"></script>
    <style>
        .theme {
            background-color: lightblue;
        }
    </style>

    <div class="@Model.CssClass theme">

        @for (int i = 0; i < Model.SiteMapNodes.Count; i++)
        {
            var node = Model.SiteMapNodes[i];
            if (i > 0)
            {
                <span> / </span>
            }
            if (i == Model.SiteMapNodes.Count - 1 && Model.ShowCurrentPageInTheEnd)
            {
                @node.Title
            }
            else
            {
                <a href="@node.Url">@node.Title </a>
            }
        }
    </div>

     

    Please help me to find how to get the value of selected drop down field in the front end view.

    Thanks in advance...

     

     

  2. Steve
    Steve avatar
    3037 posts
    Registered:
    03 Dec 2008
    04 Sep in reply to Bini
    Link to this post

    Did you get "Theme" to save somehow?  Like you can't just (afaik) create new properties without a backing field on the controller to persist to.  Which would mean rolling your own or forking the feather widget for a custom implimenation.

    Like I can't just do "properties.BlahBlah.PropertyValue" and get that back in the View.

    HOWEVER, you *COULD* hijack an existing field like CssClass to store that data (properties.CssClass.PropertyValue) then use THAT in your model?

  3. Bini
    Bini avatar
    0 posts
    Registered:
    21 Aug 2017
    06 Sep in reply to Steve
    Link to this post

    Thanks for your reply Steve.

    I have added the field in js (designerview-simple.js) also,

     function (data) {
                   $('#breadcrumbTheme').change(function (event) {
                       alert("1");
                       var theme = $('#breadcrumbTheme').val();
                       $scope.properties.Theme.PropertyValue = theme;
                       alert($scope.properties.Theme.PropertyValue);

                   });
               }

    And added the "Theme"  field in BreadcrumbModel.cs, BreadcrumbViewModel.cs and IBreadcrumbModel.cs also,

    public string Theme { get; set; }

    Is this correct? Or do I need to do anything else to get the value?

    One more doubt, I am getting an exception in Breadcrumb.cshtml. Please find the attached file. There is no error while building the solution, but exception got fired on using the widget in the backend. Can you please help me to sort out this exception? 

    Thanks in advance.

3 posts, 0 answered