This is a migrated thread and some comments may be shown as answers.

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

2 Answers 531 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Tyler
Top achievements
Rank 1
Tyler asked on 04 Dec 2018, 01:55 PM

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();
}

2 Answers, 1 is accepted

Sort by
0
Tyler
Top achievements
Rank 1
answered on 04 Dec 2018, 02:13 PM

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>';

 

0
Viktor Tachev
Telerik team
answered on 06 Dec 2018, 08:29 AM
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
Grid
Asked by
Tyler
Top achievements
Rank 1
Answers by
Tyler
Top achievements
Rank 1
Viktor Tachev
Telerik team
Share this question
or