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

Cascading Dropdowns No Longer Work with Angular and Dynamic Ids

12 Answers 157 Views
DropDownList
This is a migrated thread and some comments may be shown as answers.
Scantron-Morrisville
Top achievements
Rank 1
Scantron-Morrisville asked on 25 Aug 2015, 02:24 PM

When updating to 2015.2.805, we've discovered a NUMBER of  problems with our usage of Angular and Kendo.  We regularly update, and have had no problems previously.  We're hoping we can get some answers as to the problem.

 

We have a dynamic list of cascading dropdowns that we use in an ng-repeat.  The number of levels can change, which is why it's dynamic.  We've used this without issue until the latest release.  The problem seems to be around CascadeFrom.  When targeting an ID that is generated dynamically, as a part of a binding, it simply doesn't work anymore.

 

I've included two examples.  The only difference is the Kendo version.

 Using Q1:

http://dojo.telerik.com/eqUpI/13

Using Q2 (broken)

http://dojo.telerik.com/eqUpI/14 

 

What's the problem?

12 Answers, 1 is accepted

Sort by
0
Georgi Krustev
Telerik team
answered on 27 Aug 2015, 11:05 AM
Hello Grant,

In Q2 2015 (v2015.2.624+), we changed the widgets initialization approach and thus boost the initialization time. Basically, before the widgets were initialized with setTimeout, which now is removed. The result is that the widgets are initialized instantly and they don't wait for the HTML to be modified by AngularJS.

Generally speaking, scenarios where the id/name fields were modified with Angular templates ({{ field }}) are not supported. It worked by chance because of the used setTimeout.

The best solution in this case is to avoid using "{{ }}" syntax in the id/name attributes. If dynamic update of ID fields is a must, then you will need to force the widgets initialization delay manually. One possible option is to use k-ng-delay mapped to some field that is updated with setTimeout.

Regards,
Georgi Krustev
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Pascal
Top achievements
Rank 1
answered on 27 Aug 2015, 12:50 PM
That's exactly the kind of information I would expect in release notes. What you currently provide is kinda useless, and its quite ​frustrating to find about such changes after countless hours of debugging and searching in the depth of some forum thread...
0
Scantron-Morrisville
Top achievements
Rank 1
answered on 27 Aug 2015, 12:57 PM

I agree with Pascal, this FUNDAMENTALLY changes your Angular "support".  You use Angular directive attributes as part of your supported implementation (k-whatever), so one would more than reasonably assume that using basic angular directive attributes alongside Kendo would work as well.  We're seeing all sorts of problems throughout our application because of this change, and no noticeable increase in load performance.  In fact, the perceived load time is slower, because now instead of the initialization waiting until the basic DOM has been rendered, the Kendo JS begins rendering while there are many operations still occurring.

Would Telerik at least consider allowing an override attribute that's not a hack like using k-ng-delay?

0
Scantron-Morrisville
Top achievements
Rank 1
answered on 27 Aug 2015, 01:00 PM
It's also worth noting that this pretty much renders ANY non Kendo specific directive attributes useless.  Any directive attribute that uses a binding has stopped working.  ng-style no longer works, so instances where width has been specified do not work anymore.  I don't see how this isn't simply a bug.
0
Petyo
Telerik team
answered on 31 Aug 2015, 12:03 PM

Hello Pascal/Grant,

the change we have introduced did not break any of our existing demos or documented supported cases. I do agree with you - in hindsight we should have announced it somehow. However, the description would be extremely vague and unhelpful; the change we have introduced breaks cases we are not even aware of, nor have ever recommended as an approach. Nevertheless, we do our best to provide the necessary assistance with each case. 


I would also like to address some principal problems with the approach in question. Each Kendo UI Widget should be the sole owner, modifier, and event handler of its DOM fragment. Using angular expressions in the markup has worked initially, but will definitely introduce erratic behavior with changes happening after the widget instantiation. The widget can't react to them accordingly (by re-decorating the changed markup, recalculating necessary sizes, etc).

The recommended way to do such changes should be applied through each widget API/configuration options, which we consider quite extensive. 

In case you believe that the change has introduced a performance regression in certain cases, please isolate it in a runnable case, using our Dojo service. Obviously, we will need to compare that with the performance before the change, too. Please make sure that you include the profiling results from your investigation.

Finally, I would also like to point out that in many cases wrapping our widgets in custom, project specific directives is the way to go. Doing so provides a clean, simplified directive catalog to work with. The standard directives we ship aim to cover a wide variety of cases, which the developers in your projects may not need. 

Regards,
Petyo
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Pascal
Top achievements
Rank 1
answered on 31 Aug 2015, 12:31 PM

Not surprisingly considering the complexity of your demos... Also mentioning that it is not recommended is also quite a lame excuse, since you also haven't documented that it shouldn't be used.

The problem IMHO is that you're widgets are jQuery plugins and not real Angular directives​. The reasoning for Angular directives ​seems to be mainly for marketing purposes and your wrappers don't really fit into the Angular architecture.

For example all the countless cases where you suggest that the way to go is to use the widget API, even for simple cases like disabling controls, doesn't make any sense for angular applications. Instead ​of using a declarative approach, we need to write quite a bunch of code in each controller (determine the jQuery instance of the widget, adding watches, calling API)

Also if you expect us to build custom directives around your widgets also for very simple cases just shows that it might be easier to just use another control library which either is build from the ground for Angular, contains professional-grade Angular wrapper, or even write wrappers myself for some jQuery plugins if it also ends like this with Kendo UI...

0
Scantron-Morrisville
Top achievements
Rank 1
answered on 02 Sep 2015, 02:57 AM

I can appreciate the technical issues with managing changes by factors outside the plugin.  The problem for us is that the demos are often fairly trivial, so one tends to extrapolate behavior based upon the norms of the framework in use.  

In Angular, there are very specific patterns at work, and so, lacking more complete examples using Angular behavior, one would reasonably assume that standard Angular patterns and practices will prevail.  I would not expect to have to look to see if using a directive the way directives are intended to be used is "recommended" by Telerik, I would instead expect to find explicit warnings to the contrary if they exist, which is not something I've seen.

If that were made clear, we would have started out by wrapping Kendo controls in directives ourselves, but without knowing about these limitations, we acted based on good faith of expected behavior, and for the most part, the fact that these techniques worked quite well until the current release is reaffirming evidence.

Our "upgrade" is almost complete.  It's cost a team of 5 about 6 days to correct in a fairly complicated Single Page Application with dozens of views and complex states/behaviors.

 I think it would be beneficial to other clients for these limitations to be front and center in the documentation, as they are VERY large caveats in how one would naturally expect a directive to behave.

Future releases would be greatly benefited by details on changes to Angular binding behavior, we'd appreciate notes in the next release that affects them.

 

0
Petyo
Telerik team
answered on 02 Sep 2015, 08:25 AM

Hello Grant,

Thank you very much for keeping the discussion on the necessary constructive level. I am in complete agreement with you, we need a help topic of dos and don'ts that warn our users of such "dangerous" techniques which just might work. Interestingly enough, the same concept problem applies to our MVVM implementation, and is quite a common pitfall. 

Our long term plans are going to address to the major concerns most of our AngularJS users express - the ability to bind the entire widget state/configuration options to a view model, and have an automatic, two-way binding. This should effectively eliminate the need to reach for the widget instance via jQuery, as changes to the $scope object will automatically update the widget accordingly. Currently, this behavior is limited to the widget value() being mapped to the ng-model option. 

Regards,
Petyo
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Patrick
Top achievements
Rank 1
answered on 05 Nov 2015, 09:37 PM

Does this same issue occur when using MVVM and kendo template? 

I have the below template and can see the ajax call suceeding and returning the expected values but the drop down does not populate with those values. 

Template:

<script type="text/x-kendo-template" id="eapRatesTemplate">
    <div>
        <div>
            <span class="bms-mandatory">*</span>
            <span class="bms-bold req">Who is covered under this program?</span><br />
            <select id="eapCovType_#=RowGuid#" class="readonlymodesupport" data-role="dropdownlist" data-text-field="Name" style="width: 300px;" data-option-label="@CodeConstants.PleaseSelectText"
                    data-value-field="Id" data-value-primitive="false" data-bind="source: AvailableEapCoverageTypes, value: EapCoverageType"></select>
        </div>
        <br />
        <div id="billingOpt">
            <span class="bms-mandatory">*</span>
            <span class="bms-bold req">Select billing option:</span><br />
            <select id="rateAnswer_#=RowGuid#" style="width: 300px;" class="readonlymodesupport"
                    data-value-primitive="false"
                    data-option-label="@CodeConstants.PleaseSelectText"
                    data-role="dropdownlist"
                    data-cascade-from="eapCovType_#=RowGuid#"
                    data-value-field="Id"
                    data-text-field="Name"
                    data-auto-bind="false"
                    data-cache="false"
                    data-bind-value="RateAnswer"
                    data-bind-source="eapRateAnswerDataSource"></select>
        </div>
        <br />
        <div id="rateTextEAP">
            <span class="bms-bold req">Enter rate:</span><br />
            $ <input class="readonlymodesupport" onfocus="this.select()" data-           format="n2" data-decimals="2" data-max="100000" data-role="numerictextbox" data-spinners="false" data-bind="value: RateText" />
        </div>
    </div>
</script>

0
Georgi Krustev
Telerik team
answered on 09 Nov 2015, 12:41 PM
Hello Patrick,

Probably, the issue is somewhere else. Could you send us a repro demo that we could analyze further? Also you can test with the latest official of Kendo UI before start preparing a repro demo.

Regards,
Georgi Krustev
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Pablo
Top achievements
Rank 1
answered on 15 Jan 2016, 10:13 PM

Has anybody come up with a solution for this problem?

I'm using the angularjs approach with the dynamic ids and have spent over 3 days now trying to get it to work with countless workarounds and have not been successful to accomplish such a trivial task.

I sent a support ticket and all they came back with is to wrap the control in a custom directive and give it a higher priority... didn't work.

I'm so frustrated....

0
Scantron-Morrisville
Top achievements
Rank 1
answered on 15 Jan 2016, 10:18 PM

Pablo, our solution is pretty much what was suggested.  Abandon the Angular implementation, and instead just create a directive that uses the Kendo control internally as though it were the vanilla javascript version.  That allows you to control the binding flow, which essentially solves the problem.  We've found since this update, using Kendo's angular directives is basically useless for all but the most trivial use cases - which is rather unfortunate as it was a main selling point.  That said, once we bit the bullet and wrote our own directives, we've had very few issues.

We're not happy, but at least it works...

Tags
DropDownList
Asked by
Scantron-Morrisville
Top achievements
Rank 1
Answers by
Georgi Krustev
Telerik team
Pascal
Top achievements
Rank 1
Scantron-Morrisville
Top achievements
Rank 1
Petyo
Telerik team
Patrick
Top achievements
Rank 1
Pablo
Top achievements
Rank 1
Share this question
or