Not allowing duplicate values

12 posts, 0 answers
  1. srinivas
    srinivas avatar
    21 posts
    Member since:
    May 2012

    Posted 26 Oct 2012 Link to this post

    Hi,

    I am using kendo ui autocomplete widget. In that i am able to select multiple values in the autocomplete. The values have been coming 
    from database. What i need is i don't want to allow duplicate values. i.e when i select orange from fruits. Then next time orange will
    not be visible in the autocomplete. I have tried different methods. How can i able to do this.
    I hope you guys understand my question.


    Thanks and Regards,
    srinivas
  2. Peter
    Peter avatar
    10 posts
    Member since:
    Jul 2012

    Posted 30 Nov 2012 Link to this post

    We also need this functionality.
  3. Kendo UI is VS 2017 Ready
  4. Burke
    Burke avatar
    41 posts
    Member since:
    Jun 2009

    Posted 30 Nov 2012 Link to this post

    Hi srinivas!

    Would you mind posting a bit of your code?  I'm interested because the AutoComplete doesn't currently support multiple selection AFAIK.  Do I misunderstand the question?

    If you are saying that you need this functionality, we do have a Facebook style "Multi Select" coming in Q1 next year.

  5. Peter
    Peter avatar
    10 posts
    Member since:
    Jul 2012

    Posted 30 Nov 2012 Link to this post

    http://demos.kendoui.com/web/autocomplete/index.html

    you can choose Albania twice here.
    We want Albania to not be an option the second time around
  6. Burke
    Burke avatar
    41 posts
    Member since:
    Jun 2009

    Posted 30 Nov 2012 Link to this post

    Peter

    In this case, you can get the values from the AutoComplete and then add them to the filter object.

    transport: {
       parameterMap: function(options, operation) {
              
        // get a reference to the autocomplete
        var autoComplete = $("#titles").data("kendoAutoComplete");
                 
        // split the values into an array
        values = autoComplete.value().split(", ");
                 
        // pop off the last one as its not a selected value
        values.pop();
         
        // loop through the selected values and add them to
        // the filter criteria to be sent to the server as 'neq' (not equal)
        $.each(values, function(index, item) {
          options.filter.filters.push({ field: "Name", ignoreCase: true, operator: "neq", value: item });
        });
                 
        // convert the options to odata for netflix. for normal json,
        // just return options
        return kendo.data.transports.odata.parameterMap(options);
       }
    }
    Here is a working example in jsbin.

    http://jsbin.com/oqucix/2
  7. Peter
    Peter avatar
    10 posts
    Member since:
    Jul 2012

    Posted 30 Nov 2012 Link to this post

    in our case where we are not using serverside filtering, can you provide sample code for that case please?
  8. Burke
    Burke avatar
    41 posts
    Member since:
    Jun 2009

    Posted 03 Dec 2012 Link to this post

    Hi Peter!

    I came up with an "interesting" solution for this one.  They key here is that we need to make the DataSource read every time the AutoComplete is triggered.  The way that this is normally done is to add serverFiltering: true to the DataSource.  This appears to have no effect on local data and that makes sense.  You don't "server filter" local data.

    I figure you have a two options here.  Handle the "blur" on the input and then trigger the DataSource to read again passing the filters.  However, you also need to account for the minimum value and handle the parsing of multiple values - something the AutoComplete is already doing under the covers.

    To leverage that, I created a custom transport on the DataSource which then wraps all the logic from the previous example and creates a new DataSource which is read from and then filtered.

    The new AutoComplete ends up looking like this:

    // create a datasource bound to the local data    
    var countriesDS = new kendo.data.DataSource({
      data: countries
    });
      
    var getFilters = function(filter) {
     
      // create an empty array
      var filters = [];
     
      // add the default autocomplete filter to the filters array
      filters.push(filter);
     
      // split the values into an array
      values = autoComplete.value().split(", ");
     
      // pop off the last one as its not a selected value
      values.pop();
               
      // loop through the selected values and add them to
      // the filter criteria to be sent to the server
      $.each(values, function(index, item) {
        filters.push({ field: "", ignoreCase: true, operator: "neq", value: item });
      });
     
      return filters;
    };
     
    var autoComplete = $("#auto").kendoAutoComplete({
      minLength: 3,
      separator: ", ",
      dataSource: {
        transport: {
          read: function(options, operation) {
     
            // read from the local datasource
            countriesDS.read();
     
            // filter the local datasource
            countriesDS.filter({ logic: "and", filters: getFilters(options.data.filter.filters[0]) });
     
            // pass the result of the local data source to the options
            // success method
            options.success(countriesDS.view());
          }
        },
        serverFiltering: true
      }
    }).data("kendoAutoComplete");

    And here is working example...

    http://jsbin.com/oqucix/4/
  9. Peter
    Peter avatar
    10 posts
    Member since:
    Jul 2012

    Posted 04 Dec 2012 Link to this post

    Thanks!
    It works for us :)
  10. Gabriel
    Gabriel avatar
    4 posts
    Member since:
    Oct 2013

    Posted 17 Jul 2014 Link to this post

    Hey All,
    I'm having an issue with the autocomplete control suggesting duplicate values.  I am implementing it for a Search function in a Razor view in an MVC project.  The collection I pass to the autocomplete has duplicate values or names that I want to remove.  However, whenever I filter them, the autocomplete displays no suggestions as if the Iqueryable object I'm passing to it is empty.  I've tried calling distinct, using a lamda expression, and distinct passing a Comparer class all to the same results.  I thought you might have a suggestion as to how I can solve this problem.  The code I'm using and or was trying and is now commented is posted below.

    View:
    <div class="DCF">
        <span>DCF DB</span>
        @(Html.Kendo().AutoComplete()
            .Name("dcfSearchBox")
            .DataTextField("Keyword")
            .Filter("contains")
            .MinLength(3)
            .HtmlAttributes(new { style = "width:250px" })
            .DataSource(source =>
            {
                source.Read(read =>
                {
                    read.Action("DCFSearch", "Search").Data("onAdditionalData");
                })
                .ServerFiltering(true);
            })
        )
     
        @(Html.Label("Filter Text"))
        @(Html.CheckBox("dcfCheckFilter"))@(Html.TextBox("dcfFilterText"))
    </div>
     
    <script>
        function onAdditionalData() {
            return {
                text: $("#dcfSearchBox").val()
            };
        }
    </script>

    Controller:
    public JsonResult DCFSearch(string text)
            {
     
                DCFDBContext dcf = new DCFDBContext("DCFEntities");
     
                var results = dcf.Keywords.Select(row => new SearchViewModel
                {
                    Keyword = row.Name//,
                    //Tablename = row.TableName,
                    //Id = row.IdNumber.ToString()
                })
                .Where(r => r.Keyword.Contains(text))
                .Distinct(new DistinctSVMComparer())
                .Take(50);
     
                //var filteredResults = results.GroupBy(x => x.Keyword).Select(y => y.First());//.Distinct(new DistinctSVMComparer());
                 
                /*if (!string.IsNullOrEmpty(text))
                {
                    results = results.Where(r => r.Keyword.Contains(text)).Distinct().Take(50);
                }*/
     
                return Json(results, JsonRequestBehavior.AllowGet);
            }

    Comparer Class:
    namespace TestingTelerikMvcApp.Models
    {
        public class SearchViewModel
        {
            public string Keyword { get; set; }
            public string Tablename { get; set; }
            public string Id { get; set; }
     
        }
     
        class DistinctSVMComparer : IEqualityComparer<SearchViewModel>
        {
            public bool Equals(SearchViewModel x, SearchViewModel y)
            {
                return x.Keyword != y.Keyword;
            }
     
            public int GetHashCode(SearchViewModel svm)
            {
                return svm.Keyword.GetHashCode();
            }
        }
    }

    Any help appreciated.
    Thanks!
    Gabe
  11. Gabriel
    Gabriel avatar
    4 posts
    Member since:
    Oct 2013

    Posted 17 Jul 2014 in reply to Gabriel Link to this post

    UPDATE:
    Reducing my view model class to the one column (keyword) and calling .Distinct() is working for removing the duplicates.  Also note there was an error in the code I posted in the comparer class comparing != instead of ==, was just doing a crazy test trying to get any results returned to the autocomplete when I try one of the manual filtering options.  Those still don't work.  I'm not sure why.
    Thanks
    Gabriel
  12. Georgi Krustev
    Admin
    Georgi Krustev avatar
    3707 posts

    Posted 22 Jul 2014 Link to this post

    Hello Gabriel,

    Could you please elaborate a bit more on what still does not work? It will be very helpful if you can provide  a runnable test project, which reproduces the problem. Thus we will be able to proceed much faster with our investigation.

    Regards,
    Georgi Krustev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  13. Gabriel
    Gabriel avatar
    4 posts
    Member since:
    Oct 2013

    Posted 22 Jul 2014 in reply to Georgi Krustev Link to this post

    Hey Georgi,
    Thanks for the response!  I now am properly filtering out duplicate values that I am sending to the autocomplete control.  Below is the code that is working.  Simply calling .Distinct() is working to remove duplicates.  This was the first method I tried which I thought wasn't working but the error was in my test cases.  I had cases that had an extra space between to strings, so at first glance I didn't see the difference between the two values and thought there were duplicates, thus the call to .Replace() you see now.  

    In continuing to problem solve, when the error was in my test cases, I proceeded to try using the above comparer class passed as parameter to .Dinstinct(new DistinctSVMComparer()) and I also tried the above commented line, lamda expression to filter out duplicates from my collection before passing to the autocomplete.  Both of these methods resulted in no results/suggestions displayed from the autocomplete control as if I were passing an empty collection.  This is still what I don't know why it wouldn't work.  Unfortunately I don't have time to provide a complete runnable test project as I cannot provide what I'm working with due to sensitive data, and there is a substantial amount of pieces. I'm using entity framework in an mvc project connected to a sql database.  Regardless, I believe the error to be in my code in these errors and not with the Kendo Autocomplete control.

    Thanks
    Gabriel

    Controller:
    public JsonResult DCFSearch(string text)
            {
     
                DCFDBContext cares = new DCFDBContext("CARESEntities");
     
                var results = cares.Keywords.Select(row => new SearchViewModel
                {
                    Keyword = row.Keyword.Trim().Replace("  ", " ")
                })
                .Where(r => r.Keyword.Contains(text))
                .Distinct()
                .Take(50);
     
                return Json(results, JsonRequestBehavior.AllowGet);
            }
Back to Top
Kendo UI is VS 2017 Ready