Combo box events are firing two times

[pogula]

Hi,

i am facing issue with Kendo Combo boxes, where the Change event is getting fired two times, please find the below code.

<table>
                            <tr id="controls">
                                <td>
                                    <label id="lbl1">Config Type:</label>
                                </td>
                                <td>

                                    @(Html.Kendo().ComboBox()
                                        .Name("cmb_configType")
                                        .HtmlAttributes(new { @class = "fieldentertext", required = "required", style = "width:85%;", validationmessage = "" })
                                        .Placeholder("Select Config Type...")
                                        .DataTextField("ConfigTypes")
                                        // .DataValueField("Names")
                                        .Filter(FilterType.Contains)

                                                .Events(e =>
                                                {
                                                    e.Change("OnChange_ConfigType");
                                                    //.Select("OnSelect_Config")
                                                    //.Open("OnOpen_Config")
                                                    //.Close("OnClose_Config")
                                                    //.DataBound("OnDataBound_Config")
                                                    //.Filtering("OnFiltering_Config");
                                                })
                                                                            )


                                </td>
                                
                                <td>
                                    <label id="lbl3">Config Name:</label>
                                </td>
                                <td>
                                   
                                    @(Html.Kendo().ComboBox()
                                .Name("cmb_confignames")
                                .HtmlAttributes(new { @class = "fieldentertext", required = "required", style = "width:85%;", validationmessage = "" })
                                .Placeholder("Select Config Name...")
                                .DataTextField("ConfigNames")
                                // .DataValueField("Names")
                                .Filter(FilterType.Contains)

                                        .Events(e =>
                                        {
                                            e.Change("OnChange_ConfigNames");
                                            //.Select("OnSelect_Config")
                                            //.Open("OnOpen_Config")
                                            //.Close("OnClose_Config")
                                            //.DataBound("OnDataBound_Config")
                                            //.Filtering("OnFiltering_Config");
                                        })
                                                                    )
                                </td>
                                <td>
                                    <button class="btn-brdr" id="btnctrl">+</button>
                                </td>
                                
                            </tr>
                        </table>

 

i am creating two combo boxes 1. Config Type 2. Config Name

when user clicks on first combo, based on the selection i am loading data to second combo box.

when User clicks on Second Combo box(Config Name), It is firing the event for(Config Type) once again and then it is firing event for(Config Name), Why it is firing event for First combo box, when i select on Second combo box?

And also i observed that, if i click on any where in the page these two events are firing, What is wrong in this code?

Here are my fucntions which gets hit on event.

function OnChange_ConfigType(obj)

{

---------------------

}

function OnChange_ConfigName(obj)

{

--------------------

}

 

Please help on this.

 

[Eduardo Serra]

Hello Pogula,

The observed behavior is related to a recently discovered bug in the Kendo UI ComboBox, which can be reproduced with the 2018 R1 release (2018.1.117). I am happy to inform you, that the bug has been fixed by our development team and the fix will be available with the next Service Pack, which is scheduled to be released at the end of this month. 

The fix is also included in the Latest Internal Build (released each week with the latest hotfixes), which can be downloaded from your Telerik Profile by navigating to Downloads -> Telerik UI for ASP.NET MVC and then select the Iternal Builds tab.

Thank you for your understanding.

I hope this helps.

Regards,
Eduardo Serra
Progress Telerik

[pogula]

Hi,

i have got the Latest Telerik update, but still i am facing the above mentioned issue with combo boxes and Kendo grid, Please help on this.

[Eduardo Serra]

Hello Pogula,

The fix was added to version  2018.1.221; can you confirm that's the one you're currently using?

Thank you.

Regards,
Eduardo Serra
Progress Telerik

[pogula]

Hi,

Yes, i am using the version you mentioned.

please find the attached snapshot.

Thanks,

Phani.

 

[Eduardo Serra]

Hello Pogula,

Thank you for updating to the latest version of Kendo UI in order to verify if the mentioned bug was causing the described behavior.

In order for us to offer you the best support possible, please share with us an isolated runnable sample that reproduces the issue so we are able to debug it and take a closer look at the code in order to find the problem.

Thank you.

Regards,
Eduardo Serra
Progress Telerik

[pogula]

Hi,

Please find the attached files, where i am creating the kendo combo boxes in .cshtml files and the actions are written in .JS file.

i am attaching both files here. But i am calling api functions to load the data in to combo boxes. You can ignore that calling Api and loading data, (Or you can use your own functions to load data)

The problem is when user clicks on the second combo box, The event related to the First combo box is raising again.

The same way when user clicks on any other button on UI also Combobox event is raising again.

Hope you will understand with this sample.Please let me know, any other information is required.

 

 

 

 

 

[Ivan Danchev]

Hi Pogula,

I attached a sample runnable MVC project, in the Index view of which I added the 2 ComboBoxes. In their change event handlers however there are calls to missing functions and other dependencies, so I commented them out. Since they do not contain any data initially I configured them to load sample data from the Home controller:

.DataSource(source =>
{
    source.Read(read =>
    {
        read.Action("GetConfigTypeData", "Home");
    });
})

If you run the example you will notice that with the custom logic in the change event handlers commented a selection in the second ComboBox does not cause the first one's change event to fire.
Could you modify the example accordingly so that problematic behavior is exhibited and attach it back for further review?

Regards,
Ivan Danchev
Progress Telerik

[pogula]

HI,

Thanks for your information.

i have observed simple changes in your sample.

1. Moved event handlers functions in to Index files, If i move this i am facing some issues.

2. Added .DataSource to read default data to combo boxes, i don't have default data to load to second combo box, Based on the selection happen to first combo box, i will load the data from controller and add the data to data source of second combo box(What is wrong in this in .JS files?).

Please let me know, what is wrong i am doing in my code? why the first combo box event is raising after clicking on second combo box?

How this issues get resolved with the solution you provided? 

 

 

[Nencho]

Hello Pogula,

Regarding your first question - I am not quite sure about the exact steps for replication that you last described. Could you specify where exactly you want us to move the functions - "handlers functions in to Index files" Currently, they are located n the index.cshtml.

As for your second - it would be best if you could modify the provided sample project, so we could examine the exact behavior and pin down the reason for it.

Also, please provide us with exact steps for replication of the issue. Regarding your last question - why the first combo box event is raising after clicking on second combo box? - it is expected for the event to be triggered, once the widget is blurred. In other words, if toy navigate with the keyboard to a certain item, and then you click on the second combobox - the blur event is triggered and this, on the other hand, triggers the change event of the first combobox.

Regards,
Nencho
Progress Telerik

[pogula]

Hi,

Thanks for your replay, i have done the code changes as suggested by you.

i am able to resolve the issue, i.e (first combo box event is raising after click on the Second Combo box), But i have added new combo box on the OnChange event of second combo box, But issue of second combo box event raising after click on third on third combo box..

How to resolve this issue, please suggest.

i have attached the changed code.

 

[Ivan Danchev]

Hi Pogula,

I checked the changes you posted in the sample project I attached previously and there are two modifications that I made in order to avoid the second ComboBox' change event firing when clicking on the third ComboBox:

1. First I changed the element with id "ptrncmb" from td to input (in the GenerateAlamrGrid function). Since you are initializing a ComboBox from that element it should be an input element, so from:

$("#pane1").append('<td><label id="lblptrnname">PatternName:</label></td><td id ="ptrncmb" width:30px></td>');

to:

$("#pane1").append('<td><label id="lblptrnname">PatternName:</label><input id="ptrncmb"/></td>');

2. In the OnChange_ConfigTypes function when adding new items to the ConfigNames ComboBox they should have both the DataTextField and DataValueField fields set, so I added the Values field. The change is highlighted below:

function OnChange_ConfigTypes(obj)
{
    console.log("configTypes change");
    var grid = $('#cmb_confignames').data("kendoComboBox");

    for (var i = 0; i < ConfigNames.length; i++) {
        grid.dataSource.add({ ConfigNames: ConfigNames[i], Values: ConfigNames[i] });
    }
}

Regards,
Ivan Danchev
Progress Telerik

[pogula]

Hi,

Thanks for the information, issue has been fixed how.

 

[pogula]

Hi,
Thanks for the information, issue has been fixed now.