This is a migrated thread and some comments may be shown as answers.

DropDownList with Virtualization for SSN

3 Answers 25 Views
DropDownList
This is a migrated thread and some comments may be shown as answers.
Dhruv
Top achievements
Rank 1
Dhruv asked on 10 Jul 2017, 09:12 PM

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?

3 Answers, 1 is accepted

Sort by
0
Veselin Tsvetanov
Telerik team
answered on 12 Jul 2017, 02:45 PM
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.
0
Dhruv
Top achievements
Rank 1
answered on 12 Jul 2017, 03:03 PM

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

0
Veselin Tsvetanov
Telerik team
answered on 14 Jul 2017, 07:21 AM
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.
Tags
DropDownList
Asked by
Dhruv
Top achievements
Rank 1
Answers by
Veselin Tsvetanov
Telerik team
Dhruv
Top achievements
Rank 1
Share this question
or