DropDownList with Virtualization for SSN

4 posts, 0 answers
  1. Dhruv
    Dhruv avatar
    10 posts
    Member since:
    Oct 2016

    Posted 10 Jul Link to this post

    I currently have a dropdown list with Virtualization which shows the dropdowns as follows "First Middle Last (XXX-XX-XXXX)". When typing in the seach box I can successfully search based on name or SSN with dashes. However I would like to be able to search on SSN without dashes. I tried attaching another property to the viewmodel sent from the lookup controller but am unable to figure out how to achieve what I want while still preserving the dashes in the UI. My thought was to catch the filter and apply regex on it serverside that if only number had been entered then to add dashes after 3rd and 5th character which would allow me get my desired output.

    Here is the View:

    01.@Html.LabelFor(model => model.VisitorID)
    02.                    @(Html.Kendo().DropDownList()
    03.                      .Name("VisitorID")
    04.                      .DataTextField("Value")
    05.                      .DataValueField("ID")
    06.                      .MinLength(2)
    07.                      .HtmlAttributes(new { style = "width:100%" })
    08.                      .Height(290)
    09.                      .Filter(FilterType.Contains)
    10.                      .DataSource(source =>
    11.                      {
    12.                          source.Custom()
    13.                              .ServerFiltering(true)
    14.                              .ServerPaging(true)
    15.                              .PageSize(80)
    16.                              .Type("aspnetmvc-ajax") //Set this type if you want to use DataSourceRequest and ToDataSourceResult instances
    17.                              .Transport(transport =>
    18.                              {
    19.                                  transport.Read("Virtualization_GetVisitor", "Lookups");
    20.                              })
    21.                              .Schema(schema =>
    22.                              {
    23.                                  schema.Data("Data") //define the [data](http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#configuration-schema.data) option
    24.                                        .Total("Total"); //define the [total](http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#configuration-schema.total) option
    25.                              });
    26.                      })
    27.                      .Virtual(v => v.ItemHeight(26).ValueMapper("VisitorLookups"))
    28.                      .NoDataTemplate("<a onclick=\"addNewEntityPartial(\'Visitor\');\">Add a new Visitor</a>")
    29.                    )
    30.                    @Html.ValidationMessageFor(model => model.VisitorID)

     

    The C# For virtualization:

    01.#region VisitorLookup
    02.            public ActionResult Virtualization_GetVisitor([DataSourceRequest] DataSourceRequest request)
    03.            {
    04.                return Json(GetVisitor().ToDataSourceResult(request));
    05.            }
    06.            public ActionResult Visitor(int[] values)
    07.            {
    08.                var indices = new List<int>();
    09. 
    10.                if (values != null && values.Any())
    11.                {
    12.                    var index = 0;
    13. 
    14.                    foreach (var visitor in GetVisitor())
    15.                    {
    16.                        if (values.Contains(visitor.ID))
    17.                        {
    18.                            indices.Add(index);
    19.                        }
    20. 
    21.                        index += 1;
    22.                    }
    23.                }
    24.                return Json(indices, JsonRequestBehavior.AllowGet);
    25.            }
    26. 
    27.            private IQueryable<LookupViewModel> GetVisitor()
    28.            {
    29.                var ro = User.IsInRole("ReadOnly");
    30.            return db.Visitors.Select(visitor => new LookupViewModel
    31.            {
    32.                ID = visitor.ID,
    33.                Value = (visitor.Flag == true ? "FLAGGED " : "") +
    34.                        visitor.FirstName + " " +
    35.                        visitor.MiddleName + " " +
    36.                        visitor.LastName +
    37.                        " (" + (ro ? "XXX-XX-XXXX" : visitor.SSN.Replace("-", "")) + ") " +
    38.                        (visitor.Flag == true ? "FLAGGED" : ""),
    39.                SSN = (ro ? "XXX-XX-XXXX" : visitor.SSN.Replace("-", ""))
    40.                });
    41.            }
    42.            #endregion

     

    I feel like I'm very close but am not quite sure how to modify the filter in the request on line 4 (second snippet) to achieve what i want.

    Below was the path I was on:

    01.public ActionResult Virtualization_GetVisitor([DataSourceRequest] DataSourceRequest request)
    02.        {
    03.            Regex regex = new Regex(@"[\d]");
    04.            foreach (var filter in request.Filters)
    05.            {
    06.                if (regex.IsMatch(((FilterDescriptor)filter).ConvertedValue.ToString()))
    07.                {
    08. 
    09.                    if (((FilterDescriptor)filter).Value.ToString().Length > 2)
    10.                    {
    11.                        ((FilterDescriptor)filter).Value.Insert(2, "-");
    12.                    }
    13.                    if (((FilterDescriptor)filter).Value.ToString().Length > 4)
    14.                    {
    15.                        ((FilterDescriptor)filter).Value.Insert(4, "-");
    16.                    }
    17.                }
    18.            }
    19.            return Json(GetVisitor().ToDataSourceResult(request));
    20.        }

    But that does not compile since Insert can't be made on a Object.

     

    Any help?

  2. Veselin Tsvetanov
    Admin
    Veselin Tsvetanov avatar
    590 posts

    Posted 12 Jul Link to this post

    Hi Dhruv,

    I would suggest you instead of altering the filter and the filtered items to use the DropDownList templates. This way you could easily display in the UI all the needed fields from each item, while keeping the viltering functionality by the DataTextField. Possible implementation in your case could be to introduce ItemTemplate and ValueTemplate for each item:
    @(Html.Kendo().DropDownList()
        .Name("VisitorID")
        .DataTextField("Value")
        .Template("<span>#: data.Flagged #</span>" +
                  "<span>#: data.FirstName #</span> " +
                  "<span>#: data.MiddleName #</span> " +
                  "<span>#: data.LastName #</span> " +
                  "<span>#: data.SSN #</span> " +
                  "<span>#: data.Flagged #</span>")
        .ValueTemplate("<span>#: data.Flagged #</span>" +
                  "<span>#: data.FirstName #</span> " +
                  "<span>#: data.MiddleName #</span> " +
                  "<span>#: data.LastName #</span> " +
                  "<span>#: data.SSN #</span> " +
                  "<span>#: data.Flagged #</span>")
        .DataValueField("ID")
    .....

    While altering the returned data to the view:
    var result = data.Select(visitor => new LookupViewModel
    {
        ID = visitor.ID,
        FirstName = visitor.FirstName,
        MiddleName = visitor.MiddleName,
        LastName = visitor.LastName,
        Value = (visitor.Flag == true ? "FLAGGED " : "") +
                visitor.FirstName + " " +
                visitor.MiddleName + " " +
                visitor.LastName +
                " (" + (ro ? "XXX-XX-XXXX" : visitor.SSN.Replace("-", "")) + ") " +
                (visitor.Flag == true ? "FLAGGED" : ""),
        Flagged = visitor.Flag == true ? "FLAGGED" : "",
        SSN = (ro ? "XXX-XX-XXXX" : visitor.SSN)
    });

    Attached you will find a small sample, implementing the above.

    Regards,
    Veselin Tsvetanov
    Progress Telerik
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Dhruv
    Dhruv avatar
    10 posts
    Member since:
    Oct 2016

    Posted 12 Jul in reply to Veselin Tsvetanov Link to this post

    Hey Veselin,

    Thanks for the quick responce. I could see how changing my setup to this would be useful however my issue was with the fact SSN has -'s when stored in DB but users want to search without the dashes and see results with the -. I was able to resolve this in a way which allows me to continue using my method since I have multiple views using this dropdown control and don't want to have to have a template on the control which makes it harder to maintatin changes since you have to update it in multiple places and its not strongly typed so you could easily miss updating controls. My solution is outligned below for future reference:

    Below is my helpers class I use for these weird 1 off kendo fixes:

    01.public class KendoHelpers
    02.    {
    03.         
    04.        public void SSNSearchFilter(IEnumerable<IFilterDescriptor> filters) {
    05.            Regex regex = new Regex(@"^[0-9]+$");
    06.            foreach (var filter in filters)
    07.            {
    08.               if (regex.IsMatch(((FilterDescriptor)filter).ConvertedValue.ToString()))
    09.                {
    10. 
    11.                    if (((FilterDescriptor)filter).Value.ToString().Length > 3)
    12.                    {
    13.                        ((FilterDescriptor)filter).Value = ((FilterDescriptor)filter).Value.ToString().Insert(3, "-");
    14.                    }
    15.                    if (((FilterDescriptor)filter).Value.ToString().Length > 6)
    16.                    {
    17.                        ((FilterDescriptor)filter).Value = ((FilterDescriptor)filter).Value.ToString().Insert(6, "-");
    18.                    }
    19.                }
    20.            }
    21.        }
    22.    }

    Below is the changes to the Virtualization class so SSN's can be typed with or without dashes

    1.public ActionResult Virtualization_GetVisitor([DataSourceRequest] DataSourceRequest request)
    2.        {
    3.            new KendoHelpers().SSNSearchFilter(request.Filters);
    4.            return Json(GetVisitor().ToDataSourceResult(request));
    5.        }

     

     

     

    This solution allows for one location having all my dropdowns values meaning if I change the lookups formatting it applies to any dropdown using this endpoint which is easier to maintain. I am now able to search 123-12-1234 or 123121234 and they will both show the correct results

  4. Veselin Tsvetanov
    Admin
    Veselin Tsvetanov avatar
    590 posts

    Posted 14 Jul Link to this post

    Hello Dhruv,

    Thank you for the follow-up and for the suggested implementation which covers the discussed scenario.

    You are perfectly right, that using templates would make the DropDownList helpers a bit harder to maintain. Therefore, altering the filtering functionality on the server, as you did, would be suitable approach for this case.

    Regards,
    Veselin Tsvetanov
    Progress Telerik
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top