DropDownList with Virtualization for SSN

[Dhruv]

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:

[e-mail](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.        }

[Veselin Tsvetanov]

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

[Dhruv]

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

[Veselin Tsvetanov]

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