Getting "this.dataItem is not a function" when passing click event details

[Tyler]

I have a Kendo grid set up, including a template string that shows a button to click to see more details about the row. In order to do this, I set a 'dataBound' function to fire that attaches a click event to each row... which fires the below function. The idea is that this function will accept the 'event' details and use them to show the respective deatils in a pop up box. However, when I get to the bolded line below, I get an error that .dataItem is not a function at showDetails.

I know that this used to work when there was no template string being used (I implemented the template string for some conditional row formatting). Is there a way to pass these 'event' details to the function in this manner?

function showDetails(e) {
         e.preventDefault();
         var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
         wnd.content(detailsTemplate(dataItem));
         wnd.center().open();
}

[Tyler]

To clarify, I realize that .dataItem is Kendo-specific and the generic 'event' object doesn't contain this... I'm just wondering what the correct way is to go about this. It seems that it would be a common task to be able to use the functionality of .dataItem when using a custom template string. For reference, the template string I used is below. It calls out to getClass function which returns the class to use. It functions correctly, but seems to be causing the other issue.

var rowTemplateString = '<tr class="#: getClass(entryType) #">' +
                            '<td><button class="moreDetailsButton">More Details</button></td>' +
                            '<td>#: category #</td>' +
                            '<td>#: entryType #</td>' +
                            '<td>#: eventId #</td>' +

                            '</tr>';

 

[Viktor Tachev]

Hi Tyler,

The reason for the error is most likely because the this keyword in showDetails is not the Grid instance. In order to get the dataItem I would suggest getting reference of the Grid and then calling dataItem() method.

function showDetails(e) {
    e.preventDefault();

    var grid = $("#YourGridId").getKendoGrid();

    var dataItem = grid.dataItem($(e.currentTarget).closest("tr"));
    wnd.content(detailsTemplate(dataItem));
    wnd.center().open();
}

Regards,
Viktor Tachev
Progress Telerik