TypeScript - Passing arguments from grid event

[Darren]

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. 

[Alex Hajigeorgieva]

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