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

angularjs $dirty not firing when using kendo-drop-down-list

12 Answers 353 Views
DropDownList
This is a migrated thread and some comments may be shown as answers.
Enrico
Top achievements
Rank 1
Enrico asked on 24 Jul 2014, 07:10 PM
Hi everyone,

after upgrade from angular-kendo 1.0.1 and kendo v2014.1.416 to the new all in one kendo v2014.2.716 the selected value is not passed anymore to the underlying property using ng-model. After changed ng-model by using k-ng-model (that holds the typed value) form $dirty and friends not firing.

Ex:

<form name="modelForm" ng-submit="save(model)" novalidate>
...
<select kendo-drop-down-list 
k-data-text-field="'DisplayName'"
k-data-value-field="'Id'"
k-data-source="roles"
k-ng-model="model.SupplierContactRoleId"
name="SupplierContactRoleId"></select>
...
<button type="submit" class="btn green" ng-disabled="modelForm.$invalid || modelForm.$pristine"><i class="icon-ok"></i> Save</button>
...
</form>

12 Answers, 1 is accepted

Sort by
0
Mihai
Telerik team
answered on 25 Jul 2014, 08:08 AM
Hi,

ng-model works for me: http://dojo.telerik.com/@mishoo/IxAW -- if it doesn't work for you please post a simple test case that demonstrates the issue.

Indeed, the dirty flag is set by Angular when using ng-model.  It was never supported with k-ng-model.

Regards,
Mihai
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Enrico
Top achievements
Rank 1
answered on 25 Jul 2014, 10:40 AM
Hi I've been playing with your sample and I could not reproduce the error.

By the way I didn't mention that I'm using a custom directive in order to display a field block and write less code. With this version of kendo it does not work anymore. Here's the sample: http://dojo.telerik.com/uCAp

Do you see any issue in it?

I think my other post is related within the same issue because the dropdown is inserted into a directive.

Thanks,
Enrico
0
Petyo
Telerik team
answered on 29 Jul 2014, 03:38 PM
Hi Enrico,

Thank you for the provided project. It seems like the custom directive alters the scope of the widget, thus breaking its references. We will investigate this further and get back to you when we know more. You can also follow this issue in our public repository. 

Regards,
Petyo
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Mihai
Telerik team
answered on 31 Jul 2014, 09:29 AM
Hello,

I detailed the problems in this comment.  In short, we fixed a couple of issues on our side, you need to upgrade to Angular 1.2.21 and also read the note about using ng-model="test" from an isolated scope.

Hope this helps.

Regards,
Mihai
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Enrico
Top achievements
Rank 1
answered on 31 Jul 2014, 09:57 AM
Hi,

I've been looking into the workaround proposed by the angular team and it works also using kendo dropdown, but this is something that will brake a lot of my existing code. Do you think in the next version on kendo this issue will be fixed under the covers? In the oldest version of kendo this code is working properly and I'm still using that (I'd like to upgrade in order to use the new grid quick search filters that I've been waiting for so long!)

Thanks and let me know if you need more information for solving the issue,
Enrico
0
Mihai
Telerik team
answered on 31 Jul 2014, 10:57 AM
Hi Enrico,

I don't understand what exactly is the issue now, could you please detail?

As I said, with the newest AngularJS and the fixes that I pushed the dirty flag is properly set when you modify the drop down.

Regards,
Mihai
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Enrico
Top achievements
Rank 1
answered on 31 Jul 2014, 11:15 AM
Hi,

the dirty flag itself it's the last problem, because the angular databind is broken and the value changes are not reflected properly back to the model. I don't want to modify my existing and working code and use the namespace trick because of a library issue.

If you want I can create another post with the title "angular data bind issue" or simply don't upgrade to 2014 Q2

Thanks,
Enrico
0
Mihai
Telerik team
answered on 31 Jul 2014, 12:39 PM
Hello,

I'm sorry.  No need to open a different ticket, I was just confused about which of the issues you were talking about.

The data bind issue is just how Angular directives with isolated scope work (and it's intended behavior, not a bug).  I don't see how we could workaround it from our library.  As you can see in my sample, the same thing happens without Kendo UI.

I found this presentation by one of the authors of Angular, saying "whenever you have ng-model, there has to be a dot in there; if you don't have a dot, you're doing it wrong".  I'm skeptical that there is a more elegant solution, but you can try to ask for help on some Angular forum.

Regards,
Mihai
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Enrico
Top achievements
Rank 1
answered on 31 Jul 2014, 03:08 PM
Hi Mihai,

I've modified your example without kendo using a model object that contains the selected value: http://dojo.telerik.com/oqIL and it's working properly in both version of angular.

But: if I try to add kendo directive the same code with angular 1.2.16 is not working anymore: http://dojo.telerik.com/Ibaf if you use angular 1.2.21 it does.

So in my case you are right it's ok if I upgrade from 1.2.16 to 1.2.21 but, if you agree with me, kendo does something in between that causes the issue (the 2014 Q1 with external kendo directive is working with angular 1.2.16).

Said that I really appreciate your support!

Thanks again







0
Mihai
Telerik team
answered on 31 Jul 2014, 04:55 PM
Hello,

Thank you for the code samples and for the patience.

I do agree it's weird that it worked with 1.2.16 when the Angular directives were external, and not now.  You also must agree it's weird that it works with the latest Angular and Kendo, and not with Angular 1.2.16.

Actually the smallest Angular version that appears to work fine in this case is 1.2.17, so something happened in 1.2.17 that fixed this behavior -- and as well, something happened between Kendo Q1 and Q2/2014 that made it incompatible with Angular <= 1.2.16 in this particular case of isolated-scope custom directives.

I will investigate the issue further out of curiosity, but for the time being I think moving to Angular >= 1.2.17 is a good solution, isn't it?

Regards,
Mihai
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Enrico
Top achievements
Rank 1
answered on 31 Jul 2014, 05:40 PM
Hi,

I'll try to upgrade the angular version (I'm worried about something else that could be broken).

Since kendo 2014 Q2 comes with angular v1.2.16 bundled, I suggest you to update the version, so someone else can avoid having the same problem.

BR,
Enrico
0
Accepted
Mihai
Telerik team
answered on 31 Jul 2014, 06:48 PM
Hi Enrico,

We did the upgrade to 1.2.21 today.  It will be available in the next commercial build.

Regards,
Mihai
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
DropDownList
Asked by
Enrico
Top achievements
Rank 1
Answers by
Mihai
Telerik team
Enrico
Top achievements
Rank 1
Petyo
Telerik team
Share this question
or