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

Add new Item with AngularJS

7 Answers 218 Views
DropDownList
This is a migrated thread and some comments may be shown as answers.
Marc
Top achievements
Rank 1
Marc asked on 03 Jan 2017, 09:13 PM

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!!

7 Answers, 1 is accepted

Sort by
0
Stefan
Telerik team
answered on 04 Jan 2017, 01:54 PM
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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data (charts) and form elements.
0
Marc
Top achievements
Rank 1
answered on 04 Jan 2017, 02:15 PM

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 }

 

0
Accepted
Stefan
Telerik team
answered on 04 Jan 2017, 02:25 PM
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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Marc
Top achievements
Rank 1
answered on 04 Jan 2017, 02:42 PM
Works perfect! Thanks, again!!
0
Marc
Top achievements
Rank 1
answered on 05 Jan 2017, 07:27 AM
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.
0
Stefan
Telerik team
answered on 06 Jan 2017, 01:22 PM
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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Marc
Top achievements
Rank 1
answered on 06 Jan 2017, 01:26 PM

Hey!

This is working properly! Thank you.

Marc

Tags
DropDownList
Asked by
Marc
Top achievements
Rank 1
Answers by
Stefan
Telerik team
Marc
Top achievements
Rank 1
Share this question
or