Copied to clipboard

Flag this post as spam?

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


  • John Hodgkinson 613 posts 355 karma points
    Mar 03, 2017 @ 15:30
    John Hodgkinson
    0

    Multiple Options Dropdown

    Is it possible to enable multiple selections for the DotNet Dropdown? I have a lot of options and Prefetch Picker seems to render very slow with all options.

  • Hendy Racher 863 posts 3849 karma points MVP 2x admin c-trib
    Mar 03, 2017 @ 15:34
    Hendy Racher
    100

    Hi John,

    Can I ask how many options you have - would a Typeahead picker be more suited ?

    Thanks, Hendy

  • John Hodgkinson 613 posts 355 karma points
    Mar 03, 2017 @ 15:39
    John Hodgkinson
    0

    unfortunately in the thousands... it's for an authentication data type and we have literally thousands of possible groups across the enterprise (need to revisit the options and see what can be cleaned up and removed). I'm just looking for a control to allow the user to easily select multiple options... I have not tried the typeahead picker but will give it a try

  • Hendy Racher 863 posts 3849 karma points MVP 2x admin c-trib
    Mar 03, 2017 @ 15:46
    Hendy Racher
    0

    Sounds like the Typeahead list picker is the one you want as it'll AJAX in matching options.

  • John Hodgkinson 613 posts 355 karma points
    Mar 03, 2017 @ 15:49
    John Hodgkinson
    1

    TypeAhead picker is very nice! I think that may just work. very nice!

  • John Hodgkinson 613 posts 355 karma points
    Mar 03, 2017 @ 15:52
    John Hodgkinson
    0

    actually, my options are not being retained... am I missing something in my data source?

    public class AuthenticationGroups : IDotNetDataSource
    {
        IEnumerable<KeyValuePair<string, string>> IDotNetDataSource.GetEditorDataItems(int contextId)
        {
            //get authentication helper
            AuthenticationHelper authHelper = new AuthenticationHelper();
    
            //create list
            var list = Enumerable.Empty<KeyValuePair<string, string>>().ToList();
    
            //get roles
            var roles = authHelper.GetAuthenticationRoles().ToList();
    
            //iterate roles
            foreach (var role in roles)
            {
                //add to list
                list.Add(new KeyValuePair<string, string>(role.ToString(), role.ToString()));
            }
    
            //return list
            return list;
        }
    }
    
  • Hendy Racher 863 posts 3849 karma points MVP 2x admin c-trib
    Mar 03, 2017 @ 16:01
    Hendy Racher
    0

    are the roles unique (keys obviously need to be distinct) ? perhaps there's a funky character breaking it ?

  • John Hodgkinson 613 posts 355 karma points
    Mar 03, 2017 @ 16:34
    John Hodgkinson
    0

    I went back into my method and added logic to ensure that the options are distinct.

    When I F12/debug from Chrome, I am seeing a ERRCONNECTIONREFUSED error message. When I click on the link below, I get the error message:

    http://localhost:4509/umbraco/backoffice/nuPickers/DotNetDataSourceApi/GetEditorDataItems?currentId=1087&parentId=-1&propertyAlias=authenticationGroups

    {"Message":"The requested resource does not support http method 'GET'."}

  • Hendy Racher 863 posts 3849 karma points MVP 2x admin c-trib
    Mar 03, 2017 @ 16:43
    Hendy Racher
    0

    Hi,

    That would be expected, as nuPickers will POST to that URL to get it's options.

    You mentioned that the options are 'not being retained' - does this mean the options are being returned and rendered, but items you picked are not being saved ? (can you confirm that you are not using a CSV save format)

    Can you post your full data-type configuration ?

    Thanks, Hendy

  • John Hodgkinson 613 posts 355 karma points
    Mar 03, 2017 @ 16:45
    John Hodgkinson
    0

    I actually was using CSV. I thought the Save Format option was read-only since it appears grayed-out. Should my format be json?

  • John Hodgkinson 613 posts 355 karma points
    Mar 03, 2017 @ 16:46
    John Hodgkinson
    0

    changing to JSON did the trick. awesome!

  • Hendy Racher 863 posts 3849 karma points MVP 2x admin c-trib
    Mar 03, 2017 @ 16:54
    Hendy Racher
    0

    Yes, the CSV isn't a valid save format for the Typeahead Picker, as both the key and label are required for initial rendering of any picked items. (The typeahead input text might be required to obtain the data)

    There is a GitHub issue for this.

  • John Hodgkinson 613 posts 355 karma points
    Mar 03, 2017 @ 20:46
    John Hodgkinson
    0

    Hendy - one last question, what is the easiest what to get a comma separated list of selected values? Many thanks!

  • John Hodgkinson 613 posts 355 karma points
    Mar 06, 2017 @ 13:53
    John Hodgkinson
    0

    Hendy - I believe I have something working but I doubt this is the most efficient way to get the values. AllowedRoles is my TypeAheadListPicker property on a media item. Many thanks in advance.

    AllowedRole saved value looks like: [{"key":"IND12345CH","label":"IND12345CH"},{"key":"IND12345RD","label":"IND12345RD"},{"key":"IND54321CH","label":"IND54321CH"},{"key":"IND11111CH","label":"IND11111CH"},{"key":"IND22222CH","label":"IND22222CH"}]

    //get media item
    Umbraco.Core.Services.IMediaService ms = Umbraco.Core.ApplicationContext.Current.Services.MediaService;
    Umbraco.Core.Models.IMedia m = ms.GetMediaByPath(requestURL);
    
    //get allowed roles raw value (JSON)
    _allowedRoles = jsonHelper.JsonStringToCSV(m.Properties["allowedRoles"].Value.ToString());
    
        public String JsonStringToCSV(string jsonString)
        {
            //local declares
            List<string> list = new List<string>();
    
            //create JSON object
            var dictList = JsonConvert.DeserializeObject<List<Dictionary<string, string>>>(jsonString);
    
            //iterate roles
            foreach (Dictionary<string, string> dict in dictList)
            {
                //get key pair values
                foreach (KeyValuePair<string, string> kvp in dict)
                {
                    //add value to list
                    if(!list.Contains(kvp.Value))
                        list.Add(kvp.Value);
                }
            }
    
            //return in CSV format
            return String.Join(",", list.ToArray());
        }
    
  • John Hodgkinson 613 posts 355 karma points
    Mar 06, 2017 @ 15:29
    John Hodgkinson
    0

    Actually never mind. I created a PickerItem class, deserialized the json into a List

    class PickerItem
    {
        public string key { get; set; }
        public string label { get; set; }
    }
    
        public String JsonPickerStringToCSV(string jsonString)
        {
            //local declares
            List<PickerItem> list = JsonConvert.DeserializeObject<List<PickerItem>>(jsonString);
    
            //return in CSV format 
            return String.Join(",", list.Select(x => x.key).ToArray());
        }
    
  • Hendy Racher 863 posts 3849 karma points MVP 2x admin c-trib
    Mar 06, 2017 @ 16:09
    Hendy Racher
    0

    Hi John,

    There's a built-in Picker object you can use (which has a PickedKeys property). There are some examples at: https://github.com/uComponents/nuPickers/wiki/Property-Value-Converter

    HTH, Hendy

Please Sign in or register to post replies

Write your reply to:

Draft