Cascading dropdowns Check for duplicates

[Chris]

Hello.  I wanted to know exactly how to check a dynamically generated table of dropdown lists for duplicates.  so, for example, if the user selects the first dropdown in a set of 3 cascaded dropdowns, all 3 dropdowns change value, (of course they have to since they're cascaded together.).  But, if you use a standard jquery function to check for the change event on the LAST dropdown like so:

 

$("input[id$='SkillsId']").change(function () {
         var value = $(this).val();
         $("input[id$='SkillsId']").not(this).each(function () {
             if ($(this).val() == value) {
                 alert("duplicate!");
             } else {
                 alert("no dupes.");
             }
         });
     });

 

This of course, never gets fired, because they're cascaded, which is not good at all.  So, I attached a change event to the last dropdown:

 

@(Html.Kendo().DropDownList()
                  .Name("SkillsRows[" + Model.row + "].SkillsId")
                  .Value(Model.SkillsId.ToString())
                  .HtmlAttributes(new { @style = "width:31%" })
                  .DataTextField("Description")
                  .DataValueField("Id")
                  .DataSource(source =>
                  {
                      source.Read(read =>
                      {
                          read.Action("GetSkills", "Admin")
                          .Data("cba.filterSkills");
                      })
                      .ServerFiltering(true);
                  })
                  .Events(e =>
                  {
                      e.Change("cba.onSkillsIdChanged");
                  })
                  .CascadeFrom("SkillsRows_" + Model.row + "__SkillsTypeId")
                  )

 

function onSkillsIdChanged(event) {
    var value = this.element.val();
    $("input[id$='SkillsId']").not(this).each(function () {
        if ($(this).val() == value) {
            alert("duplicate!");
        } else {
            alert("no dupes.");
        }
    });
}

 

This fires the onSkillsIdChanged() event, but the alerts never appear, and I could never obtain the ID of the element that fired the event, which is not good, but they do work in a simple example with hardcoded id's.  So, exactly what is the solution?  AND, FYI, the first 2 dropdowns with the code above work fine, and I was able to obtain both the sending element ID and selected dropdown value, but NOT the last one (3rd one).  Why is that?  This is a simple example that just doesn't work, and the documentation is no help at all.  

 

Thanks

 

[Chris]

Fixed it using this:

export function onskillsIdChanged(event) {
    var currentelement = event.sender.element;
    var value = this.element.val();
    $("input[id$='skillsId']").not(currentelement).each(function () {
        if ($(this).val() == value) {
            $("#hdnskillsDuplicates").val("True");
        } else {
            $("#hdnskillsDuplicates").val("False");
        }
    });
}