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> {{dataItem.description}}</span>',
template: '<span class="k-state-default"><img data-ng-src="{{dataItem.image}}") width="40px" height="40px"></span><span> {{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
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
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 }
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
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
Hey!
This is working properly! Thank you.
Marc