Add new Item with AngularJS

8 posts, 1 answers
  1. Marc
    Marc avatar
    165 posts
    Member since:
    Sep 2016

    Posted 03 Jan Link to this post

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

  2. Stefan
    Admin
    Stefan avatar
    1262 posts

    Posted 04 Jan Link to this post

    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 visualization (charts) and form elements.
  3. Marc
    Marc avatar
    165 posts
    Member since:
    Sep 2016

    Posted 04 Jan in reply to Stefan Link to this post

    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 }

     

  4. Answer
    Stefan
    Admin
    Stefan avatar
    1262 posts

    Posted 04 Jan Link to this post

    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.
  5. Marc
    Marc avatar
    165 posts
    Member since:
    Sep 2016

    Posted 04 Jan in reply to Stefan Link to this post

    Works perfect! Thanks, again!!
  6. Marc
    Marc avatar
    165 posts
    Member since:
    Sep 2016

    Posted 05 Jan Link to this post

    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.
  7. Stefan
    Admin
    Stefan avatar
    1262 posts

    Posted 06 Jan Link to this post

    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.
  8. Marc
    Marc avatar
    165 posts
    Member since:
    Sep 2016

    Posted 06 Jan in reply to Stefan Link to this post

    Hey!

    This is working properly! Thank you.

    Marc

Back to Top