TypeScript - Passing arguments from grid event

2 posts, 1 answers
  1. Darren
    Darren avatar
    1 posts
    Member since:
    Jul 2014

    Posted 26 Apr Link to this post

    Hi, 

    We are moving our javascript files to typescript for a number of reasons, but one issue that I have is the calling of this.dataitem whilst inside a class, because the this object refers to the class rather than the calling object. 

     

    The current code that was inside the partial is 

    function onSelect(e) {

                var dataItem = this.dataItem(e.item.index());
                window.document.getElementById($('summary').val()).innerHTML = dataItem.Summary;
                window.document.getElementsByName($('#id').val())[0].value = dataItem.Id;
            }

     

    the code in the typescript class is 

    namespace myNamespace{ 

       export class myClassObject

     

       ... other methods

        onSelect(e) {
                var dataItem = this.dataItem(e.item.index()); // This is the line that I am having issue with because of 'this'
                (window as any).document.getElementById(this.spnSummary).innerHTML = dataItem.Summary;
                (window as any).document.getElementsByName(this.nameOfIdField)[0].value = dataItem.Id;
            }

        }

    }

     

    The Razor that is calling this is (minus bits that are not necessary to this question

     

    @(Html.Kendo().AutoComplete()
                              .Name(Model.Name)
                              ...

                              ... 
                              .Value(Model.Value)
                              .Events(e => e.Change("onChange").Select("onSelect")) // <=== these are the methods I need to call. 

     

    I am going to need to do this on a number of items in the site, so any and all help would be gratefully received. 

  2. Answer
    Alex Hajigeorgieva
    Admin
    Alex Hajigeorgieva avatar
    489 posts

    Posted 30 Apr Link to this post

    Hi, Darren,

    The provided code snippet shows the Kendo UI AutoComplete as opposed to the Kendo UI Grid. However, regardless of the widget, the event data of widget events is assigned to e.sender.

    https://docs.telerik.com/kendo-ui/api/javascript/ui/autocomplete/events/select

    The Kendo UI Autocomplete select event actually emits the dataItem so the onSelect function handler could be simplified:

    function onSelect(e) {
      var dataItem = e.dataItem;
      $('summary').val(dataItem.Summary);
      $('#id').val(dataItem.Id);
    }

    Let me know if you need further assistance or in case you face any difficulties.

    Kind Regards,
    Alex Hajigeorgieva
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top