passing jquery event to column command in template

4 posts, 0 answers
  1. Martin
    Martin avatar
    5 posts
    Member since:
    May 2016

    Posted 30 Sep Link to this post

    I want to use a template for my command button. like this:

     

    command: [
        {
            name: "editReport",
            template: "<button type='button' class='btn btn-link' title='Redigér rapport' data-ng-click='vm.onEdit()' data-ng-disabled='!vm.canEdit'><i class='fa fa-pencil' aria-hidden='true'></i></button>"
        } as any,
        {
            name: "deleteReport",
            template: "<button type='button' class='btn btn-link' title='Slet rapport' data-ng-click='vm.onDelete()' data-ng-disabled='!vm.canDelete'><i class='fa fa-minus' style='color:darkred' aria-hidden='true'></i></button>"
        } as any,
     
    ],
    title: "Handlinger", width: 50

    We are in a Angular controller and I want to get the JQueryEventObject in the vm.onDelete() function.

    If that not possible then maybe I could get the Id of the row in the binding   vm.onDelete({{dataItem.Id}}).

    Or is there another way to make a image button?

    public onDelete = (e: JQueryEventObject) => {
               this.$confirm({ text: 'Ønsker du at slette rapporten?', title: 'Slet rapport', ok: 'Ja', cancel: 'Nej' })
                   .then(() => {
                       var dataItem = this.mainGrid.dataItem(this.$(e.currentTarget).closest("tr"));
                       var entityId = dataItem["Id"];
                       this.mainGrid.dataSource.remove(dataItem);
                       this.mainGrid.dataSource.sync();
                   });
           }

  2. Dimiter Topalov
    Admin
    Dimiter Topalov avatar
    349 posts

    Posted 04 Oct Link to this post

    Hello Martin,

    Using a template for the command column is not supported, but you can create a regular template column, and customize its content in accordance with your preference, and the scenario requirements, e.g.:

    http://dojo.telerik.com/UWoJo

    The event data can be passed to the click handler via onClickHandler($event). Then in the handler, the dataItem, corresponding to the row the clicked button is in, can be obtained via $(e.target).closest('tr').

    I hope this helps.

    Regards,
    Dimiter Topalov
    Telerik by Progress
    Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
  3. Kendo UI is VS 2017 Ready
  4. Martin
    Martin avatar
    5 posts
    Member since:
    May 2016

    Posted 04 Oct in reply to Dimiter Topalov Link to this post

    Thanks for a very good example that solved my problem. The real trick for me was using $event in the template.

    Have you completely killed jquery in Kendo UI for Angular 2.0? I really hope so. and can't wait to try it out

  5. Dimiter Topalov
    Admin
    Dimiter Topalov avatar
    349 posts

    Posted 06 Oct Link to this post

    Hello Martin,

    You can check out the progress on Kendo UI for Angular 2 and try the most recently added components here:

    http://www.telerik.com/kendo-angular-ui/

    Regards,
    Dimiter Topalov
    Telerik by Progress
    Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
Back to Top
Kendo UI is VS 2017 Ready