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

[Enrico]

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>

[Mihai]

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

 

 

[Enrico]

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

[Petyo]

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

 

 

[Mihai]

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

 

 

[Enrico]

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

[Mihai]

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

 

 

[Enrico]

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

[Mihai]

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

 

 

[Enrico]

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

[Mihai]

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

 

 

[Enrico]

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

[Mihai]

Hi Enrico,

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

Regards,
Mihai
Telerik