Add new Item with AngularJS

[Marc]

Im trying to create a dropdown list where I can add new items. However - the function inside the noDataFound template needs to be an AngularJS function. Is there any way to do this? Code is below:

<select id="layout"
kendo-drop-down-list
style="width: 230px; font-size:10pt !important;"
k-ng-model="selectedLayout"
k-options="layoutOptions"
k-on-select="changeLayout(true)">
</select>

$scope.layoutOptions = {
dataSource: $scope.layouts,
dataTextField: "description",
dataValueField: "id",
filter: "contains",
valueTemplate: '<span class="selected-value"><img data-ng-src="{{dataItem.image}}") width="20px" height="20px"></span><span>&nbsp;&nbsp;{{dataItem.description}}</span>',
template: '<span class="k-state-default"><img data-ng-src="{{dataItem.image}}") width="40px" height="40px"></span><span>&nbsp;&nbsp;{{dataItem.description}}</span>',
noDataTemplate:
//$("#noDataTemplate").html()
'<div>' +
'Save Custom Template - "#: instance.filterInput.val() #" ?' +
'</div>' +
'<br/>' +
'<button class="k-button" onclick="addNew("#: instance.filterInput.val() #")">Save</button>'
};

 

Thanks!!

[Stefan]

Hello Marc,

Angular functions can be used inside the template using the AngularJS syntax {{someAngularFunction()}}.

Also, I noticed that the //$("#noDataTemplate").html() approach was tested, but this will only work if k-options approach is used to set the widget options:

http://docs.telerik.com/kendo-ui/AngularJS/introduction#widget-configuration-in-controller

I hope this will help to achieve the desired result.

Regards,
Stefan
Telerik by Progress

[Marc]

Hi,

I am using layoutOptions. I have changed to:

 

noDataTemplate: '<div>Save Custom Template - "#: instance.filterInput.val() #" ?</div><br/>' +
'<button class="k-button" onclick="{{addNew("#: instance.filterInput.val() #")}}">Save</button>'

 

However - I still get an error, Uncaught SyntaxError: Unexpected token }

 

[Stefan]

Hello Marc,

I made our demo example for adding a new item using AngularJS. The example is demonstrating two different approaches how an AngularJS function can be used inside the template:

http://dojo.telerik.com/EKUJu

If this is still not working on your end, please try with the k-options approach used in the Dojo.

Regards,
Stefan
Telerik by Progress

[Marc]

Works perfect! Thanks, again!!

[Marc]

Another question - inside the "addNew" function, is there a way to clear the value of the filter? Ie - I add a new one, and then the user is immediately shown the entire list.

[Stefan]

Hello Marc,

The filter will clear automatically and all of the data should be visible. Also, the newly added item will be selected.

Generally, the filters can be cleared using the filter method of the dataSource and passing it an empty array:

http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#methods-filter

Regards,
Stefan
Telerik by Progress

[Marc]

Hey!

This is working properly! Thank you.

Marc