Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Ivan 15 posts 125 karma points
    Jan 05, 2017 @ 14:22
    Ivan
    0

    Displaying child pages with filter.

    Hi all I'm currently using Umbraco version 7.5.6 assembly: 1.0.6185.24083 I have document type called Projects. This document type has allowed child node called Project. I have also defined various attributes for Project document type, i.e. Type, Region, Length, Cost, etc. Most of them are Umbraco.Dropdown type. I've setup a view that lists all child pages from Projects document type and it's working as intended. Since the number of projects is rather big, the list got big fast too. But I would like to add a way for a user to control which projects are displayed on the web page (projects).

    For example, is it possible to add dropdown control (one or even more) onto web page itself, so when user picks Region=North, only projects that meet that criteria are listed. PS: I'm not talking about list view that is implemented from developer POV, but something from web page perspective.

    How do I do that, Thank you in advance Goku

  • pbl_dk 150 posts 551 karma points
    Jan 08, 2017 @ 11:34
    pbl_dk
    101

    Hi there. It's not difficult to do in umbraco, though it depends on some javascript.

    You start with hardcoding the select box, I havent found a method to extract the info with razor yet, so it can become dynamic.

    select class="target">
        <option value="All">All</option>
        <option value="SEO">SEO</option>
        <option value="Marketing">Marketing</option>
        <option value="Website">Website</option>
        <option value="Ecommerce">Ecommerce</option>
        <option value="SEM">SEM</option>
        <option value="Apps">Apps</option>
    
    </select>
    

    Then with jquery you set a query in the URL like this ie:

    <script>
    
        $(".target")
          .change(function () {
              var str = "";
              $("select option:selected").each(function () {
                  str += $(this).text() + " ";
              });
              // CHANGE URL
              url = "?selected=" + str;
              window.location.href =url;
          })
    </script>
    

    Then you can make razorscript which reads the query and show selected items based on the query. I havent made the script yet, but I am working on a simple filter search like the one you are asking for, its just not finished, but what I have shown here is the sketch-up.

    Here is an example on how to extract the query:

    @{if (Request.QueryString["selected"] == "SEO")
    {
    // do something, show specific items
    }
    }
    

    Here's some razor to extract the children with the property, all you need here is some IF sentence to find the value of projecttypes.

    @{
      var selection = CurrentPage.Children();
    
      foreach (var item in selection)
      {
          if (item.HasValue("projecttypes"))
          {
          @item.projecttypes;
        <li><a href="@item.Url">@item.Name</a></li>
    
          }
      }
    }
    
  • Ivan 15 posts 125 karma points
    Jan 09, 2017 @ 08:32
    Ivan
    0

    Thanks you very much for your detailed answer. I'll try this out as soon as I get a chance. Thanks again.

Please Sign in or register to post replies

Write your reply to:

Draft