0

We've been working on a project since last 3 years. We are using Angular 1.2.6 and Kendo 2014 Version UI. Now as performance need, we wanted to migrate to Angular 1.6 and Kendo 2017 Version UI. Here we are getting the below Issues While Up-gradation.

  1. We are using Kendo Controls With ID as follows.

    select id='ddlDDLID_{{GUIDVaraible}}' kendo-drop-down-list

so we are using GUID with expression id of kendo drop down list. After Upgrading to latest version we are not getting replacing GUIDVaraible from controller. it is remaining same as string varaible of expression 'ddlDDLID_{{GUIDVaraible}}'

  1. Kendo Drop Down List was auto selecting 1st item in list till now, but after upgrading to latest version, it is not auto selecting 1st item by default.

Please Help !!!

onetwo12
  • 2,359
  • 5
  • 23
  • 34
Abdul Rahman
  • 115
  • 1
  • 9

1 Answers1

1

With regards to the first question, in Q2 2015 Kendo team introduced a breaking change in the widget initialization, which now happens synchronously, unlike before which was async. More details can be found in their documentation:

http://docs.telerik.com/kendo-ui/AngularJS/Troubleshooting/common-issues#angularjs-templates-are-not-evaluated-before-widget-initialization

In short, you will need to refrain from using HTML attributes that contains "{{ }}" Angular template. The solution is to build a custom directive with higher priority that will evaluate the template before the Kendo widget is initialized.

As to the second question, the selection behavior of the component was changed in Q1 2015 to match better how HTML Select works. More details and possible workaround is again properly documented in the Breaking Changes section:

http://docs.telerik.com/kendo-ui/backwards-compatibility/2015-backward-compatibility#changes-from-2014-q3-sp2-201431411

 <input id="dropdownlist" />
    <script>
        var widget = $("#dropdownlist").kendoDropDownList({
            dataSource: ["foo1", "foo2"]
        });

        widget.value(""); //this will clear selection

        if (widget.select() == -1) { //if value does not exist, select first one
            widget.select(0);
        }
    </script>

Check the DropDownList section for more details.

George K
  • 1,763
  • 1
  • 9
  • 17
  • With regards to the second answer, it needs to be handled globally at application level. so any ideas about handling at application level. – Abdul Rahman Sep 26 '17 at 09:35
  • I'm afraid that the available workaround works only on widget level. The only think that I can think of to make it work on app level is to modify the source. In this case, however, you will need to maintain custom code with every future upgrade. On a second thought, isn't it possible to just define index: 0 option for those dropdowns that don't have value. For those with value, ensure that the value exists in the source. The other solution is to modify the source. – George K Sep 26 '17 at 09:36